Home > Developer > Web Develop
0. Pure-css Introduction
Pure CSS is the CSS framework that Yahoo produced,
Relying on NORMALIZE.CSS, in the case of any JS code can be implemented in a responsive layout of the lightweight framework, no dependence, small size.
1. CDN
<linkrel= "stylesheet" href= "Http://yui.yahooapis.com/pure/0.5.0/pure-min.css" >
2. Set Viewport
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0" >
3. Full HTML5 Template
<!doctype html>
<meta charset= "Utf-8" >
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0" >
<title> Page Title </title>
<link rel= "stylesheet" href= "Http://yui.yahooapis.com/pure/0.5.0/pure-min.css" >
<body>
<!--
Web content
-
</body>
4. Hide Elements
Adding the hidden attribute to the element, the effect is equivalent to Display:none!important;
<input type= "text" name= "_CSRF" hidden>
5. Picture adapts to window size
Add a class to the IMG tag. pure-img
6. Grid Grids
The Mesh object contains two style classes: the Grid class (PURE-G) and the cell class (Pure-u or pure-u-*)
The size of the cell is specified by the class, such as: Pure-u-1-2 = 50% width, pure-u-1-5 20% width
Example:
<div class= "Pure-g" >
<div class= "Pure-u-1-3" ><p>Thirds</p></div>
<div class= "Pure-u-1-3" ><p>Thirds</p></div>
<div class= "Pure-u-1-3" ><p>Thirds</p></div>
</div>
7. Responsive Grid Responsive Grids
PURECSS No response grid frame is added by default, add content to head tag manually when needed
<!--[If LTE IE 8]>
<link rel= "stylesheet" href= "Http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css" >
<! [endif]-->
<!--[if GT IE 8]><!-->
<link rel= "stylesheet" href= "Http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css" >
<!--<! [endif]-->
Compare common meshes with responsive grids
Ordinary:
<div class= "Pure-g" >
<div class= "Pure-u-1-3" > ... </div>
<div class= "Pure-u-1-3" > ... </div>
<div class= "Pure-u-1-3" > ... </div>
</div>
Response type
<div class= "Pure-g" >
<div class= "Pure-u-1pure-u-md-1-3" > ... </div>
<div class= "Pure-u-1 pure-u-md-1-3" > ... </div>
<div class= "Pure-u-1 pure-u-md-1-3" > ... </div>
</div>
In the big screen, the normal and responsive cell widths are 33.3%, but the cell width of the response in the small screen becomes 100%
Default media size definition
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-*
Note: 1em = 16px By default
Apply borders and spacing to a table
<style>
. pure-g > Div {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
Box-sizing:border-box;
}
. l-box {
Padding:1em;
}
</style>
<div class= "Pure-g" >
<div class= "Pure-u-1-2 l-box" > ... </div>
<div class= "Pure-u-1-2 l-box" > ... </div>
</div>
Note: Using box-sizing can prevent the border from occupying pixels, disturbing the layout
For
A better compatibility, grid default to <select>, and <textarea> used Font-family:sans-serif;
If you need to modify it, you can add the following style:
<style>
HTML, button, input, select, textarea,
. pure-g [Class *= "Pure-u"] {
/* Custom Fonts */
Font-family:georgia, Times, "Times New Roman", serif;
}
</style>
Responsive Layout Framework PURE-CSS 5.0 Example Chinese version-top
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
