One
Eleven
Two
Ten
1/3
2/3
1/2
1/2
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.0re
m
font-size just means 50px
.
The typography baseisRaleway 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 le
tter-spacing
, line-height
, and m
argins
.
<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
<but
ton>
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
Anchor button
Anchor button
- Item 1
-
Item 2
- Item 2.1
- Item 2.2
- Item 3
<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
mi
n-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
●Desktop: 1000px
●Tablet: 750px
●Phablet: 550px
●Mobile: 400px
/* 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) {}
/* 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; }