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.
- 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.
- 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.
<link rel = "stylesheet" href: "downloaded_pure_css_file"/>
If we remove pure.css file i.e. if we remove the <link> tag, we get the following output.
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.
<link rel = “stylesheet” href: “https://email@example.com/build/pure-min.css”/>
/* Copy the url form pure.css website to get latest version */