Pure CSS Tutorial
Pure CSS Introduction
Pure.CSS is small and responsive style sheet modules which are build on top of Normalize.css that provides the styling’s of layouts, HTML elements like buttons, tables, menus.
Pure CSS was originally developed by YAHOO. It was developed with mobile first concept with responsive elements which fits on all device sizes. Pure has produced the minified size of 4KB which fits all modules. Even you decide which module to use for you application so that the rest of the modules can be ignored and save the bytes.
Pure CSS is use full in many ways such as, Photorealistic images to even video games, you’ll be shocked to see what a great developer can accomplish with just CSS.
So, Let’s have a quick view of Pure CSS tutorial…
You can download the Pure CSS from the below link.When we are configuring the Pure, we should never forget the Viewport Meta element. This is important for mobile browsers to get control of the width and scale of the elements for a responsive website. Please use the below element in the header tags. Learn more..
The grid system was developed as responsive and targeted to fit for mobile. You can still customize the grid by mentioning the grid class names and media query breakpoints. Learn more..
Normalize is CSS file developed by Nicolas Gallagher and Jonathan Neal for cross-browser consistency.As we discussed, Normalize.css is base for Pure.CSS. But few HTML elements like tables, menus, forms will have regular styling. We can think that Pure will replace for such requirements. In order to use Normalize.css. Learn more..
In this tutorial, we will learn about the Grid views available in Pure. Grid means division of web page to place the elements in the required format. Pure Grid mainly consists of 2 types of classes. Grid class name can be defined as pure-g and Unit Class name can be defined as pure-u. Learn more..
Pure comes with 2 types of Grids Units Sizes. one is 5th Based Grid Unit Size and the other is 24th Based Grid Unit Size.All Units are the fractions of 5 or 24 which needs to be appended to pure-u to make a class name. For example, pure-u-1-4 is the unit class name of 20% width. Learn more..
By the name, we can understand that these are not responsive. Regular grid shows the elements as it is. They will not get re-arranged even in the mobile version. Please take a look at the below example for regular grid view. Learn more..
Pure has provided the mobile prioritized grid system which will not come with pure.css file. For which, we need to use separate CSS file by using the below CDN link. The below provided link should be used between head tags and before the project specific style sheets. Learn more..
Forms are generally seen in any website. The most common Form is login or register Forms. Pure CSS provided the class name called pure-form which can be used in <form> element. Let us see the default inline form. Learn more..
In this tutorial, we will learn about the Pure Stacked Form. Pure CSS provided the class name called pure-form-stacked to be used along with the class pure-form in the <form> element. Let us see the Stacked form. Learn more..
Pure CSS provided the class name called pure-form-aligned to be used along with the class pure-form in the <form> element.In this aligned form, all the labels would be right aligned so that form input controls get in line with labels. The Aligned form would look as stacked form in the mobile view. We also need to use the pure-control-group class. Learn more..
In this tutorial, we will learn about the Pure Multi-Columns Form. This can be created with the help of pure grid. So, in the below example we are going to use the Pure Responsive Grid to create the responsive multi-column forms. This will look alike stacked form in the mobile view. Learn more..
Inputs are generally text fields, text area, check boxes, radios through which the input could be provided. Input elements have different types of input sizes as like pure grids units.Here, we can use the class name pure-input-* which can be defined for various sizes. Learn more..
In this tutorial, we will learn about Pure CSS buttons. Pure CSS provided different types of buttons like Disabled, Active, Primary, etc. Now, let us understand each of those in brief. First, let us go with default buttons which comes with a class name called ” pure-button” which can be added to either an anchor tag <a> or button tag <button> Learn more..
In this tutorial, we will learn about creating tables in HTML using Pure CSS. Pure CSS provided the class name called “pure-table” to design a HTML table.This particular class will take care about the padding and borders to the rows and columns of the table and highlight the header too. Below is the example for creating a default table in Pure CSS. Learn more..
In this tutorial, we will learn about creating Bordered tables in HTML using Pure CSS. Pure CSS provided the class name called “pure-table-bordered” for creating the tables with border. We need to add this class along with pure-table class in the <table> element. Learn more..
In this tutorial, we will learn about creating Horizontal lined tables in HTML using Pure CSS. Pure CSS provided the class name called “pure-table-horizontal” for creating the tables having data separated by horizontal lines. We need to add this class along with pure-table class in the <table> element. Learn more..
Pure CSS provided the class name called “pure-table-striped” for creating tables having stripes in alternate rows as zebra-style effect.We need to just add this class along with pure-table class in the <table> element if the browser is CSS3 supported. Learn more..
In this tutorial, we will discuss about creating the horizontal Menu using Pure CSS. We need to use the class “pure-menu-horizontal” to create the horizontal menu.As part of this, we will use the class names “pure-menu-link” for creating the menu link and “pure-menu-item”, “pure-menu-heading” for creating the menu items and headings. Learn more..
We need to use the class “pure-menu-vertical” to create the vertical menu.As a part of this, we will use the class names “pure-menu-link” for creating the menu link and “pure-menu-item”, “pure-menu-heading” for creating the menu items and headings. Learn more..
we will learn about creating the Dropdown Menu using Pure CSS. We need to use the classes “pure-menu-allow-hover” and “pure-menu-has-children” to create the Dropdown menu. Learn more..