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.
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.0rem
font-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
.
<h1>
50rem<h2>
42rem<h3>
36rem<h4>
30rem<h5>
24rem<h6>
15rem