Skip to content

Instantly share code, notes, and snippets.

@fitsum
Created January 20, 2012 20:52
Show Gist options
  • Save fitsum/1649505 to your computer and use it in GitHub Desktop.
Save fitsum/1649505 to your computer and use it in GitHub Desktop.
Fluid Desktop & Mobile Grid
// This file requires Sass & Compass.
//
// - http://sass-lang.com
// - http://compass-style.org
// For box-sizing.
@import compass/css3
// `Clear floated elements.
//----------------------------------------------------------------------------------------------------
// http://sonspring.com/journal/clearing-floats
.clear
clear: both
display: block
overflow: hidden
visibility: hidden
width: 0
height: 0
// http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified
.clearfix:before,
.clearfix:after,
.container:before,
.container:after
content: '.'
display: block
overflow: hidden
visibility: hidden
font-size: 0
line-height: 0
width: 0
height: 0
.clearfix:after,
.container:after
clear: both
// `Container
//----------------------------------------------------------------------------------------------------
.container
margin-left: auto
margin-right: auto
padding-left: 10px
padding-right: 10px
max-width: 1200px // Or whatever.
// `Percentage based widths.
//----------------------------------------------------------------------------------------------------
.width-5,
.width-10,
.width-15,
.width-20,
.width-25,
.width-30,
.width-33,
.width-35,
.width-40,
.width-45,
.width-50,
.width-55,
.width-60,
.width-65,
.width-66,
.width-70,
.width-75,
.width-80,
.width-85,
.width-90,
.width-95,
.width-100,
.mobile-width-5,
.mobile-width-10,
.mobile-width-15,
.mobile-width-20,
.mobile-width-25,
.mobile-width-30,
.mobile-width-33,
.mobile-width-35,
.mobile-width-40,
.mobile-width-45,
.mobile-width-50,
.mobile-width-55,
.mobile-width-60,
.mobile-width-65,
.mobile-width-66,
.mobile-width-70,
.mobile-width-75,
.mobile-width-80,
.mobile-width-85,
.mobile-width-90,
.mobile-width-95,
.mobile-width-100
+box-sizing(border-box)
padding-left: 10px
padding-right: 10px
.is-parent
padding-left: 0
padding-right: 0
// `Push & Pull, to rearrange column order (for potential "SEO").
//----------------------------------------------------------------------------------------------------
.push-5,
.push-10,
.push-15,
.push-20,
.push-25,
.push-30,
.push-33,
.push-35,
.push-40,
.push-45,
.push-50,
.push-55,
.push-60,
.push-65,
.push-66,
.push-70,
.push-75,
.push-80,
.push-85,
.push-90,
.push-95,
.pull-5,
.pull-10,
.pull-15,
.pull-20,
.pull-25,
.pull-30,
.pull-33,
.pull-35,
.pull-40,
.pull-45,
.pull-50,
.pull-55,
.pull-60,
.pull-65,
.pull-66,
.pull-70,
.pull-75,
.pull-80,
.pull-85,
.pull-90,
.pull-95,
.mobile-push-5,
.mobile-push-10,
.mobile-push-15,
.mobile-push-20,
.mobile-push-25,
.mobile-push-30,
.mobile-push-33,
.mobile-push-35,
.mobile-push-40,
.mobile-push-45,
.mobile-push-50,
.mobile-push-55,
.mobile-push-60,
.mobile-push-65,
.mobile-push-66,
.mobile-push-70,
.mobile-push-75,
.mobile-push-80,
.mobile-push-85,
.mobile-push-90,
.mobile-push-95,
.mobile-pull-5,
.mobile-pull-10,
.mobile-pull-15,
.mobile-pull-20,
.mobile-pull-25,
.mobile-pull-30,
.mobile-pull-33,
.mobile-pull-35,
.mobile-pull-40,
.mobile-pull-45,
.mobile-pull-50,
.mobile-pull-55,
.mobile-pull-60,
.mobile-pull-65,
.mobile-pull-66,
.mobile-pull-70,
.mobile-pull-75,
.mobile-pull-80,
.mobile-pull-85,
.mobile-pull-90,
.mobile-pull-95
position: relative
// This file requires Sass & Compass.
//
// - http://sass-lang.com
// - http://compass-style.org
// For box-sizing.
@import compass/css3
// `Percentage based widths.
//----------------------------------------------------------------------------------------------------
.width-5,
.width-10,
.width-15,
.width-20,
.width-25,
.width-30,
.width-33,
.width-35,
.width-40,
.width-45,
.width-50,
.width-55,
.width-60,
.width-65,
.width-66,
.width-70,
.width-75,
.width-80,
.width-85,
.width-90,
.width-95,
.width-100
float: left
.width-5
width: 5%
.width-10
width: 10%
.width-15
width: 15%
.width-20
width: 20%
.width-25
width: 25%
.width-30
width: 30%
.width-33
width: 33.33333%
.width-35
width: 35%
.width-40
width: 40%
.width-45
width: 45%
.width-50
width: 50%
.width-55
width: 55%
.width-60
width: 60%
.width-65
width: 65%
.width-66
width: 66.66666%
.width-70
width: 70%
.width-75
width: 75%
.width-80
width: 80%
.width-85
width: 85%
.width-90
width: 90%
.width-95
width: 95%
.width-100
width: 100%
// `Prefix, to add extra columns before.
//----------------------------------------------------------------------------------------------------
.prefix-5
margin-left: 5%
.prefix-10
margin-left: 10%
.prefix-15
margin-left: 15%
.prefix-20
margin-left: 20%
.prefix-25
margin-left: 25%
.prefix-30
margin-left: 30%
.prefix-33
margin-left: 33.33333%
.prefix-35
margin-left: 35%
.prefix-40
margin-left: 40%
.prefix-45
margin-left: 45%
.prefix-50
margin-left: 50%
.prefix-55
margin-left: 55%
.prefix-60
margin-left: 60%
.prefix-65
margin-left: 65%
.prefix-66
margin-left: 66.66666%
.prefix-70
margin-left: 70%
.prefix-75
margin-left: 75%
.prefix-80
margin-left: 80%
.prefix-85
margin-left: 85%
.prefix-90
margin-left: 90%
.prefix-95
margin-left: 95%
// `Suffix, to add extra columns after.
//----------------------------------------------------------------------------------------------------
.suffix-5
margin-right: 5%
.suffix-10
margin-right: 10%
.suffix-15
margin-right: 15%
.suffix-20
margin-right: 20%
.suffix-25
margin-right: 25%
.suffix-30
margin-right: 30%
.suffix-33
margin-right: 33.33333%
.suffix-35
margin-right: 35%
.suffix-40
margin-right: 40%
.suffix-45
margin-right: 45%
.suffix-50
margin-right: 50%
.suffix-55
margin-right: 55%
.suffix-60
margin-right: 60%
.suffix-65
margin-right: 65%
.suffix-66
margin-right: 66.66666%
.suffix-70
margin-right: 70%
.suffix-75
margin-right: 75%
.suffix-80
margin-right: 80%
.suffix-85
margin-right: 85%
.suffix-90
margin-right: 90%
.suffix-95
margin-right: 95%
// `Push & Pull, to rearrange column order (for potential "SEO").
//----------------------------------------------------------------------------------------------------
//
// Push:
//
.push-5
left: 5%
.push-10
left: 10%
.push-15
left: 15%
.push-20
left: 20%
.push-25
left: 25%
.push-30
left: 30%
.push-33
left: 33.33333%
.push-35
left: 35%
.push-40
left: 40%
.push-45
left: 45%
.push-50
left: 50%
.push-55
left: 55%
.push-60
left: 60%
.push-65
left: 65%
.push-66
left: 66.66666%
.push-70
left: 70%
.push-75
left: 75%
.push-80
left: 80%
.push-85
left: 85%
.push-90
left: 90%
.push-95
left: 95%
//
// Pull:
//
.pull-5
left: -5%
.pull-10
left: -10%
.pull-15
left: -15%
.pull-20
left: -20%
.pull-25
left: -25%
.pull-30
left: -30%
.pull-33
left: -33.33333%
.pull-35
left: -35%
.pull-40
left: -40%
.pull-45
left: -45%
.pull-50
left: -50%
.pull-55
left: -55%
.pull-60
left: -60%
.pull-65
left: -65%
.pull-66
left: -66.66666%
.pull-70
left: -70%
.pull-75
left: -75%
.pull-80
left: -80%
.pull-85
left: -85%
.pull-90
left: -90%
.pull-95
left: -95%
// `Don't try this at home, kids...
// Simulate box-sizing support in IE7.
//----------------------------------------------------------------------------------------------------
*:first-child + html
.width-5,
.width-10,
.width-15,
.width-20,
.width-25,
.width-30,
.width-33,
.width-35,
.width-40,
.width-45,
.width-50,
.width-55,
.width-60,
.width-65,
.width-66,
.width-70,
.width-75,
.width-80,
.width-85,
.width-90,
.width-95,
.width-100
padding-left: 0
padding-right: 0
& > *
margin-left: 10px
margin-right: 10px
// This file requires Sass & Compass.
//
// - http://sass-lang.com
// - http://compass-style.org
// For box-sizing.
@import compass/css3
// `Percentage based widths.
//----------------------------------------------------------------------------------------------------
.mobile-width-5,
.mobile-width-10,
.mobile-width-15,
.mobile-width-20,
.mobile-width-25,
.mobile-width-30,
.mobile-width-33,
.mobile-width-35,
.mobile-width-40,
.mobile-width-45,
.mobile-width-50,
.mobile-width-55,
.mobile-width-60,
.mobile-width-65,
.mobile-width-66,
.mobile-width-70,
.mobile-width-75,
.mobile-width-80,
.mobile-width-85,
.mobile-width-90,
.mobile-width-95,
.mobile-width-100
float: left
.mobile-width-5
width: 5%
.mobile-width-10
width: 10%
.mobile-width-15
width: 15%
.mobile-width-20
width: 20%
.mobile-width-25
width: 25%
.mobile-width-30
width: 30%
.mobile-width-33
width: 33.33333%
.mobile-width-35
width: 35%
.mobile-width-40
width: 40%
.mobile-width-45
width: 45%
.mobile-width-50
width: 50%
.mobile-width-55
width: 55%
.mobile-width-60
width: 60%
.mobile-width-65
width: 65%
.mobile-width-66
width: 66.66666%
.mobile-width-70
width: 70%
.mobile-width-75
width: 75%
.mobile-width-80
width: 80%
.mobile-width-85
width: 85%
.mobile-width-90
width: 90%
.mobile-width-95
width: 95%
.mobile-width-100
width: 100%
// `Prefix, to add extra columns before.
//----------------------------------------------------------------------------------------------------
.mobile-prefix-5
margin-left: 5%
.mobile-prefix-10
margin-left: 10%
.mobile-prefix-15
margin-left: 15%
.mobile-prefix-20
margin-left: 20%
.mobile-prefix-25
margin-left: 25%
.mobile-prefix-30
margin-left: 30%
.mobile-prefix-33
margin-left: 33.33333%
.mobile-prefix-35
margin-left: 35%
.mobile-prefix-40
margin-left: 40%
.mobile-prefix-45
margin-left: 45%
.mobile-prefix-50
margin-left: 50%
.mobile-prefix-55
margin-left: 55%
.mobile-prefix-60
margin-left: 60%
.mobile-prefix-65
margin-left: 65%
.mobile-prefix-66
margin-left: 66.66666%
.mobile-prefix-70
margin-left: 70%
.mobile-prefix-75
margin-left: 75%
.mobile-prefix-80
margin-left: 80%
.mobile-prefix-85
margin-left: 85%
.mobile-prefix-90
margin-left: 90%
.mobile-prefix-95
margin-left: 95%
// `Suffix, to add extra columns after.
//----------------------------------------------------------------------------------------------------
.mobile-suffix-5
margin-right: 5%
.mobile-suffix-10
margin-right: 10%
.mobile-suffix-15
margin-right: 15%
.mobile-suffix-20
margin-right: 20%
.mobile-suffix-25
margin-right: 25%
.mobile-suffix-30
margin-right: 30%
.mobile-suffix-33
margin-right: 33.33333%
.mobile-suffix-35
margin-right: 35%
.mobile-suffix-40
margin-right: 40%
.mobile-suffix-45
margin-right: 45%
.mobile-suffix-50
margin-right: 50%
.mobile-suffix-55
margin-right: 55%
.mobile-suffix-60
margin-right: 60%
.mobile-suffix-65
margin-right: 65%
.mobile-suffix-66
margin-right: 66.66666%
.mobile-suffix-70
margin-right: 70%
.mobile-suffix-75
margin-right: 75%
.mobile-suffix-80
margin-right: 80%
.mobile-suffix-85
margin-right: 85%
.mobile-suffix-90
margin-right: 90%
.mobile-suffix-95
margin-right: 95%
// `Push & Pull, to rearrange column order (for potential "SEO").
//----------------------------------------------------------------------------------------------------
//
// Push:
//
.mobile-push-5
left: 5%
.mobile-push-10
left: 10%
.mobile-push-15
left: 15%
.mobile-push-20
left: 20%
.mobile-push-25
left: 25%
.mobile-push-30
left: 30%
.mobile-push-33
left: 33.33333%
.mobile-push-35
left: 35%
.mobile-push-40
left: 40%
.mobile-push-45
left: 45%
.mobile-push-50
left: 50%
.mobile-push-55
left: 55%
.mobile-push-60
left: 60%
.mobile-push-65
left: 65%
.mobile-push-66
left: 66.66666%
.mobile-push-70
left: 70%
.mobile-push-75
left: 75%
.mobile-push-80
left: 80%
.mobile-push-85
left: 85%
.mobile-push-90
left: 90%
.mobile-push-95
left: 95%
//
// Pull:
//
.mobile-pull-5
left: -5%
.mobile-pull-10
left: -10%
.mobile-pull-15
left: -15%
.mobile-pull-20
left: -20%
.mobile-pull-25
left: -25%
.mobile-pull-30
left: -30%
.mobile-pull-33
left: -33.33333%
.mobile-pull-35
left: -35%
.mobile-pull-40
left: -40%
.mobile-pull-45
left: -45%
.mobile-pull-50
left: -50%
.mobile-pull-55
left: -55%
.mobile-pull-60
left: -60%
.mobile-pull-65
left: -65%
.mobile-pull-66
left: -66.66666%
.mobile-pull-70
left: -70%
.mobile-pull-75
left: -75%
.mobile-pull-80
left: -80%
.mobile-pull-85
left: -85%
.mobile-pull-90
left: -90%
.mobile-pull-95
left: -95%
// `Don't try this at home, kids...
// Simulate box-sizing support in IE7.
//----------------------------------------------------------------------------------------------------
*:first-child + html
.mobile-width-5,
.mobile-width-10,
.mobile-width-15,
.mobile-width-20,
.mobile-width-25,
.mobile-width-30,
.mobile-width-33,
.mobile-width-35,
.mobile-width-40,
.mobile-width-45,
.mobile-width-50,
.mobile-width-55,
.mobile-width-60,
.mobile-width-65,
.mobile-width-66,
.mobile-width-70,
.mobile-width-75,
.mobile-width-80,
.mobile-width-85,
.mobile-width-90,
.mobile-width-95,
.mobile-width-100
padding-left: 0
padding-right: 0
& > *
margin-left: 10px
margin-right: 10px
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment