Read the Skeleton.css source code to improve sleep quality (although it’s only 419 lines of code)

This article introduces

A like is equal to learning!

If this article is helpful to you, it is recommended to like and collect (a like is equal to learning)

The Skeleton source code has only 419 lines (plus comments and line breaks), which is very suitable for learning.

This article is written based on my learning process, and almost every chapter includes usage and source code analysis .

Although most businesses do not need to reinvent the wheel now, for Xiaobai, after learning the Skeleton source code , he can walk out of the novice village.

This article does not recommend that you use Skeleton.css , because modern projects actually don’t use this library. The focus of this article is on the interpretation of responsive layout source code .

This article is suitable for the crowd:

• Have css foundation (understand float, color, background color, etc.);

• I have some work experience, but I don’t know how the css library is generated;

Introducing Skeleton

If you’re working on a smaller project, or don’t feel the need for a large framework, try Skeleton.

Skeleton only styles a few standard HTML elements and provides a grid system.

“Skeleton.css official website”

“github address”

You can also slide directly to the end of the article to get the Skeleton 源码.

Read the source code of css, why choose Skeleton?

• Bootstrap : Too long, don’t watch!

• Layui : Too long, don’t watch!

• Element ui : It is bound to the framework, not suitable for Xiaobai to watch~

• Animate.css : animation library, see you next time.

• …

• Skeleton : Short!

function catalog

Set off! ! !

All examples in this article use CDN to import skeleton.css , which has been imported by default, so the imported code will not appear in the case.

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

Grid System Grid<a name=”Grid”></a>

Skeleton provides a 12-column grid layout mode, which is indeed a bit less than the 24 columns of modern UI libraries. But this does not affect our study.

Skeleton supports Specified Value Layout and Proportional Layout , these two names are my own, the official did not say so.

In fact, these two layout methods are similar, but the semantics are slightly different.

Instructions

Specify the value layout

Layout by using words from 1 to 12 with the .columns 类名.

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

Skeleton.css provides a 12 column responsive grid layout that shrinks as browser/device size decreases.

When the browser window is smaller than 550px , all columns fill the entire row.

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

This example uses .container as the container, limits the maximum width to 980px , and is centered horizontally.

Because the layout container does not provide styles such as background and margins, this example writes a background color to .columns for easy observation.

.row doesn’t actually need to be added. In this example, this class is added just to make the code look more readable.

Proportional layout

Three class names are provided, which need to be used with .column .

• .one-third : one third

• .two-thirds thirds : two-thirds

• .one-half : half

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

column offset

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

Source code analysis

The layout is actually divided into several parts:

1. container part

2. column (determined value)

3. column (percent)

4. column spacing

5. column offset

container part

 .container {   position: relative; /* relative positioning */   width: 100%; /* container width 100% */   max-width: 960px; /* but the maximum width should not exceed 980px */   margin: 0 auto; /* center horizontally*/   padding: 0 20px; /* container left and right padding 20px */   box-sizing: border-box; /* Set the container box model, set the border and padding of the container will not exceed the width of the container*/ }   /* When the container is not smaller than 400px */ @media (min-width: 400px) {   .container {     width: 85%; /* width is 85% */     padding: 0; /* padding is 0 */   } }   /* When the container is not smaller than 550px */ @media (min-width: 550px) {   .container {     width: 80%; /* The width is 80, and the padding is affected by the settings in @media (min-width: 400px) */   } }   .container:after {   content: "";   display: table;   clear: both; /* clear float */ }  

The container uses the class name of container . It can be seen that the skeleton first wrote the solution for the small screen, and then wrote the large screen.

• By default (the document width is less than 400px ), the width of the container container is 100% , the maximum width is 980px , and the horizontal centering effect is achieved by margin: 0 auto;

• When the document width is greater than or equal to 400px , the container width becomes 85% , but it is also limited by the maximum width (980px), and the padding is set to 0 .

• When the document width is greater than or equal to 550px , the container width becomes 80% , which will cover the width set in @media (min-width: 400px) , but will be affected by the padding set in @media (min-width: 400px) .

• Finally set a pseudo-element :after to clear the float ( clear: both; ).

Column layout (the start of responsiveness)

Skeleton.css implements responsiveness using float + percentage .

Column (determined value) , **column (percentage)**, and column spacing are all three to be discussed together.

The skeleton has a total of 12 column layouts, so the basic ones are configured: one, two, three, four, five, six, seven, eight, nine, ten, eleven, twin.

It’s all basic digital English, so I won’t translate it.

There are two cases to discuss here.

1. Divisible by 12 (one, two, three, four, six, twinve)

2. Not divisible by 12 (five, seven, eight, nine, then, eleven)

These two cases are discussed separately next.

 .column, .columns {   width: 100%; /* All columns are 100% wide. */   float: left; /* left float */   box-sizing: border-box; /* Set the container box model, set the border and padding of the container will not exceed the width of the container*/ }   @media (min-width: 550px) {   .column,   .columns {     margin-left: 4%; /* left margin 4% */    }   .column:first-child,   .columns:first-child {     margin-left: 0; /* The first element doesn't need a left margin, so set it to 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; } /* only one column, no need for left margin*/     /* 1/3, corresponding to .four */   .one-third.column { width: 30.6666666667%; }      /* 2/3, corresponding to .eight */   .two-thirds.column { width: 65.3333333333%; }     /* 1/2, corresponding to .six */   .one-half.column { width: 48%; } }  

• By default (document width less than 550px ) all columns are 100% wide.

• Except for the first column, subsequent columns have a 4%的左边距.

Divisible by 12

.one , .two , .three , .four , .six , .twelve

The layout is as shown in the figure below (this article only discusses the two columns of .one and .two in detail, the other principles are the same, you can calculate it yourself)

As can be seen from the above figure, if .one is used, there are 12 columns and 11 intervals in total, the width of one row is 100% , the proportion of each interval is 4% , and the 11 intervals cost 44% in total. The remaining 56% give the 12 columns an average score.

So the width of .one is 56 ÷ 12 ≈ 4.66666666667 in %

If you use .two , it can be seen from the above figure that there are 6 columns and 5 intervals . The width of each interval is 4% . The 5 intervals take up 20% of the width, and the remaining 80% of the width is given to the average of the 6 columns. point.

**So the width of .two is 80 ÷ 6 ≈ 13.3333333333 in % **

For the rest, I will write the formula directly. If you don’t understand, you can discuss it in the comment area~

Formula: (100% – number of intervals × 4%) ÷ number of columns

• .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 : It’s 100%, and it doesn’t need a left margin

not divisible by 12

.five , .seven , .eight , .nine , .then , .eleven

First look at .five , which represents 5, 12 – 5 = 7 , but now we don’t know what the values ​​of .five and .seven are. Although it can be calculated by adding an间隔（4%） to 5:7 , I prefer Willingness to use known values ​​to extrapolate.

The three columns of .two + .five + .five add up to exactly 12 , and we know the value of .two , so we can get an algebraic formula:

13.3333333333% + interval + .five + interval + .five = 100%

The proportion of interval is 4% so the following algebraic expression is obtained

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

21.3333333333% + 2(.five) = 100%

2(.five) = 78.6666666667%

.five ≈ 39.3333333333%

According to the above derivation method for primary school students, we know that a .five is 39.3333333333%

.seven

I just mentioned, 5 + 7 = 12 , now that 5 comes out, 7 can also be calculated by addition and subtraction

.five + interval + .seven = 100%

39.3333333333% + 4% + .seven = 100%

.seven = 100% – 39.3333333333% – 4%

.seven = 56.6666666667%

To sum up, the width of .seven is 56.6666666667%

This is my derivation, and the final value is also the same as the value of skeleton . The derivation method of .eight , .nine , .then , and .eleven is actually the same as above, so I won’t repeat it here. If you have any questions, you can communicate in the comments section.

Finally got

• .five : 39.3333333333%

• .seven : 56.6666666667%

• .eight : 65.3333333333%

• .nine : 74.0%

• .ten : 82.6666666667%

• .eleven : 91.3333333333%

Proportion

• .one-third : One third. corresponding to .four

• .two-thirds thirds: Two-thirds. corresponds to .eight

• .one-half : half. corresponding to .six

column offset

The class names of column offsets all start with .offset-by- , followed by the corresponding number or proportion of the word.

 @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%; } }  

If .offset-by-one is used, then we need to assume that the following content is supplemented by 12 .

1 + 11 = 12, we know from the above calculation that the width of .eleven is 91.3333333333% , so the proportion of .offset-by-one is:

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

.offset-by-one = 8.66666666667%

The other .offset-by-two and .offset-by-three can also be calculated in the same way. Finally, compare it with the value of skeleton .

Base Styles Base Styles<a name=”BaseStyles”></a>

This part mainly defines the style of the global font and line spacing , which acts on the html and body tags.

Instructions

 <div>Thunder Monkey</div>  

Source code analysis

Take a look at this part of the source code:

 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 weight */   font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; /* fonts*/   color: #222; /* Text color */ }  

The default font size of the browser is 16px , and the font size is set to 62.5% in html , that is, it becomes 10px .

Set font-size: 1.5em; on the body , then the content after that will inherit the body by default, that is, the normal text is 15px .

Finally, set the line height , font weight , font , and text color .

Typography<a name=”Typography”></a>

There is no need to use a special class name, this part works in the h1 ~ h6 tags. Using the rem method to set the font size will be affected by the font size of the <html> tag.

Instructions

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

Source code analysis

 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; }  

This source code is actually nothing to explain. It mainly sets the margins , font size , text thickness , line height , and kerning of h1 ~ h6 , and uses media queries to redefine the browser width of different sizes. The displayed titles have different font sizes. .

Finally, the top margin of the paragraph p is defined. The font size of p here inherits the settings in the body by default, which is 15px .

Links Links<a name=”Links”></a>

Instructions

 <a>Colored</a>  

Source code analysis

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

Only the font color of a is defined here, as well as the color when the mouse is over. The font size inherits body by default, which is 15px .

Buttons<a name=”Buttons”></a>

Instructions

 <!-- default --> <a class="button" href="#">Anchor button</a> <button>Button element</button> <input type="submit" value="submit input"> <input type="button" value="button input">   <!-- primary type --> <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">  

Source code analysis

 /* default style */ .button, button, input[type="submit"], input[type="reset"], input[type="button"] {   display: inline-block; /* inline-block*/   height: 38px; /* height */   padding: 0 30px; /* padding: 0 up and down, 30px left and right */   color: #555; /* font color: gray (a bit darker) */   text-align: center; /* Center the text*/   font-size: 11px; /* font size*/   font-weight: 600; /* slightly bold font */   line-height: 38px; /* line height (same as height, so centered vertically) */   letter-spacing: .1rem; /* kerning*/   text-transform: uppercase; /* letters into uppercase */   text-decoration: none; /* No text decoration required */   white-space: nowrap; /* do not wrap */   background-color: transparent; /* Background color: transparent */   border-radius: 4px; /* rounded corners: 4px */   border: 1px solid #bbb; /* border: 1px, solid line, light gray */   cursor: pointer; /* mouse pointer style */   box-sizing: border-box; /* box model rules*/ }   /* Mouse over, get focus */ .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; /* Text color is a little darker than default*/   border-color: #888; /* The border color is a little darker than the default*/   outline: 0; /* outline: 0 */ }   /* primary type */ .button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary {   color: #FFF; /* words become white*/   background-color: #33C3F0; /* Background color becomes blue*/   border-color: #33C3F0; /* The border color becomes blue*/ }   /* When using primary type: mouse over, get focus*/ .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; /* Text white */   background-color: #1EAEDB; /* The background color becomes a little darker*/   border-color: #1EAEDB; /* Make the border color a little darker*/ }  

There are many ways to implement buttons, such as <button> , <input type="submit" /> and so on. I won’t list them one by one here. The skeleton has written all of these situations and can be viewed directly in the source code. arrive.

skeleton provides 2 styles of buttons, one is default (black text on white background) and the other is primary (white text on blue background).

There are also some selected states.

The practice of skeleton is to write the default one first, and other states will overwrite the new style on the basis of the default state.

Forms Forms<a name=”Forms”></a>

Instructions

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

Source code analysis

 /* Single-line text box, multi-line text box, down selector */ 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; /* height */   padding: 6px 10px; /* padding: top and bottom 6px, left and right 10px */   background-color: #fff; /* Background color: white */   border: 1px solid #D1D1D1; /* border: 1px, solid, grey */   border-radius: 4px; /* rounded corners: 4px */   box-shadow: none; /* shadow: none */   box-sizing: border-box; /* box model */ }   /* Style settings for single-line and multi-line text boxes */ 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; /* appearance*/ }   /* Multi-line text box */ textarea {   min-height: 65px; /* The minimum height is 65px, which will override the height set above */   padding-top: 6px; /* top padding */   padding-bottom: 6px; /* bottom padding */ }   /* When single-line text box, multi-line text box, down selector gets focus*/ 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; /* border: 1px, solid, blue */   outline: 0; /* outline: 0 */ }   /* label (label)    legend (relevant elements in the combined form, the legend element defines the title for the fieldset element) */ label, legend {   display: block; /* block */   margin-bottom: .5rem; /* Bottom margin*/   font-weight: 600; /* font is a bit thick */ }   /* fieldset (groups related elements in the form) */ fieldset {   padding: 0; /* padding */   border-width: 0; /* border width*/ }   /* Multiple selection and single selection */ input[type="checkbox"], input[type="radio"] {   display: inline; /* inline*/ }   /* .label-body under the label label, see the usage example*/ label > .label-body {   display: inline-block; /* inline*/   margin-left: .5rem; /* Left margin: 5px */   font-weight: normal; /* font weight */ }  

Lists Lists<a name=”Lists”></a>

Instructions

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

Source code analysis

 /* unordered list */ ul {   list-style: circle inside; /* markup style: circle, inside */ }   /* ordered list */ ol {   list-style: decimal inside; /* markup style: decimal, inside */ }   ol, ul {   padding-left: 0; /* left padding: 0 */   margin-top: 0; /* left margin: 0 */ }   /* nested list */ ul ul, ul ol, ol ol, ol ul {   margin: 1.5rem 0 1.5rem 3rem; /* Margin */   font-size: 90%; /* font size*/ }   /* list item */ li {   margin-bottom: 1rem; /* bottom margin */ }  

Code Code<a name=”Code”></a>

Instructions

 <pre> <code>.some-class {   background-color: red; }</code> </pre>  

Source code analysis

 code {   padding: .2rem .5rem; /* padding */   margin: 0 .2rem; /* Margin */   font-size: 90%; /* font size*/   white-space: nowrap; /* do not wrap */   background: #F1F1F1; /* Background color: super light gray */   border: 1px solid #E1E1E1; /* border: 1px, solid, grey */   border-radius: 4px; /* rounded corners: 4px */ }   pre > code {   display: block; /* block */   padding: 1rem 1.5rem; /* padding */   white-space: pre; /* Whitespace will be preserved by the browser. */ }  

code and pre are HTML native tags.

Tables Tables<a name=”Tables”></a>

Instructions

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

Source code analysis

 /* Header columns and normal columns */ th, td {   padding: 12px 15px; /* padding */   text-align: left; /* text is left aligned */   border-bottom: 1px solid #E1E1E1; /* bottom border*/ }   /* The column of the first header and the first normal column of each row */ th:first-child, td:first-child {   padding-left: 0; /* left padding */ }   /* The column of the last header and the last normal column of each row*/ th:last-child, td:last-child {   padding-right: 0; /* right padding */ }  

I didn’t expect the css style of the table to be so simple, hahahaha~

Interval Spacing<a name=”Spacing”></a>

Source code analysis

 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; }  

This part mainly defines the bottom margin of commonly used labels and classes. It is too simple to go into details.

Toolset Utilities<a name=”Utilities”></a>

Source code analysis

 .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; }  

This part of the source code is too simple, let’s not talk about it~

• .u-full-width : full screen width

• .u-max-full-width : the maximum width is full screen

• .u-pull-right : float right

• .u-pull-left : float left

Dividing Line Hr<a name=”Hr”></a>

Instructions

 <hr />  

Source code analysis

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

• Set up and down margins

• clear all borders

• Finally, set the top border back to 1px, solid line, gray

Clear floating Clearing<a name=”Clearing”></a>

Source code analysis

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

Both container and row are set to clear float.

.u-cf is specifically for clear floats.

The practice of clear floating is covered in many basic css tutorials, so I won’t repeat it here.

Media Queries Media Queries<a name=”MediaQueries”></a>

Source code analysis

 @media (min-width: 400px) {}   @media (min-width: 550px) {}   @media (min-width: 750px) {}   @media (min-width: 1000px) {}   @media (min-width: 1200px) {}  

This part of the source code is reserved for developers to write by themselves.

If developers need to redefine the style of some elements by themselves, they can be written here according to different window widths.

The text and pictures in this article are from InfoQ