A dead simple, responsive boilerplate.

Download
Super light at less than a kb & built with mobile in mind.
Styles designed to be a starting point, not a UI framework.
No compiling or installing necessary. Just vanilla CSS.
Is Skeleton for you?

You should use Skeleton if you're feeling like whole UI frameworks like Bootstrap and Foundation are overkill for your project and you just want the basics. 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 less than 100 lines of custom CSS.

Love Skeleton and want to share it, follow it, love it? Well, I appreciate that <3

The grid

The grid is just 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 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



  
  
  

    
One

    
Eleven

  


  
  

    
Two

    
Ten

  


  
  

    
1/3

    
2/3

  

  

    
1/2

    
1/2
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


Heading


Heading


Heading


Heading


Heading


Heading




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



Bolded
Italicized
Colored
Underlined
Buttons

Buttons come in two basic flavors in Skeleton. The standard <button> element is plain, whereas the .button-primary button is vibrant and prominent.

Anchor button
Anchor button 

Anchor button





Anchor button
Forms

Forms are a huge pain, but hopefully these styles make it a bit easier.
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
    
  
  • Item 1
    • 
  
  • 
    Item 2
    
      
      
    • Item 2.1
      • 
      
    • Item 2.2
      • 
    
    
  
    • 
  
  • Item 3
    •
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, wrap a <code> tag with a <pre> tag.

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

Only super basic styling for tabular data. Using properly formed table markup with <thead> and <tbody> is important here.

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
Media queries

Skeleton uses media queries to serve the scalable grid, but also has a list of queries for convenience of styling your site across devices. There are two sets of queries, the first is mobile-first style, meaning they target min-width so all the base styles are mobile, then queries are used to enhance for larger screen sizes. Mobile-first queries are how Skeleton's grid is styled. I've also provided the same set of queries with max-width if that's your preference. 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) {}


/* Desktop first queries */

/* Smaller than Desktop HD */
@media (max-width: 1199px) {}

/* Smaller than desktop */
@media (max-width: 999px) {}

/* Smaller than tablet */
@media (max-width: 749px) {}

/* Smaller than phablet */
@media (max-width: 549px) {}

/* Smaller than mobile */
@media (max-width: 399px) {}

/* Note: Values are 1px less on desktop first queries so there's no overriding in case you use both types of queries  */
Examples of Skeleton sites
License & Log

All parts of Skeleton are free to use and abuse under the open-source MIT license. More importantly, if you're into coding head over to the Github page and contribute or fork this bad boy.

Skeleton's version history is available on Github.

Code hidden visible