Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

165 lines (132 sloc) 4.205 kb
// gg 0.2.0
// Copyright (c) 2012 Evan Moran
// gg is freely distributable under the MIT license.
// opensource.org/licenses/mit-license
$ggColumnWidth = 80px
$ggColumnCount = 12
$ggBorderWidth = 20px
$ggBorderWidthPercent = 2.5%
$ggPercents = 100 75 66 50 33 25
$ggLiquidPercents = 100 75 66.66 50 33.33 25
$ggColumns = 12 9 8 6 4 3
// General create grid method
ggCreateGrid(gridWidth, borderWidth)
columnWidth = gridWidth / $ggColumnCount
.gg
width: gridWidth - borderWidth
// .gg#
for c, ix in $ggColumns
percent = $ggPercents[ix]
.gg{percent}
width: (columnWidth * c) - borderWidth
// .gg# .gg#
for c2, ix2 in $ggColumns
columns = c * c2 / $ggColumnCount
percent = $ggPercents[ix2]
.gg{percent}
width: floor(columnWidth * columns - borderWidth)
// .gg# .o#
.o{percent}
margin-left: floor(columnWidth * columns)
// .o#
for c, ix in $ggColumns
.o{$ggPercents[ix]}
margin-left: floor(columnWidth * c)
// .row
.row
margin-right: -1 * borderWidth
ggCreateLiquidGrid(borderWidthPercent, borderWidth)
// .gg#
for c, ix in $ggColumns
percent = $ggPercents[ix]
liquidPercent = $ggLiquidPercents[ix]
.gg{percent}
width: liquidPercent - borderWidthPercent
// .gg# .o#
.o{percent}
margin-left: unit(liquidPercent, "%")
// -----------------------------------------------------
// mobile first!
// -----------------------------------------------------
.gg
position: relative
margin: 0 auto
padding: 10px
.gg100, .gg75, .gg66, .gg50, .gg33, .gg25
width: 100%
display: block
.row
display: block
zoom: 1
&:before
&:after
width: 0
overflow: hidden
// Clearfix
content: "\0020"
display: block
height: 0
clear: both
visibility: hidden
&:after
clear: both
// Help people who get confused...
.row
>.row
margin-right: 0
// -----------------------------------------------------
// Not phone
// -----------------------------------------------------
@media only screen and (min-width: 740px)
.gg
padding: $ggBorderWidth
.gg100, .gg75, .gg66, .gg50, .gg33, .gg25,
.gel .gg100, .gel .gg75, .gel .gg66, .gel .gg50, .gel .gg33, .gel .gg25
margin-right: $ggBorderWidth
margin-bottom: $ggBorderWidth
float: left
display: inline
// -----------------------------------------------------
// phone
// -----------------------------------------------------
@media only screen and (max-width: 739px)
.gel
.gg100, .gg75, .gg66, .gg50, .gg33, .gg25
margin-right: $ggBorderWidthPercent
margin-bottom: $ggBorderWidthPercent
float: left
display: inline
.row, &.row
margin-right: unit(-1 * $ggBorderWidthPercent, "%")
ggCreateLiquidGrid(2.5%, 10px)
// -----------------------------------------------------
// tablet
// -----------------------------------------------------
@media only screen and (min-width: 740px) and (max-width: 980px)
ggCreateGrid(720px, $ggBorderWidth)
// -----------------------------------------------------
// desktop
// -----------------------------------------------------
@media only screen and (min-width: 981px)
ggCreateGrid(960px, $ggBorderWidth)
// -----------------------------------------------------
// vente (comment in if you care...)
// -----------------------------------------------------
// @media only screen and (min-width: 1200px)
// ggCreateGrid(1200px, $ggBorderWidth)
// -----------------------------------------------------
// jumbo (comment in if you care...)
// -----------------------------------------------------
// @media only screen and (min-width: 1440px)
// ggCreateGrid(1440px, $ggBorderWidth)
// -----------------------------------------------------
// Resolution breakdown
// -----------------------------------------------------
// 480 (missing 1/9)
// 720 (all) (tablet)
// 768 (missing 1/5, 1/9, 1/10)
// 960 (missing 1/9) (desktop)
// 1080 (missing 1/16)
// 1200 (missing 1/9) (vente)
// 1280 (missing 1/3, 1/9)
// 1440 (all) (jumbo)
Jump to Line
Something went wrong with that request. Please try again.