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; }
--
You received this message because you are subscribed to the Google Groups
"Blueprint CSS" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/blueprintcss?hl=en.
