You are using an outdated browser. Please upgrade your browser to improve your experience.

A Beautiful & Simple Boilerplate for Responsive, Mobile-Friendly Development


The Grid

Sixteen
One
Fifteen
Two
Fourteen
Three
Thirteen
Four
Twelve
Five
Eleven
Six
Ten
Seven
Nine
Eight
Eight
Nine
Seven
Ten
Six
Eleven
Five
Twelve
Four
Thirteen
Three
Fourteen
Two
Fifteen
One
Sixteen

Typography

The typography of Skeleton is designed to create a strong hierarchy with basic styles. The primary font is the classic Helvetica Neue, but the font stack can be easily changed with just a couple adjustments. Regular paragraphs are set at a 14px base with 21px line height.

Heading <h1>

Heading <h2>

Heading <h3>

Heading <h4>

Heading <h5>
Heading <h6>

This is a blockquote style example. It stands out, but is awesome

Dave Gamache, Skeleton Creator


Images & Retina support

Sample Image


Forms

Forms can be one of the biggest pains for web developers, but just use these dead simple styles and you should be good to go.

Checkboxes
Radio Buttons

Icons

For icons, just use fontello.com to generate a font with the needed icons. For quick reference, a font with one icon (github ) has been added.


Media Queries

Skeleton uses a lot of media queries to serve the scalable grid, but also for the convenience of styling your site on different size screens. Skeleton's media queries are almost exclusively targeted at max and min widths rather than device sizes or orientations. The advantage of this is browsers and future mobile devices that don't map to exact set dimensions will still benefit from the styles. That being said, all of the queries were written to be optimal on Apple iOS devices. The built in media queries include:

  • Bigger than or equal to 960: Bigger than or equal to the standard base grid
  • Smaller than 960: Smaller than the standard base grid
  • Tablet Portrait: Between 768px and 959px
  • All Mobile Sizes: Less than 767px
  • Just Mobile Landscape: Between 480px and 767px
  • Just Mobile Portrait: Less than 479px