• Yahoo的轻型CSS框架Pure来加速web开发

  • 发布日期:2013-10-10 09:22:08   作者:峰云,就她了  
  • 雅虎推出了一个名为Pure的CSS框架,这是一系列实用的响应式CSS模块的集合,可以帮助前端开发者节省不少开发时间。

    Pure的意思是纯的意思。代码是100%使用CSS编写的。开发成员称,Pure不限于特定的JavaScirpt框架,你可以用在任何JavaScript框架、任何Web应用中。

     

    前段时间搞了salt-ssh,想给他做个平台页面,自己没这能耐写前端,但又实在不想用bootstrap了。

    帅哥陈庆给我推荐了pure这个框架,我一看,很简单明了。

    在我看来Pure更适合咱们运维人员,将会帮助我们处理应用程序所需的所有CSS工作,同时不会让每个应用千篇一律。毕竟大家的前端都不咋地。

     

    用烦了bootstrap的朋友,更应该看看这个了。 写腻味平台的朋友都有那种咋键盘的感觉吧,用用这个吧~ 不错的东东~

     

    项目地址是:

    http://purecss.io/

     

    Pure中的主要组件包括:

     

    • 一个响应式网格,可根据需求定制。

    • 一个基于Normalize.css的基础库,用于修复跨浏览器兼容问题。

    • 统一的按钮风格,可与<a>、<button>元素结合使用。

    • 水平、垂直菜单,支持下拉菜单

    • 实用的表单组,适用于各种大小的屏幕

    • 各种常见的表格样式

    • 极其简约的外观,超容易定制

    • 默认支持响应式设计,同时还包含无响应选项

    • 可通过Skin Builder.轻松一键定制

    • 非常轻量,gzip版本只有4.8KB

     

     

    使用方法: (够简单吧)

    1
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">

     

    我们也可以把东西单独的提出来用:

     

     

    Basehttp://yui.yahooapis.com/pure/0.3.0/base-min.css

    Buttonshttp://yui.yahooapis.com/pure/0.3.0/buttons-min.css

    Forms (Responsive)http://yui.yahooapis.com/pure/0.3.0/forms-min.css

    Forms (Non-Responsive)http://yui.yahooapis.com/pure/0.3.0/forms-nr-min.css

    Grids (Responsive)http://yui.yahooapis.com/pure/0.3.0/grids-min.css

    Grids (Non-Responsive)http://yui.yahooapis.com/pure/0.3.0/grids-nr-min.css

    Menus (Responsive)http://yui.yahooapis.com/pure/0.3.0/menus-min.css

    Menus (Non-Responsive)http://yui.yahooapis.com/pure/0.3.0/menus-nr-min.css

    Tableshttp://yui.yahooapis.com/pure/0.3.0/tables-min.css

     

    170305926.png

     

    我们用开发工具看看,他的结构,会发现真的很清爽 ~

    一个全面的,一个左,一个右,结构很是清楚 !

     

    170358910.png

    先来看下基本的样式:


    <table class="pure-table pure-table-bordered"> 
        <tbody> 
            <tr> 
                <td><h1>xiaorui.cc</h1></td> 
                <td><h2>renren</h2></td> 
                <td><h3>taobao</h3></td> 
            </tr> 
            <tr> 
                <td><h4>Heading 4</h4></td> 
                <td><h5>Heading 5</h5></td> 
                <td><h6>Heading 6</h6></td> 
            </tr> 
        </tbody> 
    </table>

    172333222.png

    网格的理解

    pure-g是个类,pure-u是个单元 单元再后面的数字就可以理解为,百分之n了。

    比如 pure-u-1-3 就是 30% 啦!

    用过bootstrap的朋友,这就好理解了。在bootstrap是12删格的概念 ,其实就是一个大的div,然后几个格子 。 yahoo的 pure 也是这样的思想的~


    <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> 
    <div class="pure-g-r"> 
        <div class="pure-u-1-3"> ... </div> 
        <div class="pure-u-1-3"> ... </div> 
        <div class="pure-u-1-3"> ... </div> 
    </div>

    关于按钮的样子:

     

    <div> 
        <style scoped> 
            .pure-button-success, 
            .pure-button-error, 
            .pure-button-warning, 
            .pure-button-secondary { 
                color: white; 
                border-radius: 4px; 
                text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 
            } 
            .pure-button-success { 
                 rgb(28,  184, 65); /* 这是绿色 */
            } 
            .pure-button-error { 
                 rgb(202,  60, 60); /* 这是褐红色 */
            } 
            .pure-button-warning { 
                 rgb(223,  117, 20); /* 这是橙色 */
            } 
            .pure-button-secondary { 
                 rgb(66,  184, 221); /* 这是浅蓝色 */
            } 
        </style> 
        <button class="pure-button pure-button-success">成功按钮</button> 
        <button class="pure-button pure-button-error">错误按钮</button> 
        <button class="pure-button pure-button-warning">警告按钮</button> 
        <button class="pure-button pure-button-secondary">次要按钮</button> 
    </div>

    170935648.png

    大小的样式,pure已经配置好了大小的样式,怎么配置class就行了,不用自己比划大小:

    171121659.png

     

     

    171317187.png


    <table class="pure-table pure-table-horizontal"> 
        <thead> 
            <tr> 
                <th>#</th> 
                <th>Make</th> 
                <th>Model</th> 
                <th>Year</th> 
            </tr> 
        </thead> 
        <tbody> 
            <tr> 
                <td>1</td> 
                <td>xiaoru.cc</td> 
                <td>Accord</td> 
                <td>2009</td> 
            </tr> 
            <tr> 
                <td>2</td> 
                <td>ruifengyun.cc</td> 
                <td>Camry</td> 
                <td>2012</td> 
            </tr> 
            <tr> 
                <td>3</td> 
                <td>rfyiamcool 51cto</td> 
                <td>Elantra</td> 
                <td>2010</td> 
            </tr> 
        </tbody> 
    </table>

    pure表单的使用,和bootstrap的用法一样,就是换个class的名字 !
     

    <form class="pure-form"> 
        <fieldset> 
            <legend>行内表单</legend> 
            <input type="email" placeholder="邮箱"> 
            <input type="password" placeholder="密码"> 
            <label for="remember"> 
                <input id="remember" type="checkbox"> 记录我 
            </label> 
            <button type="submit" class="pure-button pure-button-primary">登录</button> 
        </fieldset> 
    </form>

    171427405.png

     

    菜单的应用


    <div id="demo-horizontal-menu"> 
        <ul id="std-menu-items"> 
            <li class="pure-menu-selected"><a href="#">Flickr</a></li> 
            <li><a href="#">Messenger</a></li> 
            <li><a href="#">Sports</a></li> 
            <li><a href="#">Finance</a></li> 
            <li> 
                <a href="#">其他</a> 
                <ul> 
                    <li class="pure-menu-heading">More from Yahoo!</li> 
                    <li class="pure-menu-separator"></li> 
                    <li><a href="#">Autos</a></li> 
                    <li><a href="#">Flickr</a></li> 
                    <li><a href="#">Answers</a></li> 
                    <li> 
                        <a href="#">更多</a> 
                        <ul> 
                            <li><a href="#">Horoscopes</a></li> 
                            <li><a href="#">Games</a></li> 
                            <li><a href="#">Jobs</a></li> 
                            <li><a href="#">OMG</a></li> 
                        </ul> 
                    </li> 
                </ul> 
            </li> 
        </ul> 
    </div> 
    <script> 
    YUI({ 
        classNamePrefix: 'pure'
    }).use('gallery-sm-menu', function (Y) { 
        var horizontalMenu = new Y.Menu({ 
            container         : '#demo-horizontal-menu', 
            sourceNode        : '#std-menu-items', 
            orientation       : 'horizontal', 
            hideOnOutsideClick: false, 
            hideOnClick       : false
        }); 
        horizontalMenu.render(); 
        horizontalMenu.show(); 
    }); 
    </script>

    171522512.png

     

    看看官方给出的几个demo !!!

     

    [我们可以用开发着工具,把里面好看的,大气的都给copy下来。。。]

    里面有很多的例子:

    http://purecss.io/layouts/

     

    大气 NO 1

    171623213.png

    大气 NO 2

    175639320.png

    总结: 刚一看到给人很舒服的感觉,很时髦的扁平效果。说实话,我早已经厌烦了bootstrap, 我现在都用的metro效果的前端。 不管怎么说,还是推荐用用这个,理由够简单和轻型 ~


热门搜索: Yahoo   CSS框架   Pure   web开发  
  • 相关推荐
    • 点击排行