About Extended Skeleton


Grid


The grid is a 12-column fluid grid with a max width of 1170px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser.

One
Eleven
Two
Ten
Three
Nine
Four
Eight
Five
Seven
Six
Six
Seven
Five
Eight
Four
Nine
Three
Ten
Two
Eleven
One
Twelve
Two Third
One Half
One Half

Typography


Type is all set with the rems, so font-sizes and spacial relationships can be responsively sized based on a single <html> font-size property. Out of the box, Skeleton never changes the <html> font-size, but it's there in case you need it for your project. All measurements are still base 10 though so, an <h1> with 5.0remfont-size just means 50px.

The typography base is Open Sans served by Google, set at 15rem (15px) over a 1.6 line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included.

Headings are based on Montserrat also served by Google creates a family of distinct sizes each with specific letter-spacing, line-height, and margins.

Heading <h1> 50rem

Heading <h2> 42rem

Heading <h3> 36rem

Heading <h4> 30rem

Heading <h5> 24rem
Heading <h6> 15rem