1. TYPOGRAPHY

Skeleton < 20 kB H1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

The base type is 15px over 1.6 line height (24px)

Bolded Italicized Colored Underlined


2. GRID

The grid is a 12-column fluid grid with a max width of 960px, 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.

1of1
2of11, 1 + 11 = 12 ALLWAYS !!------------ -------------------74 -------------- ---------------------- ----------------- ---------------- ---------------90
1of2
2of10 --------------- ------------------- -------------57 ------------ ------------- ------------ ------------- ------------------ ---------------90
1/3
2/3
3/3
1/2
1/2

Note: columns can be nested, but it's not recommended since Skeleton's grid has %-based gutters, meaning a nested grid results in variable with gutters (which can end up being *really* small on certain browser/device sizes).




3. BUTTONS


Standard buttons Anchor button
Primary buttons Anchor btn (href)


4. FORMS


Always wrap checkbox and radio inputs in a label and use a inside of it

Note: The class .u-full-width is just a utility class shorthand for width: 100%




5. LISTS

Easily substitute any <ul> or an <ol> to get number lists or sublists. Skeleton doesn't support lists nested deeper than 2 levels




6. CODE

.some-class {
  background-color: red;
}



7. TABLES

Name Age Sex Location
Dave Gamache 26 Male San Francisco
Dwayne Johnson 42 Male Hayward



8. MEDIA QUERIES

Skeleton uses media queries to serve its scalable grid, but also has a list of queries for convenience of styling your site across devices. The queries are mobile-first, meaning they target min-width. Mobile-first queries are how Skeleton's grid is built and is the preferrable method of organizing CSS. It means all styles outside of a query apply to all devices, then larger devices are targeted for enhancement. This prevents small devices from having to parse tons of unused CSS. The sizes for the queries are: 

Desktop HD: 1200px        Phablet: 550px
Desktop: 1000px           Mobile: 400px
Tablet: 750px


/* Mobile first queries */

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}



9. UTILITIES


/* Utility Classes */

/* Make element full width */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }

/* Make sure elements don't run outside containers (great for images in columns) */
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }

/* Float either direction */
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }

/* Clear a float */
.u-cf {
  content: "";
  display: table;
  clear: both; }



10. EXAMPLES

skeleton_example.html