min.css----全世界最快的CSS框架

 

有一個CSS框架，叫 min.css，它號稱是全世界最快的。

難怪，它的代碼就 這一點。

你看它的 頁面例子，像 Bootstrap，但比后者輕多了，它只是一些CSS樣式，沒有JavaScript代碼。

min.css的組件有： 基本代碼(必須)、標題、按鈕、表單、導航欄、表格、圖標、網格、消息框。

對，這就是min.css的全部。

1. 基本代碼

body,textarea,input,select {
    background: 0;
    border-radius: 0;
    font: 16px sans-serif;
    margin: 0
}

.addon,.btn-sm,.nav,textarea,input,select {
    outline: 0;
    font-size: 14px
}

.smooth {
    transition: all .2s
}

.btn,.nav a {
    text-decoration: none
} .container { margin: 0 20px; width: auto } @media(min-width:1310px) { .container { margin: auto; width: 1270px } }

.btn,h2 {
    font-size: 2em
}

這就是全部的基本代碼。看起來有點多，它的核心代碼是下面這段：

.container {
    margin: 0 20px;
    width: auto
}

@media(min-width:1310px) {
    .container {
        margin: auto;
        width: 1270px
    }
}

關鍵詞：.container @media

.container： 當設計一張頁面的時候，首先要做的就是把內容居中顯示。這就是類名container的作用。

@media：一張頁面可能會在不同設備(手機、電腦、平板等)上瀏覽，有時我們要求一張頁面在不同設備上顯示時，有不同的樣式規則，這就是@media的作用，這種操作還有一個特別高級的概念----媒體查詢。

代碼顯示，框架把屏幕分兩種情況處理：小於1310px和不小於1310px的情況(也就是@media應用的規則)。

我筆記本尺寸是1280×800的，瀏覽器使用Firefox Developer Edition(50.0a2)。

小於1310px(默認)：左右外邊距各20px，寬度自動(會繼承父級的寬度)。

 

（圖片說明：左右外邊距各20px，上下外邊距為0）

不小於1310px：左右居中(上下不會居中)，寬度保持在1270px。

其它代碼規則(字體、背景重設等)會牽扯之后要講解的組件，到時再說。

2. 標題

 

h1 {
    font-size: 3em
}

 

標題的規則min.css沒有過分渲染。在整個框架中，除了基本代碼對h2的字體大小設置為2em外，就是這里對h1設置字體大小為2em了。

// 基本代碼片段
.btn,h2 { font-size: 2em }

 

也就是說，整個框架的標題組件部分僅僅涉及了h1和h2。

 

3. 按鈕

 

.btn {
    background: #999;
    border-radius: 6px;
    border: 0;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin: 2px 0;
    padding: 12px 30px 14px
}

.btn:hover {
    background: #888
}

.btn:active,.btn:focus {
    background: #777
}

.btn-a {
    background: #0ae
}

.btn-a:hover {
    background: #09d
}

.btn-a:active,.btn-a:focus {
    background: #08b
}

.btn-b {
    background: #3c5
}

.btn-b:hover {
    background: #2b4
}

.btn-b:active,.btn-b:focus {
    background: #2a4
}

.btn-c {
    background: #d33
}

.btn-c:hover {
    background: #c22
}

.btn-c:active,.btn-c:focus {
    background: #b22
}

.btn-sm {
    border-radius: 4px;
    padding: 10px 14px 11px
}

看起來又挺多的是吧，但其實核心偽代碼就下面這點。

// 說明：typeName的值取a、b和c三者中的一個
.btnClassName {...}
.btnClassName[-btnTypeName]:hover {...}
.btnClassName[-btnTypeName]:active, .btnClassName[-btnTypeName]:focus {...}

min.css框架里的按鈕有四種：默認、a、b和c（這種非語義化命名方式並不好，不過這不是本篇文章討論的主題），它們的區別僅僅是背景顏色不同。

下面我們對上面的三段偽代碼一一說明。

1. 第一段代碼：是具體按鈕類型（默認、a、b或者c）通用的樣式代碼或者是按鈕初始背景顏色值。
2. 第二段代碼：當鼠標停留在（也就是hover狀態）按鈕上時，按鈕背景顏色是什么樣的。
3. 第三段代碼：當按鈕處在激活和獲得焦點（active和focus狀態）時，按鈕背景顏色是什么樣的。

在 基本代碼里，有三段涉及到按鈕組件的代碼。

/* 基本代碼代碼段中涉及按鈕組件的部分 */

.addon,.btn-sm,.nav,textarea,input,select { outline: 0; font-size: 14px } .btn,.nav a { text-decoration: none } .btn,h2 { font-size: 2em }

讓之所以用text-decoration，是因為當btn這個類應用在a標簽上時，鏈接的默認下划線就不會顯示了；按鈕里的文字大小是2em。

 

細心如你的人，肯定會發現上面代碼說明中，我忽略了對btn-sm這個類名的介紹。

應用btn-sm的按鈕比沒應用的按鈕要小，像下面這樣↓

 

那是因為它的樣式代碼是這樣描述的↓

/* 基本代碼 */
.btn-sm {
    outline: 0;
    font-size: 14px
}

/* 按鈕組件 */

.btn-sm {
    border-radius: 4px;
    padding: 10px 14px 11px
}

 

可以看到，最關鍵的是它設置了font-size:14px這個屬性，這肯定比2em小很多了。然后圓角設置為4像素，內邊距也相應分別減少了幾像素。

 

4. 表單

 

label>* {
    display: inline
}

form>* {
    display: block;
    margin-bottom: 10px
}

textarea,input,select {
    border: 1px solid #ccc;
    padding: 8px
}

textarea:focus,input:focus,select:focus {
    border-color: #5ab
}

textarea,input[type=text] {
    -webkit-appearance: none;
    width: 13em;
    outline: 0
}

.addon {
    box-shadow: 0 0 0 1px #ccc;
    padding: 8px 12px
}

5. 導航欄

 

.nav,.nav .current,.nav a:hover {
    background: #000;
    color: #fff
}

.nav {
    height: 24px;
    padding: 11px 0 15px
}

.nav a {
    color: #aaa;
    padding-right: 1em;
    position: relative;
    top: -1px
}

.nav .pagename {
    font-size: 22px;
    top: 1px
}

.btn.btn-close {
    background: #000;
    float: right;
    font-size: 25px;
    margin: -54px 7px;
    display: none
}

@media(max-width:500px) {
    .btn.btn-close {
        display: block
    }

    .nav {
        overflow: hidden
    }

    .pagename {
        margin-top: -11px
    }

    .nav:active,.nav:focus {
        height: auto
    }

    .nav div:before {
        background: #000;
        border-bottom: 10px double;
        border-top: 3px solid;
        content: '';
        float: right;
        height: 4px;
        position: relative;
        right: 3px;
        top: 14px;
        width: 20px
    }

    .nav a {
        display: block;
        padding: .5em 0;
        width: 50%
    }
}

 

導航欄HTML代碼是這樣寫的：

 

<nav class="nav" tabindex="-1" onclick="this.focus()">
    <div class="container">
        <a class="pagename current" href="#">Your Site Name</a>
        <a href="#">One</a>
        <a href="#">Two</a> 
        <a href="#">Three</a>
    </div>
</nav>
<button class="btn-close btn btn-sm">×</button>

6. 表格

 

.table th,.table td {
    padding: .5em;
    text-align: left
}

.table tbody>:nth-child(2n-1) {
    background: #ddd
}

7. 圖標

 

.ico {
    font: 33px Arial Unicode MS,Lucida Sans Unicode
}

8. 網格

 

.row {
    margin: 1% 0;
    overflow: auto
}

.col {
    float: left
}

.table,.c12 {
    width: 100%
}

.c11 {
    width: 91.66%
}

.c10 {
    width: 83.33%
}

.c9 {
    width: 75%
}

.c8 {
    width: 66.66%
}

.c7 {
    width: 58.33%
}

.c6 {
    width: 50%
}

.c5 {
    width: 41.66%
}

.c4 {
    width: 33.33%
}

.c3 {
    width: 25%
}

.c2 {
    width: 16.66%
}

.c1 {
    width: 8.33%
}

@media(max-width:870px) {
    .row .col {
        width: 100%
    }
}

9. 消息框

 

.msg {
    background: #def;
    border-left: 5px solid #59d;
    padding: 1.5em
}

 

消息框是個獨立的單元。它有三條規則：背景色(#def)、左邊框(5px solid #59d)、內邊距(1.5em)。

（圖片說明：消息框的樣子）

 

（完）