From 9e7d0403e8756a90ace03e48d77552bf4ecf6c1d Mon Sep 17 00:00:00 2001 From: larrybotha Date: Tue, 5 Feb 2013 10:39:29 +0200 Subject: [PATCH] Update article.html --- article.html | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/article.html b/article.html index c4f1a46..d047ffb 100755 --- a/article.html +++ b/article.html @@ -102,7 +102,7 @@

Getting Gridpak

Breaking Gridpak Down

One of the best features of Gridpak is that you'll have an incredibly robust and accurate grid with just a few lines of CSS. -Gridpak's strength comes from leveraging the awesome power of setting all your elements to box-sizing: border-box. With border-box we can have two 50% columns always sit on the same line, accomodating whatever borders we apply to them. +Gridpak's strength comes from leveraging the awesome power of setting all your elements to box-sizing: border-box. With border-box we can have two 50% columns always sit on the same line, accommodating whatever borders we apply to them. With some clever CSS we can use transparent borders for gutters, giving us wonderfully accurate and managable columns:
.row {
@@ -247,10 +247,10 @@ 
Namespacing Viewport Specific Columns
* IE8 grid * This grid will only work in IE8, and at all widths */ -.ie8 .span_1_vpalpha { ... } -.ie8 .span_2_vpalpha { ... } +.ie8 .span_1_ie8 { ... } +.ie8 .span_2_ie8 { ... } ... -.ie8 .span_1_vpalpha { ... } +.ie8 .span_1_ie8 { ... } /* * VIEWPORT ALPHA @@ -301,10 +301,10 @@

Usage

IE8 -> 4 spans + 8 spans --> <div class="row cf"> - <div class="col span-3-vpalpha span-6-vpbeta span-4-vpgamma span-4-ie8"> + <div class="col span_3_vpalpha span_6_vpbeta span_4_vpgamma span_4_ie8"> content... </div> - <div class="col span-9-vpalpha span-6-vpbeta span-8-vpgamma span-8-ie8"> + <div class="col span_9_vpalpha span_6_vpbeta span_8_vpgamma span_8_ie8"> content... </div> </div>
@@ -316,23 +316,23 @@

Usage

of the parent column. --> <div class="row cf"> - <div class="col span-6-vpalpha span-6-ie8"> + <div class="col span_6_vpalpha span_6_ie8"> <div class="row cf"> - <div class="col span-6-vpalpha span-6-ie8"> + <div class="col span_6_vpalpha span_6_ie8"> content... </div> - <div class="col span-6-vpalpha span-6-ie8"> + <div class="col span_6_vpalpha span_6_ie8"> content... </div> </div> </div> - <div class="col span-6-vpalpha span-6-ie8"> + <div class="col span_6_vpalpha span_6_ie8"> <div class="row cf"> - <div class="col span-6-vpalpha span-6-ie8"> + <div class="col span_6_vpalpha span_6_ie8"> content... </div> - <div class="col span-6-vpalpha span-6-ie8"> + <div class="col span_6_vpalpha span_6_ie8"> content... </div> </div> @@ -357,4 +357,4 @@

Conclusion

Until then, I'm happy to have come across a solution which I have found to give me all the flexibility in a grid layout I could ask for. -Give me a shout in the comments if you have any questions or if you've come across useful tools for creating powerful grid systems. \ No newline at end of file +Give me a shout in the comments if you have any questions or if you've come across useful tools for creating powerful grid systems.