Pure : 来自雅虎的纯 CSS 框架
Pure也是一款很出色的CSS框架,之前分享的Bootstrap是由Twitter出品的,而Pure是来自雅虎的。尽管从UI界面效果上来说,Pure没有Bootstrap那样精美,但Pure是纯CSS实现的,因此非常小巧,整个框架压缩后只有5.7k左右。
Pure的特点
- 最大的特点就是框架基于纯CSS,无任何JavaScript代码,渲染速度比较快。
- 由Yahoo出品,技术上应该不存在太大问题。
- 框架十分小巧,压缩后仅5.7k。
- 组件也很丰富,包括表格、表单、按钮、表、导航等。
- CSS类的标识十分简单,因此在使用Pure的过程中代码会比较友好。
Pure组件的相关示例及使用方法
首先在页面上引用Pure的CSS库:
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
在head之间加上以下meta标签,用来控制页面在移动设备上的宽度和高度:
<meta name="viewport" content="width=device-width, initial-scale=1">
表单
Pure实现横向登录表单
HTML代码:
<form class="pure-form"> <fieldset> <legend>A compact inline form</legend> <input type="email" placeholder="Email"> <input type="password" placeholder="Password"> <label for="remember"> <input id="remember" type="checkbox"> Remember me </label> <button type="submit" class="pure-button pure-button-primary">Sign in</button> </fieldset> </form>
Pure实现纵向登录表单
HTML代码:
<form class="pure-form pure-form-stacked"> <fieldset> <legend>A Stacked Form</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"> <label for="state">State</label> <select id="state"> <option>AL</option> <option>CA</option> <option>IL</option> </select> <label for="remember" class="pure-checkbox"> <input id="remember" type="checkbox"> Remember me </label> <button type="submit" class="pure-button pure-button-primary">Sign in</button> </fieldset> </form>
Pure实现多列表单字段的登录表单
HTML代码:
<form class="pure-form pure-form-stacked"> <fieldset> <legend>Legend</legend> <div class="pure-g"> <div class="pure-u-1 pure-u-md-1-3"> <label for="first-name">First Name</label> <input id="first-name" class="pure-u-23-24" type="text"> </div> <div class="pure-u-1 pure-u-md-1-3"> <label for="last-name">Last Name</label> <input id="last-name" class="pure-u-23-24" type="text"> </div> <div class="pure-u-1 pure-u-md-1-3"> <label for="email">E-Mail</label> <input id="email" class="pure-u-23-24" type="email" required> </div> <div class="pure-u-1 pure-u-md-1-3"> <label for="city">City</label> <input id="city" class="pure-u-23-24" type="text"> </div> <div class="pure-u-1 pure-u-md-1-3"> <label for="state">State</label> <select id="state" class="pure-input-1-2"> <option>AL</option> <option>CA</option> <option>IL</option> </select> </div> </div> <label for="terms" class="pure-checkbox"> <input id="terms" type="checkbox"> I've read the terms and conditions </label> <button type="submit" class="pure-button pure-button-primary">Submit</button> </fieldset> </form>
按钮
利用Pure我们实现很多简单的按钮,效果如下:
HTML代码:
<div> <style scoped> .button-success, .button-error, .button-warning, .button-secondary { color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .button-success { background: rgb(28, 184, 65); /* this is a green */ } .button-error { background: rgb(202, 60, 60); /* this is a maroon */ } .button-warning { background: rgb(223, 117, 20); /* this is an orange */ } .button-secondary { background: rgb(66, 184, 221); /* this is a light blue */ } </style> <button class="button-success pure-button">Success Button</button> <button class="button-error pure-button">Error Button</button> <button class="button-warning pure-button">Warning Button</button> <button class="button-secondary pure-button">Secondary Button</button> </div>
更多关于Pure的例子和文档,大家可以前往雅虎Pure的官方网站上查找,关于Pure的用法就暂时介绍到这里了。
本文链接:http://www.codeceo.com/article/yahoo-pure-css.html
本文作者:码农网 – 小峰
相关推荐
ThikHome 2020-08-24
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
nicepainkiller 2020-08-20
hellowzm 2020-08-18