This post is not for end-users, and its recommended for people to have basic CSS skills to use PureCSS with WordPress.
You can go from forms on your WordPress site looking like this
to looking like this
in a matter of few minutes using PureCSS framework. This is just one example to demonstrate instant cross browser skinning of form elements.
Using PureCSS you get a grid system for responsive layouts, buttons, form elements, tables and menus. Above all its only 3.8KB for its full minified package. This makes it one of the most light-weight frameworks.
How to use PureCSS with Your WordPress Website?
- Make sure you use a child-theme. If not create one using this plugin.
- Open your child theme’s functions.php file. You can use Appearance > Editor in your WordPress admin sidebar.
- Paste the following lines
function add_external_scripts() {
wp_enqueue_style( 'external_css', 'https://unpkg.com/[email protected]/build/pure-min.css');
}
add_action( 'wp_enqueue_scripts', 'add_external_scripts' );
And then whenever you have a form tag in your HTML or WordPress post code, make sure you add a class like shown in the code below
<form class="pure-form">
.... your form code here....
</form>
<input class="pure-button">
<button class="pure-button">
The above codes are for form, buttons. Check out the entire set of readily available classes on official PureCSS website.
