Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 6e43fba
Showing
2 changed files
with
200 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -0,0 +1,3 @@ | |||
README | |||
|
|||
http://www.ixda.org/discuss.php?post=23298 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -0,0 +1,197 @@ | |||
/* -------------------------------------------------------------- | |||
liquid.css | |||
* Sets up an easy-to-use grid of 24 columns that stretch | |||
to the window width or can also be fixed width. | |||
Liquid grid work by: | |||
* Ben Listwon | |||
* David Bedingfield | |||
* Andrei Michael Herasimchuk | |||
Involution Studios, http://www.involutionstudios.com | |||
----- | |||
grid.css | |||
* Sets up an easy-to-use grid of 24 columns. | |||
Based on work by: | |||
* Nathan Borror [playgroundblues.com] | |||
* Jeff Croft [jeffcroft.com] | |||
* Christian Metts [mintchaos.com] | |||
* Khoi Vinh [subtraction.com] | |||
----- | |||
By default, the grid is 80% of window width, with 24 columns. | |||
To make the grid fixed, simply change the .container width | |||
property to a pixel value. e.g., 960px. | |||
-------------------------------------------------------------- */ | |||
|
|||
/* A container should group your entire grid. */ | |||
.container { | |||
min-width: 950px; | |||
width: 80%; | |||
margin: 0 auto; | |||
overflow: hidden; | |||
} | |||
|
|||
/* A block should group all your columns per row stack. */ | |||
.block {overflow: hidden;} | |||
|
|||
|
|||
/* Columns | |||
-------------------------------------------------------------- */ | |||
|
|||
/* Use this class together with the .span-x classes | |||
to create any composition of columns in a layout. */ | |||
.column {float: left;} | |||
|
|||
/* The last column in a row needs this class. */ | |||
.last { margin-right: 0; } | |||
|
|||
/* Use these classes to set the width of a column. */ | |||
.span-1 { width: 4%; } | |||
.span-2 { width: 8%; } | |||
.span-3 { width: 12%; } | |||
.span-4 { width: 16%; } | |||
.span-5 { width: 20%; } | |||
.span-6 { width: 25%; } | |||
.span-7 { width: 29%; } | |||
.span-8 { width: 33%; } | |||
.span-9 { width: 37%; } | |||
.span-10 { width: 41%; } | |||
.span-11 { width: 45%; } | |||
.span-12 { width: 50%; } | |||
.span-13 { width: 54%; } | |||
.span-14 { width: 58%; } | |||
.span-15 { width: 62%; } | |||
.span-16 { width: 66%; } | |||
.span-17 { width: 70%; } | |||
.span-18 { width: 75%; } | |||
.span-19 { width: 79%; } | |||
.span-20 { width: 83%; } | |||
.span-21 { width: 87%; } | |||
.span-22 { width: 91%; } | |||
.span-23 { width: 95%; } | |||
.span-24 { width: 100%; margin-right: 0; } | |||
|
|||
.span-1>div, .span-2>div, .span-3>div, .span-4>div, | |||
.span-5>div, .span-6>div, .span-7>div, .span-8>div, | |||
.span-9>div, .span-10>div, .span-11>div, .span-12>div, | |||
.span-13>div, .span-14>div, .span-15>div, .span-16>div, | |||
.span-17>div, .span-18>div, .span-19>div, .span-20>div, | |||
.span-21>div, .span-22>div, .span-23>div, .span-24>div { | |||
margin: 0 0.833em 0 0; | |||
overflow: hidden; | |||
} | |||
|
|||
/* Add these to a column to append empty cols. */ | |||
.append-1 { padding-right: 4%; } | |||
.append-2 { padding-right: 8%; } | |||
.append-3 { padding-right: 12%; } | |||
.append-4 { padding-right: 16%; } | |||
.append-5 { padding-right: 20%; } | |||
.append-6 { padding-right: 25%; } | |||
.append-7 { padding-right: 29%; } | |||
.append-8 { padding-right: 33%; } | |||
.append-9 { padding-right: 37%; } | |||
.append-10 { padding-right: 41%; } | |||
.append-11 { padding-right: 45%; } | |||
.append-12 { padding-right: 50%; } | |||
.append-13 { padding-right: 54%; } | |||
.append-14 { padding-right: 58%; } | |||
.append-15 { padding-right: 62%; } | |||
.append-16 { padding-right: 66%; } | |||
.append-17 { padding-right: 70%; } | |||
.append-18 { padding-right: 75%; } | |||
.append-19 { padding-right: 79%; } | |||
.append-20 { padding-right: 83%; } | |||
.append-21 { padding-right: 87%; } | |||
.append-22 { padding-right: 91%; } | |||
.append-23 { padding-right: 95%; } | |||
|
|||
/* Add these to a column to prepend empty cols. */ | |||
.prepend-1 { padding-left: 4%; } | |||
.prepend-2 { padding-left: 8%; } | |||
.prepend-3 { padding-left: 12%; } | |||
.prepend-4 { padding-left: 16%; } | |||
.prepend-5 { padding-left: 20%; } | |||
.prepend-6 { padding-left: 25%; } | |||
.prepend-7 { padding-left: 29%; } | |||
.prepend-8 { padding-left: 33%; } | |||
.prepend-9 { padding-left: 37%; } | |||
.prepend-10 { padding-left: 41%; } | |||
.prepend-11 { padding-left: 45%; } | |||
.prepend-12 { padding-left: 50%; } | |||
.prepend-13 { padding-left: 54%; } | |||
.prepend-14 { padding-left: 58%; } | |||
.prepend-15 { padding-left: 62%; } | |||
.prepend-16 { padding-left: 66%; } | |||
.prepend-17 { padding-left: 70%; } | |||
.prepend-18 { padding-left: 75%; } | |||
.prepend-19 { padding-left: 79%; } | |||
.prepend-20 { padding-left: 83%; } | |||
.prepend-21 { padding-left: 87%; } | |||
.prepend-22 { padding-left: 91%; } | |||
.prepend-23 { padding-left: 95%; } | |||
|
|||
|
|||
/* Border on right hand side of a column. */ | |||
.border { | |||
border-right: 1px solid #eee; | |||
} | |||
|
|||
/* Border with more whitespace, spans one column. */ | |||
.colborder { | |||
padding-right: 2%; | |||
margin-right: 2%; | |||
border-right: 1px solid #eee; | |||
} | |||
|
|||
.colborder>div { | |||
margin: 0; | |||
} | |||
|
|||
|
|||
/* Use these classes on an element to push it into the | |||
next column, or to pull it into the previous column. */ | |||
|
|||
.pull-1 { margin-left: -3.333em; } | |||
.pull-2 { margin-left: -6.666em; } | |||
.pull-3 { margin-left: -10em; } | |||
.pull-4 { margin-left: -13.333em; } | |||
|
|||
.push-0 { margin: 0 0 0 1.5em; } | |||
.push-1 { margin: 0 -3.333em 0 1.5em; } | |||
.push-2 { margin: 0 -6.666em 0 1.5em; } | |||
.push-3 { margin: 0 -10em 0 1.5em; } | |||
.push-4 { margin: 0 -13.333em 0 1.5em; } | |||
.push-0, .push-1, .push-2, .push-3, .push-4 { float: right; } | |||
|
|||
|
|||
/* Misc classes and elements | |||
-------------------------------------------------------------- */ | |||
|
|||
/* Use a .box to create a padded box inside a column. */ | |||
.box { | |||
padding: 1.5em; | |||
margin-bottom: 1.5em; | |||
background: #eee; | |||
} | |||
|
|||
/* Use this to create a horizontal ruler across a column. */ | |||
hr { | |||
background: #ddd; | |||
color: #ddd; | |||
width: 100%; | |||
height: 0.083em; | |||
margin: 0 0 1.583em; | |||
border: none; | |||
} | |||
hr.space { | |||
background: #fff; | |||
color: #fff; | |||
} |