What are the important features of Pure.CSS ?
Pure.css is just another framework of CSS what separates it apart is its tiny size. It’s a mere 3.7kb, hence makes it a good contender to compete against Bootstrap.
Features:
- First and foremost, It’s FREE.
- It has several important prebuilt common elements as follows
- Base: Elements like <p>, <h1…h6>, topography etc.
- Grids: Responsive grids.
- Forms: Multi-columns, stacked forms, aligned forms, grouped inputs, etc.
- Tables: Base tables with borders, stripping, etc.
- Buttons: Button effects like focus, hover, active, etc.
- Menus: Dropdowns, scrollable menus, vertical menus, responsive menus, etc.
- It is ridiculously tiny as said above. Modules clocked at less than 4kb!
- Perfect for beginners. easy, and intuitive. Just copy the stylesheet link from their website purecss.io and add it to your HTML doc.
- The pure.css is designed with keeping responsive design in mind. So we get prebuilt responsive styles that stay the same on all platforms.
- No dependency on JavaScript and its library.
- It also supports shadows and colors.
- A great alternative to Bootstrap.
- At its core, it’s just a collection of different CSS modules that are responsive, tiny, and easy to use.
Implementation of Pure.CSS: There are mainly two ways to use this framework. You can either download from purecss.io or you can use CDN. Let’s understand both by using the stacked form.
Stacked Form: Add the class “pure-form-stacked” to any <form> element to create a stacked form.
Note: Create a default form by adding “pure-form” to <form> class then you can create any particular type of form like stacked, align, etc.
Manually adding the link: Now that you have downloaded the pure.css zip file on your machine. Extract it and place it on your website directory. You can attach it to your main HTML document using the <link> tag.
Syntax:
<link rel = "stylesheet" href: "downloaded_pure_css_file"/>
Example 1:
HTML
<!DOCTYPE html><html> <head> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <!-- Linking the Pure.CSS file that we've downloaded--> <link rel="stylesheet" href="pure-min.css" /> <style> form { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } </style></head> <body> <form class="pure-form pure-form-stacked"> <!-- To create an stacked form, add the pure-form-stacked classname to a form element alongside pure-form --> <fieldset> <legend>A Stacked Form</legend> <label for="stacked-email">Email</label> <input type="email" id="stacked-email" placeholder="Email" /> <span class="pure-form-message"> This is a required field. </span> <label for="stacked-password">Password</label> <input type="password" id="stacked-password" placeholder="Password" /> <label for="stacked-state">State</label> <select id="stacked-state"> <option>AL</option> <option>CA</option> <option>IL</option> </select> <label for="stacked-remember" class="pure-checkbox"> <input type="checkbox" id="stacked-remember" /> Remember me </label> <button type="submit" class= "pure-button pure-button-primary"> Sign in </button> </fieldset> </form></body> </html> |
Output:
Stacked Form using Pure.CSS (linking the downloaded css file)
If we remove pure.css file i.e. if we remove the <link> tag, we get the following output.
Without Pure.CSS
Using CDN (Content Delivery Network): Even though both the steps do the same thing, still most people prefer CDN over manually linking the pure.css file because when you use CDN, you always get the latest file. So you don’t have to worry about updating your pure.css file every time.
Syntax:
<link rel = “stylesheet” href: “https://unpkg.com/purecss@2.0.6/build/pure-min.css”/>
/* Copy the url form pure.css website to get latest version */
Example:
HTML
<!DOCTYPE html><html> <head> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <!-- The only difference is that you have to copy the link from pure.css website instead of linking the downloaded file --> <link rel="stylesheet" href= <style> form { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } </style></head> <body> <form class="pure-form pure-form-stacked"> <!-- To create an stacked form, add the pure-form-stacked classname to a <form> element alongside pure-form --> <fieldset> <legend>A Stacked Form</legend> <label for="stacked-email">Email</label> <input type="email" id="stacked-email" placeholder="Email" /> <span class="pure-form-message"> This is a required field. </span> <label for="stacked-password">Password</label> <input type="password" id="stacked-password" placeholder="Password" /> <label for="stacked-state">State</label> <select id="stacked-state"> <option>AL</option> <option>CA</option> <option>IL</option> </select> <label for="stacked-remember" class="pure-checkbox"> <input type="checkbox" id="stacked-remember" /> Remember me </label> <button type="submit" class= "pure-button pure-button-primary"> Sign in </button> </fieldset> </form></body> </html> |
Output:
Stacked Form using Pure.CSS (CDN – Adding the url of the pure css file)
Please Login to comment...