Skeleton Framework

Grid

twelve columns
one
eleven columns
two columns
ten columns
three columns
nine columns
four columns
eight columns
five columns
seven columns
six columns
six columns
four columns
four columns
four columns
three columns
three columns
three columns
three columns
two columns
eight columns
two columns
seven columns
five columns
one-third column
two-thirds column
one-half column
one-half column
one-quarter column
one-quarter column
one-quarter column
one-quarter column

grid offsets

eleven columns offset by one
ten columns offset by two
nine columns offset by three
eight columns offset by four
seven columns offset by five
six columns offset by six
five columns offset by seven
four columns
four columns offset by four
three columns offset by nine
six columns offset by three

nested grids


six columns
six columns with nested grid
six columns nested
six columns nested
twelve columns nested

responsive grids


xs-six sm-seven columns
xs-six sm-five columns
sm-twelve md-six lg-four columns
sm-twelve md-six lg-four columns
sm-twelve lg-four columns
md-six columns
md-six columns
md-eight lg-six lg-offset-by-six columns

typography


Heading <h1> 5.0rem

Heading <h2> 4.2rem

Heading <h3> 3.6rem

Heading <h4> 3.0rem

Heading <h5> 2.4rem
Heading <h6> 1.5rem

Bolded Italicized Colored Underlined

check out this paragraph "Who are you who speaks out of the darkness?" he answered "John Carter, a friend of the red men of Helium." "I am of Helium," he said, "but I do not recall your name." And then I told him my story as I have written it here, omitting only any reference to my love for Dejah Thoris. He was much excited by the news of Helium's princess and seemed quite positive that she and Sola could easily have reached a point of safety from where they left me. He said that he knew the place well because the defile through which the Warhoon warriors had passed when they discovered us was the only one ever used by them when marching to the south. "Dejah Thoris and Sola entered the hills not five miles from a great waterway and are now probably quite safe," he assured me. My fellow prisoner


buttons


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


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

tables

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