diff --git a/README b/README new file mode 100644 index 0000000..fa7a9d2 --- /dev/null +++ b/README @@ -0,0 +1,3 @@ +README + +http://www.ixda.org/discuss.php?post=23298 diff --git a/liquid.css b/liquid.css new file mode 100644 index 0000000..b8b60b4 --- /dev/null +++ b/liquid.css @@ -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; +}