Popular naming conventions...

Huh? This page attempts to document some of the more popular CSS grid system naming conventions.

Wha? I wanted to see what other folks were using for grid names… I'm weird like that. :D

Umm? The below grid systems found via a "CSS grid system" Google search.

OOCSS Grids

Basic structure:

• .line
  • .unit
  • .size1of5
  • .size1of1
  • .size1of2
  • .size1of3
  • .size2of3
  • .size1of4
  • .size3of4
  • .size1of5
  • .size2of5
  • .size3of5
  • .size4of5

First/last:

• .lastUnit

Utility:

• .unitRight

The 1140px CSS Grid System

Basic structure:

• .container
  • .row
    • .onecol
    • .twocol
    • .threecol
    • .fourcol
    • .fivecol
    • .sixcol
    • .sevencol
    • .eightcol
    • .ninecol
    • .tencol
    • .elevencol
    • .twelvecol

First/last:

• .last

960 Grid System

Basic structure:

• .container_12
• .container_16
  • .grid_1
  • .grid_2
  • .grid_3
  • .grid_4
  • .grid_5
  • .grid_6
  • .grid_7
  • .grid_8
  • .grid_9
  • .grid_10
  • .grid_11
  • .grid_12
  • .grid_13
  • .grid_14
  • .grid_15
  • .grid_16

First/last:

• .alpha (first)
• .omega (last)

Ordering:

• .push_1 … .pull_15

Spacing:

• .prefix_1 … .prefix_15
• .suffix_1 … .suffix_15

Columnal

Basic structure:

• .row
  • .col_1
  • .col_2
  • .col_3
  • .col_4
  • .col_5
  • .col_6
  • .col_7
  • .col_8
  • .col_9
  • .col_10
  • .col_11
  • .col_12

First/last:

• .last OR .omega

Spacing:

• .pre_1 … .pre_11
• .suf_1 … .suf_11
• .margin_top_ + 5/15/25/30/35/45/60/90/120
• .margin_bottom_ + 5/15/25/30/35/45/60/90/120
• .padding_top_ + 15/30/45/60/90/120/130
• .padding_bottom_ + 15/30/45/60/90/120/130

YUI3 CSS Grids

Basic structure:

• .yui3-g
  • .yui3-u
  • .yui3-u-1
  • .yui3-u-1-2
  • .yui3-u-1-3
  • .yui3-u-2-3
  • .yui3-u-1-4
  • .yui3-u-3-4
  • .yui3-u-1-5
  • .yui3-u-2-5
  • .yui3-u-3-5
  • .yui3-u-4-5
  • .yui3-u-1-6
  • .yui3-u-5-6
  • .yui3-u-1-8
  • .yui3-u-3-8
  • .yui3-u-5-8
  • .yui3-u-7-8
  • .yui3-u-1-12
  • .yui3-u-5-12
  • .yui3-u-7-12
  • .yui3-u-11-12
  • .yui3-u-1-24
  • .yui3-u-5-24
  • .yui3-u-7-24
  • .yui3-u-11-24
  • .yui3-u-13-24
  • .yui3-u-17-24
  • .yui3-u-19-24
  • .yui3-u-23-24

Toast

Basic structure:

• .grids
  • .grid-1
  • .grid-2
  • .grid-3
  • .grid-4
  • .grid-5
  • .grid-6
  • .grid-7
  • .grid-8
  • .grid-9
  • .grid-10
  • .grid-11
  • .grid-12

The 1kb CSS Grid

Basic structure:

• .row
  • .column
  • .grid_1
  • .grid_2
  • .grid_3
  • .grid_4
  • .grid_5
  • .grid_6
  • .grid_7
  • .grid_8
  • .grid_9
  • .grid_10
  • .grid_11
  • .grid_12

Zurb Foundation 3

Basic structure:

• .row
  • .column or .columns
  • .one
  • .two
  • .three
  • .four
  • .five
  • .six
  • .seven
  • .eight
  • .nine
  • .ten
  • .eleven
  • .twelve

Offset:

• .offset-by-one
• .offset-by-two
• .offset-by-three
• .offset-by-four
• .offset-by-five
• .offset-by-six
• .offset-by-seven
• .offset-by-eight
• .offset-by-nine
• .offset-by-ten

Ordering:

• .push-two, .pull-two
• .push-three, .pull-three
• .push-four, .pull-four
• .push-five, .pull-five
• .push-six, .pull-six
• .push-seven, .pull-seven
• .push-eight, .pull-eight
• .push-nine, .pull-nine
• .push-ten, .pull-ten