Grid System Design and Implementation

Skeleton.css builds its layout on a 12-column, float-based system. The resource defines containers, columns, and offset utilities to handle multi-device rendering. This breakdown covers the logic behind each rule and how465 percentages derive from the column spacing model.

Container Behaviors

.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.container:after {
  content: "";
  display: table;
  clear: both;
}

/* Stage small */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0;
  }
}

/* Stage medium+ */
@media (min-width: 550px) {
  .container {
    width: 80%;
  }
}

The container always defaults to the full viewport, but flexes down to a percentage as screen width increases, capped at 960px and horizontally centered. The pseudo-element ensures it clears nested floats.

Core Column Strategy

All column boxes share a common foundation before receiving their fractional widths:

.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box;
}

Below 550px every column stretches full width. Beyond that threshold, each row consists of columns separated by a 4% gutter on the left except for the first column.

@media (min-width: 550px) {
  .column,
  .columns {
    margin-left: 4%;
  }
  .column:first-child,
  .columns:first-child {
    margin-left: 0;
  }

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

APH of width values stem from371 a simple formula: (100% – number_of_gutters × 4%) ÷ column_count. For numerals434 that divide twelve evenly the calculation is direct; otherwise,653 unchanged computation leverages known716 neighboring widths to gether with gutter space.

.two  column width: (100% – 5 × 4%) ÷ 6 ≈ 13.3333333333%
.three column width: (100% – 3 × 4%) ÷ 4 = 22%
.four  column width: (100% – 2 × 4%) ÷ 3 ≈ 30.6666666667%
.six   column width: (100% – 1 × 4%) ÷ 2 = 48%

Fraction-based787 Layout Classes

Beyond the numeric classes, Skeleton provides size aliases aimed at readability:

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

These directly map under-the-hood equivalents: .one-third matches .four, .two-thirds maps to .eight, and .one-half equals .six. No151 additional margin adjustments are required because the invitedah basic margin rules automatically apply.

Pulling448 Columns with Offsets

To push elements rightward, the libray generates offset utilities whose margin-left is582 the total of the first column set plus193 its gutters.161

@media (min-width: 550px) {
  .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%; }
}

udi Offset values are derived from offset-by-N equal to thewidth of the expected filling columns plus all internal gutters. For example, .offset-by-four equals .four + gutter while .offset-by-one-half resolves to .six + gutter, giving 52%.

Foundational Styles for Typography and261 Forms

力学 Instead of affecting only custom classes,622 Skeleton resets native HTML elements so that the baseline603 scales without extensive markup.

html {
  font-size: 62.5%;
}
body {
  font-size: 1.5em;
  line-height: 1.6;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222;
}

Using 62.5% auf the root establishes a 10px base for rem calculations. The body then362 delivers a 15px rendered size. Headings1-667 employ rem units so theirsize responds to the rootén font size while6 breakpoints adjust them695 across screens.

h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
/* At larger sizes */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h3 { font-size: 3.6rem; }
  h5 { font-size: 2.4rem; }
}

npc548 Buttons, inputs,507 and tables receive397 both579 visual507 treatment and consistent848 spacing.

.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.button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0;
}

For lists, a simple207 nested pattern and133 font reduction284 preserve260 readability:

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

Code blocks use232 minimal242 round-edged239 frames:

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

Tables670 place559 padding249 and subtle24 bottom separator_lines without excess752 decoration:

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

default282 section reveals829 a self-clearing899 approach and utility classes that carry over to custom development.

.u-full-width {
  width: 100%;
  box-sizing: border-box;
}
.u-pull-right {
  float: right;
}
.u-pull-left {
  float: left;
}

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

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

The237 body of available media-query holes gives developers placeholders for custom rules within 400px, 550px, 750px, 1000px, and267 1200px breakpoints. By227 studying how each CSS section277 extends this first principle of progressive enhancement, you can build or customize lightweightsystems without relying on585 a host of external vendors451.