wangdaiban.com

purecss.org

表单 – Pure

http://purecss.org/forms

Form class=pure-form fieldset legend 一个简单的单行表单 /legend input type=email placeholder=Email input type=password placeholder=Password label for=remember input id=remember type=checkbox 记住我 /label button type=submit class=pure-button pure-button-primary 登陆 /button /fieldset /form. Form class=pure-form pure-form-stacked fieldset legend 堆叠式表单 /legend label for=email Email /label input id=email type=email placeholder=Email label for=password Password /label input id=password type=password placeholder=Password l...

purecss.org

开始使用 – Pure

http://purecss.org/start

Link rel=stylesheet href=http:/ yui.yahooapis.com/pure/0.5.0/pure-min.css. 添加 Viewport Meta 元素. Meta name=viewport content=width=device-width, initial-scale=1. Div class=pure-g div class=pure-u-1-3 p 三分之一 /p /div div class=pure-u-1-3 p 三分之一 /p /div div class=pure-u-1-3 p 三分之一 /p /div /div. If lte IE 8] link rel=stylesheet href=http:/ yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css! If gt IE 8]! Media screen and (min-width: 35.5em). Media screen and (min-width: 48em).

purecss.org

表格 – Pure

http://purecss.org/tables

Table class=pure-table thead tr th # /th th Make /th th Model /th th Year /th /tr /thead tbody tr td 1 /td td Honda /td td Accord /td td 2009 /td /tr tr td 2 /td td Toyota /td td Camry /td td 2012 /td /tr tr td 3 /td td Hyundai /td td Elantra /td td 2010 /td /tr /tbody /table. This site is built with 3 using Pure v0.5.0. All code on this site is licensed under the Yahoo BSD License.

purecss.org

模板 – Pure

http://purecss.org/layouts

This site is built with 3 using Pure v0.5.0. All code on this site is licensed under the Yahoo BSD License.

purecss.org

栅格 – Pure

http://purecss.org/grids

Pure栅格系统有两种class组成 栅格 class (. 和 单元格 class (. Div class=pure-g div class=pure-u-1-3 p 三分之一 /p /div div class=pure-u-1-3 p 三分之一 /p /div div class=pure-u-1-3 p 三分之一 /p /div /div. If lte IE 8] link rel=stylesheet href=http:/ yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css! If gt IE 8]! Link rel=stylesheet href=http:/ yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css! 非响应式 vs. 响应式. Media screen and (min-width: 35.5em). Media screen and (min-width: 48em). Media screen and (min-width: 64em).

purecss.org

基础 – Pure

http://purecss.org/base

Link rel=stylesheet href=http:/ yui.yahooapis.com/pure/0.5.0/base-min.css. Input type=text name= csrf hidden. This site is built with 3 using Pure v0.5.0. All code on this site is licensed under the Yahoo BSD License.

purecss.org

Customize – Pure

http://purecss.org/customize

Choose the modules that you need. Rollups consist of all the modules in Pure. There are two rollups available - a regular (responsive) one, and a non-responsive one. Choose that one that's right for your project. Http:/ yui.yahooapis.com/pure/0.5.0/pure-min.css. Http:/ yui.yahooapis.com/pure/0.5.0/pure-nr-min.css. The main host for Pure is the Yahoo! Cdnjsdelivr.net/pure/0.5.0/pure-min.css. Cdnrawgit.com/yahoo/pure-release/v0.5.0/pure-min.css. Ossmaxcdn.com/libs/pure/0.5.0/pure-min.css. Combo handling is...

purecss.org

按钮 – Pure

http://purecss.org/buttons

A class=pure-button href=# A Pure Button /a button class=pure-button A Pure Button /button. A class=pure-button pure-button-disabled href=# A Disabled Button /a button class=pure-button pure-button-disabled A Disabled Button /button. A class=pure-button pure-button-active href=# An Active Button /a button class=pure-button pure-button-active An Active Button /button. A class=pure-button pure-button-primary href=# A Primary Button /a button class=pure-button pure-button-primary A Primary Button /button.

purecss.org

Tools – Pure

http://purecss.org/tools

Write, manipulate, and do more with CSS. Installing Pure with Bower. You can add Pure to your project through Bower. This is our recommended way to to integrate Pure into your project's build process and tool chain. It also works great if your website is SSL-encrypted. Bower install pure - save. Extending Pure with Grunt. We've written several tools that help you extend Pure and integrate it with your project's CSS. These tools are available as Grunt. Page to learn more. Extending Pure with Rework. Grunt...

purecss.org

Extend – Pure

http://purecss.org/extend

Build on top of Pure. One of our goals when developing Pure was to make it extremely extensible. By including Pure and writing some CSS on top of it, you can ensure that your site or app works across browsers, while looking truly unique. Best of all, your CSS file size will remain tiny, which is a great thing for mobile users and others with slow connections. Want a quick start? Take a look at some layouts. That we've built on top of Pure. We prefer to call it. The two class names serve different purpose...