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.
One
Eleven
Two
Ten
1/3
2/3
1/2
1/2
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 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.
<h1> 50rem<h2> 42rem<h3> 36rem<h4> 30rem<h5> 24rem<h6> 15rem
Heading
Heading
Heading
Heading
Heading
Heading
The base type is 15px over 1.6 line height (24px)
Bolded
Italicized
Colored
Underlined
Buttons come in two basic flavors in Skeleton. The standard <button> element is plain, whereas the .button-primary
button is vibrant and prominent. Button styles are applied to a number
of appropriate form elements, but can also be arbitrarily attached to
anchors with a .button class.
Anchor button
Anchor button
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 <code> and it will appear like this. For blocks of code, wrap a <code> with a <pre>.
.some-class {
background-color: red;
}
.some-class {
background-color: red;
}
Be sure to use properly formed table markup with <thead> and <tbody> when building a table.
| Name | Age | Sex | Location |
|---|---|---|---|
| Dave Gamache | 26 | Male | San Francisco |
| Dwayne Johnson | 42 | Male | Hayward |
Name
Age
Sex
Location
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; }