Pure : 一款来自雅虎的纯 CSS 框架

美国雅虎公司出品的一组轻量级、响应式纯css模块，适用于任何Web项目。

Pure也是一款很出色的CSS框架，之前分享的Bootstrap是由Twitter出品的，而Pure是来自雅虎的。尽管从UI界面效果上来说，Pure没有Bootstrap那样精美，但Pure是纯CSS实现的，因此非常小巧，整个框架压缩后只有5.7k左右。

Pure的特点

• 最大的特点就是框架基于纯CSS，无任何JavaScript代码，渲染速度比较快。
• 由Yahoo出品，技术上应该不存在太大问题。
• 框架十分小巧，压缩后仅5.7k。
• 组件也很丰富，包括表格、表单、按钮、表、导航等。
• CSS类的标识十分简单，因此在使用Pure的过程中代码会比较友好。

Pure组件的相关示例及使用方法

1、首先在页面上引用Pure的CSS库：

<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-UQiGfs9ICog+LwheBSRCt1o5cbyKIHbwjWscjemyBMT9YCUMZffs6UqUTd0hObXD" crossorigin="anonymous">

在head之间加上以下meta标签，用来控制页面在移动设备上的宽度和高度：

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

代码案例：

1、单行表单

<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>

2、对齐式表单

<form class="pure-form pure-form-aligned">
    <fieldset>
        <div class="pure-control-group">
            <label for="name">Username</label>
            <input id="name" type="text" placeholder="Username">
        </div>

        <div class="pure-control-group">
            <label for="password">Password</label>
            <input id="password" type="password" placeholder="Password">
        </div>

        <div class="pure-control-group">
            <label for="email">Email Address</label>
            <input id="email" type="email" placeholder="Email Address">
        </div>

        <div class="pure-control-group">
            <label for="foo">Supercalifragilistic Label</label>
            <input id="foo" type="text" placeholder="Enter something here...">
        </div>

        <div class="pure-controls">
            <label for="cb" class="pure-checkbox">
                <input id="cb" type="checkbox"> I've read the terms and conditions
            </label>

            <button type="submit" class="pure-button pure-button-primary">Submit</button>
        </div>
    </fieldset>
</form>

3、自定义颜色的按钮

<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官方网站：https://purecss.io/

Pure中文网站：https://purecss.cn/