Skeleton源码阅读：一个极简、响应式CSS库_clannad小黑的专栏文章_微信文章

Skeleton是我在阅读10 Best CSS Frameworks for Front-End Developers时发现的CSS库，以下是文章对其的描述：

Skeleton is so minimal that it doesn’t even call itself a CSS framework, library, or even module. It’s boilerplate, and contains only 400 lines of source code! Incredible? I think so, but to put things in perspective, Skeleton was designed for tiny or small projects that need little more than layouts and positioning.

大致意思就是：Skeleton非常轻量，只有~400行代码，主要用于小项目的布局和定位。但这样的描述其实并没将Skeleton的全部特点囊括在内。以下是官方对自己的描述：

A dead simple, responsive boilerplate.

Light as a feather at ~400 lines & built with mobile in mind.

Styles designed to be a starting point, not a UI framework.

Quick to start with zero compiling or installing necessary.

翻译一下就是：

一个极简、响应式CSS boilerplate。

轻量到只有~400行代码 & 支持移动端
设计的样式可以帮助你快速的构建页面，但不会像UI framework那样提供大而全的功能。
无需编译和安装就可以使用。

对Skeleton的介绍就到这里了，详细的内容大家可以直接前往Skeleton官网查阅。废话不多说，让我们来看源码吧。

Skeleton源码

Skeleton提供的所有样式都在skeleton.css中，主要包含以下内容：

Grid
Base Styles
Typography
Links
Buttons
Forms
Lists
Code
Tables
Spacing
Utilities
Clearing
Media Queries

其中Grid负责响应式的网格布局；Base Styles、Typography、Links、Buttons、Forms、Lists、Code、Tables、Spacing负责重置相对应元素的默认样式，button比较特殊，提供了两套样式；Utilities则提供了一些简单的工具类；Clearing负责清除元素浮动；Media Queries不涉及任何样式，只是给出了使用媒体查询的建议。后续内容会按照这个顺序依次讲解，有值得说用法会给出代码说明，没有的也会列出源码。

Grid

Skeleton Grid是一个12列、响应式、最大宽度960像素的网格系统。这部分代码主要分三个部分：

用于任何分辨率下的样式

/* 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; }
复制代码

代码说明：box-sizing是CSS3新增的属性，用于改变CSS盒子模型计算宽高的方法。

宽度大于400px时覆盖和新增的样式

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

代码说明：@media可以针对不同的媒体类型定义不同的样式，也可以针对不同的屏幕尺寸设置不同的样式，如果你需要设计响应式的页面，@media 是非常有用的。

宽度大于550px时覆盖和新增的样式

/* 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%; }
}
复制代码

代码说明：column和columns的区别在于英语的单复数。

Base Styles

Bse Styles部分主要定义了页面默认的字体样式。

/* 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; }
复制代码

代码说明：

将html的font-size设为62.5%是为了将1rem换算成10px，默认情况下1rem=16px。
Raleway是谷歌提供的免费字体。

Typography

Typography部分主要定义了h1-h6字体、上下外边框的样式。

/* 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; }
复制代码

代码说明：

rem单位相较于em单位更推荐使用。
个人认为Base Styles的内容应该移到Typography中，p标签外边距的设置应该移到Spacing部分。

Link

Link部分定义了a标签的样式

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

Buttons

Buttons部分定义了按钮的样式

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

Forms部分定义了表单相关标签的样式。

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

Lists部分定义了列表相关标签的样式。

/* 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部分定义了code标签相关的样式。

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

Tables部分定义了表格相关标签的样式。

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

Spacing部分定义了大多数标签的外边距。

/* 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; }
复制代码

代码说明：本部分内容是我个人认为划分最不明确的部分，理论上这个部分应该负责所有元素的内外边距，实际上却只是修改了一些元素的margin-bottom。

Utilities

Utilities部分定义了一些工具类

/* 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; }
复制代码

Clearing

Clearing部分负责元素的浮动效果。

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

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

Media Queries

Media Queries部分给出了媒体查询的最佳实践。

/* 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) {}
复制代码

最后

以上就是本次源码阅读的全部内容了，尽管大部分内容就是源码本身，但是绝对没有水文章的意思，之所以把源码粘贴过来是希望读者可以在一篇文章中看到本文的全貌。最后，我来谈一下阅读源码对我本人的收获：

学习到了新的CSS属性；
学习到如何支持响应式；
学习到如何组织CSS样式。

感谢各位的阅读，欢迎大家留言，点赞，关注。