Skeleton源码阅读：一个极简、响应式CSS库

时间 2020-07-10

标签 skeleton 源码阅读一个响应 css 栏目 CSS 繁體版

原文原文链接

Skeleton是我在阅读10 Best CSS Frameworks for Front-End Developers时发现的CSS库，如下是文章对其的描述：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.html

大体意思就是：Skeleton很是轻量，只有~400行代码，主要用于小项目的布局和定位。但这样的描述其实并没将Skeleton的所有特色囊括在内。如下是官方对本身的描述：git

A dead simple, responsive boilerplate.github

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.

翻译一下就是：web

一个极简、响应式CSS boilerplate。chrome

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

对Skeleton的介绍就到这里了，详细的内容你们能够直接前往Skeleton官网查阅。废话很少说，让咱们来看源码吧。bash

Skeleton源码

Skeleton提供的全部样式都在skeleton.css中，主要包含如下内容：app

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不涉及任何样式，只是给出了使用媒体查询的建议。后续内容会按照这个顺序依次讲解，有值得说用法会给出代码说明，没有的也会列出源码。ide

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样式。

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