The PURE.CSS Example

Pure.CSS — Overview

Pure is a Cascading Style Sheet (CSS) developed by YAHOO. It helps in creating faster, beautiful, and responsive websites.

Some of its salient features are as follows −

• In-built responsive design
• Standard CSS with minimal footprint
• Set of small, responsive CSS modules
• Free to use

Responsive Design

Pure has an in-built responsive design such that the website created using Pure will redesign itself as per the device size. Pure has a 12 column mobile-first fluid grid that supports responsive classes for small, large, and medium screen sizes.

Pure classes are created in such a way that the website can fit any screen size. The websites created using Pure are fully compatible with PC, tablets, and mobile devices.

Standard CSS

Pure uses standard CSS only and it is very easy to learn. There is no dependency on any external JavaScript library such as jQuery.

Extensible

Pure is by design very minimal and flat. It is designed considering the fact that it is much easier to add new CSS rules than to overwrite existing CSS rules. By adding a few lines of CSS, Pure’s appearance can be customized to work with an existing web project.

It supports shadows and bold colors. The colors and shades remain uniform across various platforms and devices. And most important of all, it is absolutely free to use.

Pure.CSS — Environment Setup

There are two ways to use Pure −

• Local Installation − You can download the pure.css file on your local machine 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).

Local Installation

• Go to https://purecss.io/start/ to download the latest version available.
• Place the downloaded pure-min.css file in a directory of your website, e.g. /css.

Example

You can include the css file in your HTML file as follows −

     .grids-example  
 
First Column
 
Second Column
 
Third Column
 
 
   

It will produce the following result −

CDN Based Version

You can include the pure.css file into your HTML code directly from the Content Delivery Network (CDN). yui.yahooapis.com provides content for the latest version.

We are using yui.yahooapis.com CDN version of the library throughout this tutorial.

Example

Now let us rewrite the above example using pure.css from PureCSS.io CDN.

     .grids-example  
 
First Column
 
Second Column
 
Third Column
 
 
   

It will produce the following result −

Pure.CSS — Responsive Design

Pure.CSS has several special classes to create a responsive design.

Sets the container to occupy required space on any device.

Sets the container to occupy required space on a device with width ≥ 568px.

Sets the container to occupy required space on a device with width ≥ 768px.

Sets the container to occupy required space on a device with width ≥ 1024px.

Sets the container to occupy required space on a device with width ≥ 1280px.

In the following example, we’re going to create a responsive grid with a row having four columns. The columns should stack on small screens, should take up width: 50% on medium-sized screens, and should take up width: 25% on large screens.

This is done by adding .pure-u-1 class for small screens, .pure-u-md-1-2 for mediumsized screens, and .pure-u-lg-1-4 for large screens. Resize the page to see the grid response to the screen size.

Example

      .grids-example < background: rgb(250, 250, 250); margin: 2em auto; font-family: Consolas, 'Liberation Mono', Courier, monospace; text-align: center; >.graybox  
 
 
 
These four columns should stack on small screens, should take up width: 50% on medium-sized screens, and should take up width: 25% on large screens.
 
 
 
 
First Column
 
 
 
 
Second Column
 
 
 
 
Third Column
 
 
 
 
Fourth Column
 
 
 
 
 
 
 
 
This column is to occupy the complete space of a row.
 
 
 
 
 
 
 
 
This column is to occupy the two-fifth of the space of a row.
 
 
 
 
 
 
 
 
This column is to occupy the three-fifth of the space of a row.
 
 
 
 
 
 
 
 
Column 1: This column is to occupy the one-third of the space of a row on all devices.
 
 
 
 
Column 2: This column is to occupy the one-third of the space of a row on all devices.
 
 
 
 
Column 3: This column is to occupy the one-third of the space of a row on all devices.
 
 
 
 
   

Result

Pure.CSS — Grids

Pure.CSS provides the concept of Pure Grid with two types of classes, pure-g, a grid class and unit classes, pure-u-*. Following are the rules to use Pure 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 to be a part of a grid unit to be rendered properly.

Grid Unit Sizes

Pure Grid comes with 5th and 24th unit sizes. Following illustrations show the examples of some of the available units, which can be appended to pure-ui-. For example, to create a cell of 50% width, you can use a css style pure-ui-1-2.

5 th Based Units

      .grids-example < background: rgb(250, 250, 250); margin: 2em auto; font-family: Consolas, 'Liberation Mono', Courier, monospace; text-align: center; >.grid-unit < margin: 0.25em 0; padding-left: 4.5em; >.grid-unit .grid-unit-width < font-family: Consolas, 'Liberation Mono', Courier, monospace; >.grid-unit-bar  
 
1-5
 
 
2-5
 
 
3-5
 
 
4-5
 
 
1
 
 
1-1
 
 
   

Result

24 th Based Units

      .grids-example < background: rgb(250, 250, 250); margin: 2em auto; font-family: Consolas, 'Liberation Mono', Courier, monospace; text-align: center; >.grid-unit < margin: 0.25em 0; padding-left: 4.5em; >.grid-unit .grid-unit-width < font-family: Consolas, 'Liberation Mono', Courier, monospace; >.grid-unit-bar  
 
1-24
 
 
1-12
 
 
2-24
 
 
3-24
 
 
1-8
 
 
4-24
 
 
1-6
 
 
5-24
 
 
1-4
 
 
6-24
 
 
7-24
 
 
1-3
 
 
22-24
 
 
23-24
 
 
1
 
 
1-1
 
 
24-24
 
 
   

Result

Pure.CSS — Forms

Pure.CSS has a very beautiful and responsive CSS for form designs. The following CSS are used −

Represents a compact inline form.

Represents a stacked form with input elements below the labels. To be used with pure-form.

Represents an aligned form with input elements below the labels. To be used with pure-form.

Displays a form control with rounded corners

Example

      
 
 
Username 
Email 
Comments 
  Married 
  Single 
  Don't know (Disabled) 
 
  Male 
  Female 
  Don't know (Disabled) Submit 
 
 
   

Result

Pure.CSS — Buttons

Pure.CSS has a very beautiful and responsive CSS for customizing the look of a button. The following CSS are used −

Represents a standard button. Can be used to style a link and button as well.

Represents a disabled button. To be used along with pure-button.

Represents a pressed button. To be used along with pure-button.

Example

     .success, .error, .warning, .secondary < color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); >.success < background: rgb(28, 184, 65); /* green */ >.error < background: rgb(202, 60, 60); /* maroon */ >.warning < background: rgb(223, 117, 20); /* orange */ >.secondary < background: rgb(66, 184, 221); /* light blue */ >.xsmall < font-size: 70%; >.small < font-size: 85%; >.large < font-size: 110%; >.xlarge 
Standard Buttons
 Click Me Click Me I am disabled 
Links as Buttons
 Link Link Disabled Link 
Primary Button
 Submit 
Customized button
 Success Error Warning Secondary 
Different Sized button
 Extra Small Small Large Extra Large   

Result

Pure.CSS — Tables

Pure.CSS can be used to display different types of tables using various styles over pure-table

Represents a basic table with any a default padding, border and an emphasized header.

Draws a table with a border across rows.

Draws a table with horizontal lines.

Displays a stripped table.

If applied on every other tr,changes the background of the row and creates a zebra-styled effect.

Example

     
Tables Demo
 
Simple Table
 
 
 
Student
 
Class
 
Grade
 
 
 
 
Mahesh Parashar
 
VI
 
A
 
 
Rahul Sharma
 
VI
 
B
 
 
Mohan Sood
 
VI
 
A
 
 
 
 
Bordered Table
 < th>Student
 
 
Class
 
Grade
 
 
 
 
Mahesh Parashar
 
VI
 
A
 
 
Rahul Sharma
 
VI
 
B
 
 
Mohan Sood
 
VI
 
A
 
 
 
 
Table with Horizontal Borders
 
 
 
Student
 
Class
 
Grade
 
 
 
 
Mahesh Parashar
 
VI
 
A
 
 
Rahul Sharma
 
VI
 
B
 
 
Mohan Sood
 
VI
 
A
 
 
 
 
Stripped Table
 
 
 
Student
 
Class
 
Grade
 
 
 
 
Mahesh Parashar
 
VI
 
A
 
 
Rahul Sharma
 
VI
 
B
 
 
Mohan Sood
 
VI
 
A
 
 
 
   

Result

Pure.CSS — Images

Pure.CSS provides options to display the images in a responsive way using pure-image as the main class.

Represents a basic styled image without any border. Image grows and shrinks with the content maintaining the correct ratio.

Example

Images Demo

---

Result

Pure.CSS — Icons

Pure.CSS supports the following popular icon libraries −

Usage

To use an icon, place the name of the icon in the class of an HTML element.

Example

        .xsmall < font-size: 70%; >.small < font-size: 85%; >.large < font-size: 110%; >.xlarge 
Icons Demo
 
Font Awesome Icon Demo
 
Google Material Design Icon Demo
 cloud cloud cloud cloud cloud 
Bootstrap Icon Demo
 
Button with Icon Demo
 Settings Checkout   

Источник

Get Started

You can add Pure to your page via the free jsDelivr CDN. Just add the following element into your page’s , before your project’s stylesheets.

 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">

Alternatively, check out other CDNs that host Pure or you can install Pure via a package manager.

Add the Viewport Meta Element

The viewport meta element lets you control the the width and scale of the viewport on mobile browsers. Since you’re building a responsive website, you want the width to be equal to the device’s native width. Add this into your page’s .

 name="viewport" content="width=device-width, initial-scale=1">

Understand Pure Grids

Pure’s grid system is very simple. You create a row by using the .pure-g class, and create columns within that row by using the pure-u-* classes.

Here’s a grid with three columns:

 class="pure-g"> div class="pure-u-1-3">p>Thirdsp>div> div class="pure-u-1-3">p>Thirdsp>div> div class="pure-u-1-3">p>Thirdsp>div> div>

Responsive Grids

Pure’s grid system is also mobile-first and responsive, and you’re able to customize the grid by specifying CSS Media Query breakpoints and grid classnames.

You’ll need to also include Pure’s grids-responsive.css onto your page:

 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/grids-responsive-min.css">

Here’s the default responsive breakpoints included in grids-responsive.css :

Key	CSS Media Query	Applies	Classname
None	None	Always	.pure-u-*
sm	@media screen and (min-width: 35.5em)	≥ 568px	.pure-u-sm-*
md	@media screen and (min-width: 48em)	≥ 768px	.pure-u-md-*
lg	@media screen and (min-width: 64em)	≥ 1024px	.pure-u-lg-*
xl	@media screen and (min-width: 80em)	≥ 1280px	.pure-u-xl-*
xxl	@media screen and (min-width: 120em)	≥ 1920px	.pure-u-xxl-*
xxxl	@media screen and (min-width: 160em)	≥ 2560px	.pure-u-xxxl-*
x4k	@media screen and (min-width: 240em)	≥ 3840px	.pure-u-x4k-*

Here’s an example of what you’d be able to do. Try resizing your screen to see how the grid responds.

Источник

Pure css что это

A set of small, responsive CSS modules that you can use in every web project.

 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">

CSS with a minimal footprint.

Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB * minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you’ll save even more bytes.

* We can add correctly 🙂 the numbers above are individual module sizes; when grouped together they compress (gzip) even more.

Your CSS foundation.

Pure builds on Normalize.css and provides layout and styling for native HTML elements, plus the most common UI components. It’s what you need, without the cruft.

Made with mobile in mind.

Pure is responsive out of the box, so elements look great on all screen sizes.

Stays out of your way.

Pure has minimal styles and encourages you to write your application styles on top of it. It’s designed to get out of your way and makes it easy to override styles.

Create responsive layouts.

By using Grids, Menus, and more, it’s easy to create beautiful responsive layouts for all screen sizes. We’ve made it easy for you to get started. Take a look at a few different layouts and start your next web project with a rock-solid foundation.

Create your own look and feel.

Unlike other frameworks, Pure’s design is unopinionated, minimal and flat. We believe that it’s much easier to add new CSS rules than to overwrite existing rules. By adding a few lines of CSS, you can customize Pure’s appearance to work with your web project.

This site is built with ❤️ using Pure v 3.0.0
All code on this site is licensed under the Yahoo BSD License unless otherwise stated.

© 2014 — Present Yahoo Inc. All rights reserved.

Источник