You should use Skeleton if you're embarking on a smaller project or just don't feel like you need all the utility of larger frameworks. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started. In fact,
__this site is built on Skeleton and has ~200 lines of custom CSS__ (half of which is the docking navigation)

Love Skeleton and want to Tweet it, share it, or star it? Well, I appreciate that <3tweet 2 21 31 32 960px  font-size property. Out of the box, Skeleton never changes the
 font-size, but it's there in case you need it for your project. All measurements are still base 10 though so, an

 with
5.0remfont-size just means
50px

**The typography base** is Raleway 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** create a family of distinct sizes each with specific
letter-spacing,
line-height, and
margins


50rem

42rem

36rem

30rem

24rem

15rem
## Heading
## Heading
## Heading
## Heading
## Heading
## Heading
The base type is 15px over 1.6 line height (24px)
Bolded ItalicizedColored Underlined
Forms are a huge pain, but hopefully these styles make it a bit easier. All inputs, select, and buttons are normalized for a common height cross-browser so inputs can be stacked or placed alongside each other

- Item 1
- Item 2
- Item 2.1
- Item 2.2
- Item 3
Code styling is kept basic – just wrap anything in a
 and it will appear like
this. For blocks of code, wrap a
 with a


.some-class { background-color: red; }
.some-class { background-color: red; }
Be sure to use properly formed table markup with
 and
 when building a
table

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

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:
/* 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) {}
Skeleton has a number of small utility classes that act as easy-to-use helpers. Sometimes it's better to use a utility class than create a whole new class just to float an element

/* 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; }
More examples will be added to help anyone get started or more familiar with how Skeleton works. The goal is education. If you're more interested in real, live examples of Skeleton sites, I'll be creating a "Built on Skeleton" list soon!