PURE.CSS provides concept of Pure Grid with two types of classes:
- pure-g: A grid class
- pure-u-*: A unit class
Pure.CSS is a Cascading Style Sheet (CSS) framework developed by Yahoo. It is used to make website faster, beautiful and responsive.
Following are the rules to use Pure.CSS Grids:
- Widths of Units are in fractions. For example, pure-u-1-2 represents 1/2 or 50% width, pure-u-2-5 represents 2/5 or 40% width and so on.
- Children of Pure Grid (element with pure-g class) must be using pure-u or pure-u-* classnames.
- All content should be a part of a grid unit to be rendered properly.
- It is free.
- It has in-built responsive designing.
- It uses satandard CSS with minimal footprint.
- It is a collection of small, responsive CSS modules.
- It supports shadow and bold colors.
- The colors and shades remain uniform across various platforms and devices.
Pure is elegant, simple, and lightweight. It is very easy to work with. The biggest advantage of using Pure CSS is it is built to be extensible. You can simply add a few styles in your own CSS and change the look to your website.
There are two types of menus in Pure.CSS:
- Vertical menu
- Horizontal menu
Pure.CSS provides vertical menus by default. You can change the vertical menu to horizontal menu by adding the class name “pure-menu-horizontal”.
Pure.CSS has a very easy and responsive CSS to design a form. You can create different types of forms using Pure.CSS. Following is a list of some classnames:
- pure-form: It specifies a compact inline form.
- pure-form-stacked: It represents a stacked form with input elements below the labels. To be used with pure-form.
- pure-form-aligned: It represents an aligned form with input elements below the labels. To be used with pure-form.
- pure-input-rounded: It is used to display a form control with rounded corners
- pure-button: It is used to beautify a button.
- pure-checkbox: It is used to beautify a checkbox.
- pure-radio: It is used to beautify a radio.
Local Installation: You can download the pure.css file on your system and include it in your HTML code.
CDN Based Version: You can include the pure.css file into your HTML code directly from the Content Delivery Network (CDN).
PURE.CSS provides several special classes to create a responsive design:
- .pure-u-*: It is used to set the container to occupy required space on any device.
- .pure-u-sm-*: It is used to set the container to occupy required space on a devices with width ? 568px.
- .pure-u-md-*: It is used to set the container to occupy required space on a devices with width ? 768px.
- .pure-u-lg-*: It is used to set the container to occupy required space on a devices with width ? 1024px.
- .pure-u-xl-*: It is used to set the container to occupy required space on a devices with width ? 1280px.