天天看點
傳回

Skeleton.css源碼解讀，一個隻有419行代碼的CSS庫

作者：德育處主任pro

本文介紹

Skeleton 源碼一共隻有 419 行（加上注釋和換行），非常适合用來學習。

本文是根據我的學習過程來編寫的，幾乎每個章節都包含 使用方法 和 源碼分析。

雖然現在大部分業務都不需要重複造輪子了，但對于小白來說，學習完 Skeleton 源碼 是能走出新手村的。

本文不是推薦大家使用 Skeleton.css ，因為現代工程其實已經用不上這個庫了。本文的重點在 響應式布局源碼的解讀。

本文适合人群：

  • 有 css 基礎的（了解浮動、顔色、背景色等）；
  • 有一定工作經驗，但又沒了解過 css 庫是如何生成的；

Skeleton 介紹

如果您正在着手一個較小的項目，或者覺得不太需要用到大型架構，那麼可以嘗試使用 Skeleton。

Skeleton僅對少數标準 HTML 元素設定了樣式，并提供了一個網格系統。

『Skeleton.css 官網』

『github 位址』

也可以直接滑到文末擷取 Skeleton 源碼。

讀css方面的源碼，為什麼要選 Skeleton ？

  • Bootstrap：太長，不看！
  • Layui：太長，不看！
  • Element ui：和架構綁定的，不适合小白看~
  • Animate.css：動畫庫，下次再看。
  • ……
  • Skeleton：短！

功能目錄

  • 網格 - Grid
  • 基礎樣式 Base Styles
  • 排版 Typography
  • 連結 Links
  • 按鈕 Buttons
  • 表單 Forms
  • 連結 Lists
  • 代碼 Code
  • 表格 Tables
  • 間隔 Spacing
  • 工具集 Utilities
  • 清除浮動 Clearing
  • 媒體查詢 Media Queries

出發！！！

本文所有例子都使用 CDN 的方式引入 skeleton.css ，預設已經引入了，是以在案例中不會再出現引入的代碼。

<link href="https://cdn.bootcdn.net/ajax/libs/skeleton/2.0.4/skeleton.css" rel="stylesheet">

網格系統 Grid

Skeleton 提供了 12列 的網格布局模式，和現代UI庫的24列相比，12列的确有點少了。但這并不影響我們學習。

Skeleton 支援 指定值布局 和 比例布局，這兩個名字是我自己起的，官方沒這樣說。

其實這兩種布局方式都是大同小異的，隻不過語義上有點不同而已。

使用方法

指定值布局

通過使用 1~12 的單詞配合 .columns 類名 進行布局。

.one、.two、.three、.four、.five、.six、.seven、.eight、.nine、.ten、.eleven、.twelve

Skeleton.css 提供了12列的響應式網格布局，随着浏覽器/裝置尺寸的減小而縮小。

當浏覽器視窗小于 550px 時，所有列都會占滿整行。

Skeleton.css源碼解讀，一個隻有419行代碼的CSS庫
<div class="container">
  <div class="row">
    <div class="one column">One</div>
    <div class="eleven columns">Eleven</div>
  </div>

  <div class="row">
    <div class="two columns">Two</div>
    <div class="ten columns">Ten</div>
  </div>

  <div class="row">
    <div class="three columns">Three</div>
    <div class="nine columns">Nine</div>
  </div>

  <div class="row">
    <div class="four columns">Fout</div>
    <div class="eight columns">Eight</div>
  </div>

  <div class="row">
    <div class="five columns">Five</div>
    <div class="seven columns">Seven</div>
  </div>

  <div class="row">
    <div class="six columns">Six</div>
    <div class="six columns">Six</div>
  </div>

  <div class="row">
    <div class="twelve columns">Twelve</div>
  </div>
</div>


<style>
  .row .column,
  .row .columns {
    margin-bottom: 10px;
    background: #eee;
  }
</style>

本例使用了 .container 作為容器，限制了最大寬度是 980px ，并且水準居中。

因為布局容器是不提供背景和外邊距等樣式，是以本例寫了一個背景色給 .columns 以便觀察。

.row 這個其實不需要加的，本例添加這個類隻是希望代碼看起來能更加易讀。

比例布局

提供了3個類名，需要配合 .column 使用。

  • .one-third：三分之一
  • .two-thirds：三分之二
  • .one-half：一半
Skeleton.css源碼解讀，一個隻有419行代碼的CSS庫
<div class="container">
  <div class="row">
    <div class="one-third column">1/3</div>
    <div class="two-thirds column">2/3</div>
  </div>

  <div class="row">
    <div class="one-half column">1/2</div>
    <div class="one-half column">1/2</div>
  </div>
</div>

<style>
  .row .column,
  .row .columns {
    margin-bottom: 10px;
    background: #eee;
  }
</style>
複制代碼

列偏移

Skeleton.css源碼解讀，一個隻有419行代碼的CSS庫
<div class="container">
  <div class="row">
    <div class="offset-by-eleven one columns">One</div>
  </div>

  <div class="row">
    <div class="offset-by-ten two columns">Two</div>
  </div>

  <div class="row">
    <div class="offset-by-nine three columns">Three</div>
  </div>

  <div class="row">
    <div class="offset-by-eight four columns">Fout</div>
  </div>

  <div class="row">
    <div class="offset-by-seven five columns">Five</div>
  </div>

  <div class="row">
    <div class="offset-by-six six columns">Six</div>
  </div>
  <div class="row">
    <div class="offset-by-five seven columns">Seven</div>
  </div>

  <div class="row">
    <div class="offset-by-four eight columns">Eight</div>
  </div>

  <div class="row">
    <div class="offset-by-three nine columns">Nine</div>
  </div>

  <div class="row">
    <div class="offset-by-two ten columns">Ten</div>
  </div>

  <div class="row">
    <div class="offset-by-one eleven columns">Eleven</div>
  </div>

  <div class="row">
    <div class="offset-by-two-thirds one-third column">1/3</div>
  </div>

  <div class="row">
    <div class="offset-by-one-third two-thirds column">2/3</div>
  </div>

  <div class="row">
    <div class="offset-by-one-half one-half column">1/2</div>
  </div>
</div>

<style>
  .container {
    border: 1px solid #ccc;
  }
  .row .column,
  .row .columns {
    margin-bottom: 10px;
    background: #eee;
  }
</style>

源碼分析

布局其實分了幾個部分：

  1. 容器部分
  2. 列（确定值）
  3. 列（百分比）
  4. 列間距
  5. 列偏移

容器部分 

.container {
  position: relative;  /* 相對定位 */
  width: 100%;  /* 容器寬度100% */
  max-width: 960px;  /* 但最大寬度不超過980px */
  margin: 0 auto;  /* 水準居中 */
  padding: 0 20px;  /* 容器左右内邊距20px */
  box-sizing: border-box; /* 設定容器盒模型，設定了容器的邊框、内邊距都不會超過容器寬度 */
}

/* 當容器不小于400px時 */
@media (min-width: 400px) {
  .container {
    width: 85%;  /* 寬度為85% */
    padding: 0;  /* 内邊距為0 */
  }
}

/* 當容器不小于550px時 */
@media (min-width: 550px) {
  .container {
    width: 80%;  /* 寬度80，同時padding受到 @media (min-width: 400px) 裡設定的影響 */
  }
}

.container:after {
  content: "";
  display: table;
  clear: both;  /* 清除浮動 */
}

容器使用了 container 這個類名，可以看出 skeleton 是先寫了小屏的解決方案，然後再寫大屏的。

  • 預設情況下（文檔寬度小于 400px），container 容器的寬度是 100%，最大寬度是 980px ，通過 margin: 0 auto; 實作了水準居中效果。
  • 當文檔寬度大于等于 400px 時，容器寬度變成 85%，但也會被最大寬度（980px）限制，同時内邊距設為 0。
  • 當文檔寬度大于等于 550px 時，容器寬度變成 80%，會覆寫 @media (min-width: 400px) 裡設定的寬度，但會受到 @media (min-width: 400px) 裡設定的 padding 影響。
  • 最後設定了一個僞元素 :after 清除浮動（clear: both;）。

列布局（響應式的開始）

Skeleton.css 使用 浮動 + 百分比 的方式實作響應式。

列（确定值 ）、**列（百分比）**和 列間距 這三個要放在一起講。

skeleton 一共有12列布局，是以配置了基本的：one、two、three、four、five、six、seven、eight、nine、ten、eleven、twelve。

都是基礎的數字英文，我就不翻譯了。

這裡要分2種情況來讨論，

  1. 能整除12的（one、two、three、four、six、twelve）
  2. 不能整除12的（five、seven、eight、nine、then、eleven）

接下來會分開讨論這兩種情況。

.column,
.columns {
  width: 100%;  /* 所有列的寬度都是100%。 */
  float: left;  /* 左浮動 */
  box-sizing: border-box;  /* 設定容器盒模型，設定了容器的邊框、内邊距都不會超過容器寬度 */
}

@media (min-width: 550px) {
  .column,
  .columns {
    margin-left: 4%;  /* 左邊距4% */
   }
  .column:first-child,
  .columns:first-child {
    margin-left: 0;  /* 第一個元素不需要左邊距，是以設為0 */
   }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }  /* 隻有一列，不需要左邊距了 */

  /* 1/3，對應 .four */
  .one-third.column               { width: 30.6666666667%; }
  
  /* 2/3，對應 .eight */
  .two-thirds.column              { width: 65.3333333333%; }

  /* 1/2，對應 .six */
  .one-half.column                { width: 48%; }
}
  • 預設情況下（文檔寬度小于 550px）所有列的寬度都是 100%。
  • 除了第一列，後面跟着的列都有一個 4%的左邊距 。

能整除12的

.one、.two、.three、.four、.six、.twelve

布局方式如下圖所示（本文隻詳細講 .one 和 .two 兩種列，其他的原理都是一樣的，自己推算就行了）

Skeleton.css源碼解讀，一個隻有419行代碼的CSS庫

從上圖可以看出，都使用 .one 的話，一共有 12列 、11個間隔 ，一行的寬度是 100% ，每個間隔的占比是 4% ，11個間隔一共就花掉了 44% ，剩下 56% 給12列平均分。

是以 .one 的寬度就是 56 ÷ 12 ≈ 4.66666666667 ，機關是 %

Skeleton.css源碼解讀，一個隻有419行代碼的CSS庫

都用.two 的話，從上圖可以看出一共有 6列 、5個間隔 ，每個間隔的寬度是 4%，5個間隔合計占用 20% 的寬度，剩下 80% 的寬度給6列平均分。

**是以 .two 的寬度就是 80 ÷ 6 ≈ 13.3333333333 ，機關是 % **

剩下的我就直接寫公式了，不懂的可以在評論區讨論~

公式：(100% - 間隔數量 × 4%) ÷ 列的數量
  • .one：(100% － 4% × 11) ÷ 12 ≈ 4.66666666667%
  • .two：(100% － 4% × 5) ÷ 6 ≈ 13.3333333333%
  • .three：(100% － 4% × 3) ÷ 4 = 22%
  • .four：(100% - 4% × 2 ) ÷ 3 ≈ 30.6666666667%
  • .six：(100% － 4% × 1) ÷ 2 = 48%
  • .twelve：就是100%咯，而且不需要左邊距

不能整除12的

.five、.seven、.eight、.nine、.then、.eleven

首先看 .five ，代表 5，12 - 5 = 7，但現在 .five 和 .seven 的值是多少我們都不知道，雖然可以按 5:7 再加一個 間隔（4%） 來計算，但我更願意使用已知的值來推算。

.two + .five + .five 三列加起來剛好是 12 ，而 .two 的值我們是知道的，由此可以得到一個代數式：

13.3333333333% + 間隔 + .five + 間隔 + .five = 100%

間隔 的占比是 4% 是以得到下面的代數式

13.3333333333% + 4% + .five + 4% + .five = 100%

21.3333333333% + 2(.five) = 100%

2(.five) = 78.6666666667%

.five ≈ 39.3333333333%

根據上面的國小生推導法，得知一個 .five 是 39.3333333333%

.seven

剛剛有講到，5 + 7 = 12，那現在 5 出來了，7 也就通過加減法能算出來

.five + 間隔 + .seven = 100%

39.3333333333% + 4% + .seven = 100%

.seven = 100% - 39.3333333333% - 4%

.seven = 56.6666666667%

綜上所述，.seven 的寬度是 56.6666666667%

這是我的推導方式，最後的值也和 skeleton 的值一樣。.eight、.nine、.then、.eleven 的推導方式其實也和上面一樣，這裡我就不再啰嗦了。有疑問的可以在評論區交流。

最後得出

  • .five：39.3333333333%
  • .seven：56.6666666667%
  • .eight：65.3333333333%
  • .nine：74.0%
  • .ten：82.6666666667%
  • .eleven：91.3333333333%

比例

  • .one-third：三分之一。對應 .four
  • .two-thirds：三分之二。對應 .eight
  • .one-half：一半。對應.six

列偏移

列偏移的類名都是 .offset-by- 開頭的，後面再加上對應的數字或者比例的單詞。

@media (min-width: 550px) {
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }
}

如果用 .offset-by-one ，那我們就需要假設後面的内容補充完是 12。

1 + 11 = 12，我們通過上面的計算得知 .eleven 的寬度是 91.3333333333%，是以 .offset-by-one 的占比是：

.offset-by-one = 100% - .eleven

.offset-by-one = 8.66666666667%

其他的 .offset-by-two 、.offset-by-three 那些也可以用同樣的方法去計算。最後再和 skeleton 的值對比一下就行了。

基礎樣式 Base Styles

這部分主要定義了全局字型和行距的樣式，作用在 html 和 body 标簽上。

使用方法

Skeleton.css源碼解讀，一個隻有419行代碼的CSS庫
<div>雷猴</div>

源碼分析

看看這部分的源碼：

html {
  font-size: 62.5%;  /* 16px × 62.5% = 10px */
}

body {
  font-size: 1.5em;  /* 10px × 1.5 = 15px */
  line-height: 1.6;  /* 15px * 1.6 = 24px */
  font-weight: 400;  /* 字型粗細 */
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;  /* 字型 */
  color: #222;  /* 文本顔色 */
}
複制代碼

浏覽器的預設字号是 16px ，在 html 設定字号是 62.5%，那就是變成 10px 了。

在 body 設定 font-size: 1.5em; ，那麼之後的内容預設都會繼承 body 的，也就是普通的文本是 15px。

最後再設定 行高 、字型粗細 、字型 、文本顔色 。

排版 Typography

不需要使用特别的類名，這部分作用在 h1 ~ h6 标簽中。使用了 rem 的方式設定字型大小，會受到 <html> 标簽字型大小影響。

使用方法

Skeleton.css源碼解讀，一個隻有419行代碼的CSS庫
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>

<p>The base type is 15px over 1.6 line height (24px)</p>

源碼分析 

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }

這段源碼其實沒什麼好解釋的了，主要設定了 h1 ~ h6 的 外邊距、字号、文字粗細、行高、字距，并且用 媒體查詢 來重新定義不同尺寸的浏覽器寬度顯示出來的标題 字号 不同。

最後定義了段落 p 的上邊距，這裡的 p 的字号預設繼承 body 裡的設定，也就是 15px。

連結 Links

使用方法

Skeleton.css源碼解讀，一個隻有419行代碼的CSS庫
<a>Colored</a>

源碼分析 

a {
  color: #1EAEDB; }
a:hover {
  color: #0FA0CE; }

這裡隻定義了 a 的字型顔色，還有滑鼠經過時的顔色。字号預設繼承 body ，也就是 15px。

Skeleton.css源碼解讀，一個隻有419行代碼的CSS庫
Skeleton.css源碼解讀，一個隻有419行代碼的CSS庫

按鈕 Buttons

使用方法

Skeleton.css源碼解讀，一個隻有419行代碼的CSS庫
<!-- 預設 -->
<a class="button" href="#">Anchor button</a>
<button>Button element</button>
<input type="submit" value="submit input">
<input type="button" value="button input">

<!-- primary類型 -->
<a class="button button-primary" href="#">Anchor button</a>
<button class="button-primary">Button element</button>
<input class="button-primary" type="submit" value="submit input">
<input class="button-primary" type="button" value="button input">

源碼分析 

/* 預設樣式 */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;  /* 行内塊 */
  height: 38px;  /* 高度 */
  padding: 0 30px;  /* 内邊距：上下0，左右30px */
  color: #555;  /* 字型顔色：灰色(有點深) */
  text-align: center;  /* 本文居中 */
  font-size: 11px;  /* 字号 */
  font-weight: 600;  /* 字型稍微加粗 */
  line-height: 38px;  /* 行高（和height一樣，是以是垂直居中了） */
  letter-spacing: .1rem;  /* 字距 */
  text-transform: uppercase;  /* 字母變成全大寫 */
  text-decoration: none;  /* 不需要文本修飾 */
  white-space: nowrap;  /* 不換行 */
  background-color: transparent;  /* 背景色：透明 */
  border-radius: 4px;  /* 圓角：4px */
  border: 1px solid #bbb;  /* 邊框：1px，實線，淺灰 */
  cursor: pointer;  /* 滑鼠指針樣式 */
  box-sizing: border-box;  /* 盒模型規則 */
}

/* 滑鼠經過、獲得焦點 */
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;  /* 文字顔色比預設深一點點 */
  border-color: #888;  /* 邊框顔色比預設深一點點 */
  outline: 0;  /* 輪廓：0 */
}

/* primary類型 */
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;  /* 字變白 */
  background-color: #33C3F0;  /* 背景色變藍 */
  border-color: #33C3F0;  /* 邊框顔色變藍 */
}

/* 使用primary類型時：滑鼠經過、獲得焦點 */
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;  /* 文本白色 */
  background-color: #1EAEDB;  /* 背景色變深一點點 */
  border-color: #1EAEDB;  /* 邊框顔色變深一點點 */
}

按鈕的實作方式有很多種，比如 <button> 、<input type="submit" /> 等等，這裡就不一一列舉額了，skeleton 把這類情況都寫好了，可以直接在源碼中看到。

skeleton 提供了2中樣式的按鈕，一個是預設的（白底黑字），一個是 primary 的（藍底白字）。

還有一些選中狀态。

skeleton 的做法是先寫好預設的，其他狀态都在預設狀态的基礎上覆寫新的樣式。

表單 Forms

使用方法

Skeleton.css源碼解讀，一個隻有419行代碼的CSS庫
<form>
  <div class="row">
    <div class="six columns">
      <label for="exampleEmailInput">Your email</label>
      <input class="u-full-width" type="email" placeholder="[email protected]" id="exampleEmailInput">
    </div>
    <div class="six columns">
      <label for="exampleRecipientInput">Reason for contacting</label>
      <select class="u-full-width" id="exampleRecipientInput">
        <option value="Option 1">Questions</option>
        <option value="Option 2">Admiration</option>
        <option value="Option 3">Can I get your number?</option>
      </select>
    </div>
  </div>
  <label for="exampleMessage">Message</label>
  <textarea class="u-full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>
  <label class="example-send-yourself-copy">
    <input type="checkbox">
    <span class="label-body">Send a copy to yourself</span>
  </label>
  <input class="button-primary" type="submit" value="Submit">
</form>

源碼分析 

/* 單行文本框、多行文本框、下來選擇器 */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;  /* 高度 */
  padding: 6px 10px;  /* 内邊距：上下6px，左右10px */
  background-color: #fff;  /* 背景色：白色 */
  border: 1px solid #D1D1D1;  /* 邊框：1px，實線，灰色 */
  border-radius: 4px;  /* 圓角：4px */
  box-shadow: none;  /* 投影：無 */
  box-sizing: border-box;  /* 盒模型 */
}

/* 針對單行和多行文本框的樣式設定 */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;  /* 外表 */
}

/* 多行文本框 */
textarea {
  min-height: 65px;  /* 最小高度是65px，會覆寫上面設定的height */
  padding-top: 6px;  /* 上内邊距 */
  padding-bottom: 6px;  /* 下内邊距 */
}

/* 單行文本框、多行文本框、下來選擇器 擷取焦點時 */
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;  /* 邊框：1px，實線，藍色 */
  outline: 0;  /* 輪廓：0 */
}

/* label(标簽)
   legend(組合表單中的相關元素，legend 元素為 fieldset 元素定義标題) */
label,
legend {
  display: block;  /* 塊狀 */
  margin-bottom: .5rem;  /* 下外邊距 */
  font-weight: 600;  /* 字型有點粗 */
}

/* fieldset(可将表單内的相關元素分組) */
fieldset {
  padding: 0;  /* 内邊距 */
  border-width: 0;  /* 邊框寬度 */
}

/* 多選和單選 */
input[type="checkbox"],
input[type="radio"] {
  display: inline;  /* 行内 */
}

/* label标簽下的 .label-body，可看使用例子 */
label > .label-body {
  display: inline-block;  /* 行内 */
  margin-left: .5rem;  /* 左外邊距：5px */
  font-weight: normal;  /* 字型粗細 */
}

清單 Lists

使用方法

Skeleton.css源碼解讀，一個隻有419行代碼的CSS庫
<ul>
  <li>Item 1</li>
  <li>
    Item 2
    <ul>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

<ol>
  <li>Item 1</li>
  <li>
    Item 2
    <ol>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ol>
  </li>
  <li>Item 3</li>
</ol>

源碼分析 

/* 無序清單 */
ul {
  list-style: circle inside;  /* 标記樣式：圓，内側 */
}

/* 有序清單 */
ol {
  list-style: decimal inside;  /* 标記樣式：十進制，内側 */
}

ol, ul {
  padding-left: 0;  /* 左側内邊距：0 */
  margin-top: 0;  /* 左側外邊距：0 */
}

/* 嵌套清單 */
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;  /* 外邊距 */
  font-size: 90%;  /* 字号 */
}

/* 清單項 */
li {
  margin-bottom: 1rem;  /* 下外邊距 */
}

代碼 Code

使用方法

Skeleton.css源碼解讀，一個隻有419行代碼的CSS庫
<pre>
<code>.some-class {
  background-color: red;
}</code>
</pre>

源碼分析 

code {
  padding: .2rem .5rem;  /* 内邊距 */
  margin: 0 .2rem;  /* 外邊距 */
  font-size: 90%;  /* 字号 */
  white-space: nowrap;  /* 不換行 */
  background: #F1F1F1;  /* 背景色：超級淺的灰色 */
  border: 1px solid #E1E1E1;  /* 邊框：1px，實線，灰色 */
  border-radius: 4px;  /* 圓角：4px */
}

pre > code {
  display: block;  /* 塊狀 */
  padding: 1rem 1.5rem;  /* 内邊距 */
  white-space: pre;  /* 空白會被浏覽器保留。 */
}

code 和 pre 是 HTML 原生标簽。

表格 Tables

使用方法

Skeleton.css源碼解讀，一個隻有419行代碼的CSS庫
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Sex</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dave Gamache</td>
      <td>26</td>
      <td>Male</td>
      <td>San Francisco</td>
    </tr>
    <tr>
      <td>Dwayne Johnson</td>
      <td>42</td>
      <td>Male</td>
      <td>Hayward</td>
    </tr>
  </tbody>
</table>

源碼分析 

/* 表頭的列 和 普通列 */
th,
td {
  padding: 12px 15px;  /* 内邊距 */
  text-align: left;  /* 文本左對齊 */
  border-bottom: 1px solid #E1E1E1;  /* 底邊框 */
}

/* 第一個表頭的列 和 每行第一個普通列 */
th:first-child,
td:first-child {
  padding-left: 0;  /* 左内邊距 */
}

/* 最後一個表頭的列 和 每行最後一個普通列 */
th:last-child,
td:last-child {
  padding-right: 0;  /* 右内邊距 */
}

沒想到表格的 css 樣式這麼簡單吧哈哈哈哈~

間隔 Spacing

源碼分析 

button,
.button {
  margin-bottom: 1rem;
}

input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem;
}

pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem;
}

這部分主要定義常用的标簽和類的底部外邊距，太簡單，不一一細講了。

工具集 Utilities

源碼分析 

.u-full-width {
  width: 100%;
  box-sizing: border-box;
}

.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box;
}

.u-pull-right {
  float: right;
}

.u-pull-left {
  float: left;
}

這部分源碼太簡單了，不講了~

  • .u-full-width ：寬度滿屏
  • .u-max-full-width ：最大寬度是滿屏
  • .u-pull-right ：右浮動
  • .u-pull-left ：左浮動

分割線 Hr

使用方法

Skeleton.css源碼解讀，一個隻有419行代碼的CSS庫
<hr />

源碼分析 

hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1;
}
  • 上下設定了外邊距
  • 清除掉所有border
  • 最後再設定回頂部邊框為1px，實線，灰色

清除浮動 Clearing

源碼分析 

.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both;
}

容器 和 行 都設定了清楚浮動。

.u-cf 是專門清楚浮動的。

清楚浮動的做法在很多基礎的 css 教程有講，這裡不再啰嗦了。

媒體查詢 Media Queries

源碼分析 

@media (min-width: 400px) {}

@media (min-width: 550px) {}

@media (min-width: 750px) {}

@media (min-width: 1000px) {}

@media (min-width: 1200px) {}

這部分的源碼，是預留給開發者自己寫的。

如果開發者需要自己重新定義某些元素的樣式，根據不同的視窗寬度來定義，可以在此編寫。

Skeleton.css源碼 

/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222; }


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #1EAEDB; }
a:hover {
  color: #0FA0CE; }


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;
  border-color: #888;
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; }


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

更多推薦

console.log也能插圖！！！

Vite 搭建 Vue2 項目（Vue2 + vue-router + vuex）

‍ Fabric.js 從入門到膨脹

源碼解讀
上一篇: 【高速公路上怎麼準确描述自己的位置】高速公路一般地處人煙稀少的地方，萬一遇到爆胎、身體不适、惡劣天氣等意外狀況需要求助，
下一篇: 真不知道他是怎麼想的？我一朋友居然買了一輛09年的豐田皇冠！裸車8萬元整，之後又是抛光又是換輪胎輪毂又是過戶等。一下子1

繼續閱讀