A responsive boilerplate just for the basics.

Download
Mobile first and weighing in at measly .5kb
Only styles basic HTML elements
Not a framework, but a jumping off point for devs
Why use Skeleton

You should use Skeleton if you're feeling like whole UI frameworks like Bootstrap, Foundation, and Pure are overkill for your projects and you just want the basics. Just styling the 80+ standard HTML elements (<button>, <p>, <nav>, …) can get you really far. For what it's worth, this site is built on Skeleton and only requires ~100 lines of additional CSS.

The grid

The grid is just a 12-column fluid grid with a max width of 960px (but this can be changed with one line of CSS). The syntax is simple and it makes responsive implementation much, much easier. Go ahead, resize the browser.

One
Eleven
Two
Ten
Three
Nine
Four
Eight
Five
Seven
Six
Six
Seven
Five
Eight
Four
Nine
Three
Ten
Two
Eleven
One
Typography

Type is all set with the rems, so font-sizes and spacial relationships are responsively sized based on a single <html> font-size property. Everything is still base 10 though so, an <h1> is 5.0rem, which just means 50px.

The typography base is 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.

Heading <h1> 50rem

Heading <h2> 42rem

Heading <h3> 36rem

Heading <h4> 30rem

Heading <h5> 24rem
Heading <h6> 15rem
Buttons

Buttons come in two basic flavors in Skeleton. The standard <button> element is vibrant, whereas the .secondary button takes a monotone backseat.

Anchor button Anchor button
Forms
Lists
  • Unordered lists have basic styles
  • They use the circle list style
    • Nested lists styled to feel right
    • Can nest either type of list into the other
  • Just more list items mama san
  1. Ordered lists also have basic styles
  2. They use the decimal list style
    • Ordered and unordered can be nested
    • Can nest either type of list into the other
  3. Last list item just for the fun
Code

Code styling was kept super basic – basically just wrap something in a <code> tag and it will look just like that code tag just did. For blocks of code just use a <pre> tag.

.some-class {
  background-color: red
}
Tables
Media queries
Miscellaneous

hrs, images