Skip to content

Instantly share code, notes, and snippets.

@jokull
Created December 20, 2011 15:39
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save jokull/1501983 to your computer and use it in GitHub Desktop.
Save jokull/1501983 to your computer and use it in GitHub Desktop.
Stylus Skeleton responsive grid
// Based on getskeleton.com
@import "nib/clearfix"
@import "nib/reset"
global-reset()
columns = 16
column-width = 57px // Ends up as 1232px layout
gutter-width = 20px
column(span)
width ((column-width + gutter-width) * span) - gutter-width
offset(span)
padding-left ((column-width + gutter-width) * span)
layout()
width ((column-width + gutter-width) * columns)
.one.column
column(1)
.two.columns
column(2)
.three.columns
column(3)
.four.columns
column(4)
.five.columns
column(5)
.six.columns
column(6)
.seven.columns
column(7)
.eight.columns
column(8)
.nine.columns
column(9)
.ten.columns
column(10)
.eleven.columns
column(11)
.twelve.columns
column(12)
.thirteen.columns
column(13)
.fourteen.columns
column(14)
.fifteen.columns
column(15)
.sixteen.columns
column(16)
.one-third.column
column(columns/3)
.two-third.column
column(2*columns/3)
.offset-by-one
offset(1)
.offset-by-two
offset(2)
.offset-by-three
offset(3)
.offset-by-four
offset(4)
.offset-by-five
offset(6)
.offset-by-six
offset(6)
.offset-by-seven
offset(7)
.offset-by-eight
offset(8)
.offset-by-nine
offset(9)
.offset-by-ten
offset(10)
.offset-by-eleven
offset(11)
.offset-by-twelve
offset(12)
.offset-by-thirteen
offset(13)
.offset-by-fourteen
offset(14)
.offset-by-fifteen
offset(15)
/* #1232 Grid
================================================== */
.container
position relative
margin 0 auto
padding 0
layout()
.column, .columns
float left
display inline
margin-left gutter-width * 0.5
margin-right gutter-width * 0.5
.row
margin-bottom 20px
clearfix()
/* Nested Column Classes */
.column.alpha, .columns.alpha
margin-left 0
.column.omega, .columns.omega
margin-right 0
/* #960 Grid
================================================== */
/* Note: Design for a width of 960px */
column-width = 40px
@media only screen and (min-width: 960px) and (max-width: 1231px)
.container
layout()
/* #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
handheld-width = 300px
handheld-landscape-width = 480px
@media only screen and (max-width: 959px)
.container
width handheld-width
.column
margin 0
.one.column,
.two.columns,
.three.columns,
.four.columns,
.five.columns,
.six.columns,
.seven.columns,
.eight.columns,
.nine.columns,
.ten.columns,
.eleven.columns,
.twelve.columns,
.thirteen.columns,
.fourteen.columns,
.fifteen.columns,
.sixteen.columns,
.one-third.column,
.two-thirds.colums
width handheld-width
.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,
.offset-by-eleven,
.offset-by-twelve,
.offset-by-thirteen,
.offset-by-fourteen,
.offset-by-fifteen
padding-left 0
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: handheld-landscape-width) and (max-width: 959px)
.container
width handheld-landscape-width
.column
margin 0
.one.column,
.two.columns,
.three.columns,
.four.columns,
.five.columns,
.six.columns,
.seven.columns,
.eight.columns,
.nine.columns,
.ten.columns,
.eleven.columns,
.twelve.columns,
.thirteen.columns,
.fourteen.columns,
.fifteen.columns,
.sixteen.columns,
.one-third.column,
.two-thirds.colums
width handheld-landscape-width
.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,
.offset-by-eleven,
.offset-by-twelve,
.offset-by-thirteen,
.offset-by-fourteen,
.offset-by-fifteen
padding-left 0
@balupton
Copy link

balupton commented Jan 2, 2012

A bit overly verbose don't you think?

This is how I went about it: https://gist.github.com/1549029

@jokull
Copy link
Author

jokull commented Jan 3, 2012

Two very different ways. Your way is very nice if you don't want to litter your markup with class names to denote the column span. Mine is inspired by Skeleton CSS.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment