blueprint css liquidgrid to 1.1

[adminnu]

Awakens a refined liquid Blueprint with v0.6 to v1.1. I would like to take advantage of grid.css 1.1 for rubber makeup.

[adminnu]

Modified liquid under the blueprint 1.1 I would like to ask you, and if there is an opportunity to include it in the main grid.css And pointing out for example class = "container liquid" would include rubber makeup.

I really hope to turn this plug-in base package plug-ins. Since the use yii, hotelo to the presence of rubber makeup of our main content.

/* --------------------------------------------------------------

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: 90%; margin: 0 auto; overflow: hidden; }

/* Use this class on any .span / container to see the grid. */ .showgrid { background: url(src/grid.png); }

/* Sets up basic grid floating and margin. / .column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 { float: left; margin-right: 1.05%; / 10px */ }

/* 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: 3.16%;} / 30px / .span-2 {width: 7.37%;} / 70px / .span-3 {width: 11.58%;} / 110px / .span-4 {width: 15.79%;} / 150px / .span-5 {width: 20%;} / 190px / .span-6 {width: 24.21%;} / 230px / .span-7 {width: 28.41%;} / 270px (reduced by .01%) / .span-8 {width: 32.63%;} / 310px / .span-9 {width: 36.84%;} / 350px / .span-10 {width: 41.05%;} / 390px / .span-11 {width: 45.26%;} / 430px / .span-12 {width: 49.47%;} / 470px / .span-13 {width: 53.68%;} / 510px / .span-14 {width: 57.89%;} / 550px / .span-15 {width: 62.11%;} / 590px / .span-16 {width: 66.32%;} / 630px / .span-17 {width: 70.53%;} / 670px / .span-18 {width: 74.74%;} / 710px / .span-19 {width: 78.94%;} / 750px (reduced by .01%) / .span-20 {width: 83.16%;} / 790px / .span-21 {width: 87.37%;} / 830px / .span-22 {width: 91.58%;} / 870px / .span-23 {width: 95.79%;} / 910px / .span-24 {width:100%; margin-right:0;} / 950px */

/* Use these classes to set the width of an input. / / input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 { border-left-width: 1px; border-right-width: 1px; padding-left: 5px; padding-right: 5px; } */

/* Use these classes to set the width of an input. / input.span-1, textarea.span-1 { width: 1.89%; } / 18px / input.span-2, textarea.span-2 { width: 6.11%; } / 58px / input.span-3, textarea.span-3 { width: 10.32%; } / 98px / input.span-4, textarea.span-4 { width: 14.53%; } / 138px / input.span-5, textarea.span-5 { width: 18.74%; } / 178px / input.span-6, textarea.span-6 { width: 22.95%; } / 218px / input.span-7, textarea.span-7 { width: 27.16%; } / 258px / input.span-8, textarea.span-8 { width: 31.37%; } / 298px / input.span-9, textarea.span-9 { width: 35.58%; } / 338px / input.span-10, textarea.span-10 { width: 39.79%; } / 378px / input.span-11, textarea.span-11 { width: 44%; } / 418px / input.span-12, textarea.span-12 { width: 48.21%; } / 458px / input.span-13, textarea.span-13 { width: 52.42%; } / 498px / input.span-14, textarea.span-14 { width: 56.63%; } / 538px / input.span-15, textarea.span-15 { width: 60.84%; } / 578px / input.span-16, textarea.span-16 { width: 65.05%; } / 618px / input.span-17, textarea.span-17 { width: 69.26%; } / 658px / input.span-18, textarea.span-18 { width: 73.47%; } / 698px / input.span-19, textarea.span-19 { width: 77.68%; } / 738px / input.span-20, textarea.span-20 { width: 81.89%; } / 778px / input.span-21, textarea.span-21 { width: 86.11%; } / 818px / input.span-22, textarea.span-22 { width: 90.32%; } / 858px / input.span-23, textarea.span-23 { width: 94.53%; } / 898px / input.span-24, textarea.span-24 { width: 98.74%; } / 938px */

/* Add these to a column to append empty cols. */

.append-1 { padding-right: 4.21%;} /* 40px / .append-2 { padding-right: 8.42%;} / 80px / .append-3 { padding-right: 12.63%;} / 120px / .append-4 { padding-right: 16.84%;} / 160px / .append-5 { padding-right: 21.05%;} / 200px / .append-6 { padding-right: 25.26%;} / 240px / .append-7 { padding-right: 29.47%;} / 280px / .append-8 { padding-right: 33.68%;} / 320px / .append-9 { padding-right: 37.89%;} / 360px / .append-10 { padding-right: 42.11%;} / 400px / .append-11 { padding-right: 46.32%;} / 440px / .append-12 { padding-right: 50.53%;} / 480px / .append-13 { padding-right: 54.74%;} / 520px / .append-14 { padding-right: 58.95%;} / 560px / .append-15 { padding-right: 63.16%;} / 600px / .append-16 { padding-right: 67.37%;} / 640px / .append-17 { padding-right: 71.58%;} / 680px / .append-18 { padding-right: 75.79%;} / 720px / .append-19 { padding-right: 80%;} / 760px / .append-20 { padding-right: 84.21%;} / 800px / .append-21 { padding-right: 88.42%;} / 840px / .append-22 { padding-right: 92.63%;} / 880px / .append-23 { padding-right: 96.84%;} / 920px */

/* Add these to a column to prepend empty cols. */

.prepend-1 { padding-left: 4.21%;} /* 40px / .prepend-2 { padding-left: 8.42%;} / 80px / .prepend-3 { padding-left: 12.63%;} / 120px / .prepend-4 { padding-left: 16.84%;} / 160px / .prepend-5 { padding-left: 21.05%;} / 200px / .prepend-6 { padding-left: 25.26%;} / 240px / .prepend-7 { padding-left: 29.47%;} / 280px / .prepend-8 { padding-left: 33.68%;} / 320px / .prepend-9 { padding-left: 37.89%;} / 360px / .prepend-10 { padding-left: 42.11%;} / 400px / .prepend-11 { padding-left: 46.32%;} / 440px / .prepend-12 { padding-left: 50.53%;} / 480px / .prepend-13 { padding-left: 54.74%;} / 520px / .prepend-14 { padding-left: 58.95%;} / 560px / .prepend-15 { padding-left: 63.16%;} / 600px / .prepend-16 { padding-left: 67.37%;} / 640px / .prepend-17 { padding-left: 71.58%;} / 680px / .prepend-18 { padding-left: 75.79%;} / 720px / .prepend-19 { padding-left: 80%;} / 760px / .prepend-20 { padding-left: 84.21%;} / 800px / .prepend-21 { padding-left: 88.42%;} / 840px / .prepend-22 { padding-left: 92.63%;} / 880px / .prepend-23 { padding-left: 96.84%;} / 920px */

/* Border on right hand side of a column. / .border { padding-right: 0.42%; / 4px / margin-right: 0.53%; / 5px */ border-right: 1px solid #ddd; }

/* Border with more whitespace, spans one column. / .colborder { padding-right: 2.53%; / 24px / margin-right: 2.63%; / 25px */ border-right: 1px solid #ddd; }

/* Use these classes on an element to push it into the next column, or to pull it into the previous column. */

/* PeteC: Used widths without margins (i.e. add 10 to each of values below) to make it work */

.pull-1 { margin-left: -3.16%; } /* -40px / .pull-2 { margin-left: -7.37%; } / -80px / .pull-3 { margin-left: -11.58%;} / -120px / .pull-4 { margin-left: -15.79%;} / -160px / .pull-5 { margin-left: -20%; } / -200px / .pull-6 { margin-left: -24.21%;} / -240px / .pull-7 { margin-left: -28.41%;} / -280px / .pull-8 { margin-left: -32.63%;} / -320px / .pull-9 { margin-left: -36.84%;} / -360px / .pull-10 { margin-left: -41.05%;} / -400px / .pull-11 { margin-left: -45.26%;} / -440px / .pull-12 { margin-left: -49.47%;} / -480px / .pull-13 { margin-left: -53.68%;} / -520px / .pull-14 { margin-left: -57.89%;} / -560px / .pull-15 { margin-left: -62.11%;} / -600px / .pull-16 { margin-left: -66.32%;} / -640px / .pull-17 { margin-left: -70.53%;} / -680px / .pull-18 { margin-left: -74.74%;} / -720px / .pull-19 { margin-left: -78.94%;} / -760px / .pull-20 { margin-left: -83.16%;} / -800px / .pull-21 { margin-left: -87.37%;} / -840px / .pull-22 { margin-left: -91.58%;} / -880px / .pull-23 { margin-left: -95.79%;} / -920px / .pull-24 { margin-left: -100%; } / -960px */

/* PeteC: Added because I can't see how this could work otherwise */ .pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float: left; position:relative;}

.push-1 { margin: 0 -4.21% 1.5em 4.21%; } /* 0 -40px 1.5em 40px; / .push-2 { margin: 0 -8.42% 1.5em 8.42%; } / 0 -80px 1.5em 80px; / .push-3 { margin: 0 -12.63% 1.5em 12.63%; } / 0 -120px 1.5em 120px / .push-4 { margin: 0 -16.84% 1.5em 16.84%; } / 0 -160px 1.5em 160px / .push-5 { margin: 0 -21.05% 1.5em 21.05%; } / 0 -200px 1.5em 200px / .push-6 { margin: 0 -25.26% 1.5em 25.26%; } / 0 -240px 1.5em 240px / .push-7 { margin: 0 -29.47% 1.5em 29.47%; } / 0 -280px 1.5em 280px / .push-8 { margin: 0 -33.68% 1.5em 33.68%; } / 0 -320px 1.5em 320px / .push-9 { margin: 0 -37.89% 1.5em 37.89%; } / 0 -360px 1.5em 360px / .push-10 { margin: 0 -42.11% 1.5em 42.11%; } / 0 -400px 1.5em 400px / .push-11 { margin: 0 -46.32% 1.5em 46.32%; } / 0 -440px 1.5em 440px / .push-12 { margin: 0 -50.53% 1.5em 50.53%; } / 0 -480px 1.5em 480px / .push-13 { margin: 0 -54.74% 1.5em 54.74%; } / 0 -520px 1.5em 520px / .push-14 { margin: 0 -58.95% 1.5em 58.95%; } / 0 -560px 1.5em 560px / .push-15 { margin: 0 -63.16% 1.5em 63.16%; } / 0 -600px 1.5em 600px / .push-16 { margin: 0 -67.37% 1.5em 67.37%; } / 0 -640px 1.5em 640px / .push-17 { margin: 0 -71.58% 1.5em 71.58%; } / 0 -680px 1.5em 680px / .push-18 { margin: 0 -75.79% 1.5em 75.79%; } / 0 -720px 1.5em 720px / .push-19 { margin: 0 -80% 1.5em 80%; } / 0 -760px 1.5em 760px / .push-20 { margin: 0 -84.21% 1.5em 84.21%; } / 0 -800px 1.5em 800px / .push-21 { margin: 0 -88.42% 1.5em 88.42%; } / 0 -840px 1.5em 840px / .push-22 { margin: 0 -92.63% 1.5em 92.63%; } / 0 -880px 1.5em 880px / .push-23 { margin: 0 -96.84% 1.5em 96.84%; } / 0 -920px 1.5em 920px / .push-24 { margin: 0 -100% 1.5em 100%; } / 0 -960px 1.5em 960px */

.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float: left; position:relative;}

/* Misc classes and elements -------------------------------------------------------------- */

/* In case you need to add a gutter above/below an element */ div.prepend-top, .prepend-top { margin-top:1.5em; } div.append-bottom, .append-bottom { margin-bottom:1.5em; }

/* Use a .box to create a padded box inside a column. */ .box { padding: 1.5em; margin-bottom: 1.5em; background: #e5eCf9; }

/* Use this to create a horizontal ruler across a column. / hr { background: #ddd; color: #ddd; clear: both; float: none; width: 100%; height: 0.083em; / 1px / margin: 0 0 1.583em; / 0 0 17px; */ border: none; }

hr.space { background: #fff; color: #fff; visibility: hidden; }

/* Clearing floats without extra markup Based on How To Clear Floats Without Structural Markup by PiE [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; overflow:hidden; } .clearfix, .container {display: block;}

/* Regular clearing apply to column that should drop below previous ones. */

.clear { clear:both; }