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的用法就暫時介紹到這裡了。

軟體首頁 軟體文件 軟體下載