Skip to content

Commit

Permalink
Update article.html
Browse files Browse the repository at this point in the history
  • Loading branch information
larrybotha committed Feb 5, 2013
1 parent 8632d46 commit 9e7d040
Showing 1 changed file with 13 additions and 13 deletions.
26 changes: 13 additions & 13 deletions article.html
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ <h4>Getting Gridpak</h4>
<h4>Breaking Gridpak Down</h4>
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 <a href="http://paulirish.com/2012/box-sizing-border-box-ftw/"><code>box-sizing: border-box</code></a>. With <code>border-box</code> 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 <a href="http://paulirish.com/2012/box-sizing-border-box-ftw/"><code>box-sizing: border-box</code></a>. With <code>border-box</code> 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:
<pre class="brush:css">.row {
Expand Down Expand Up @@ -247,10 +247,10 @@ <h5>Namespacing Viewport Specific Columns</h5>
* 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
Expand Down Expand Up @@ -301,10 +301,10 @@ <h3>Usage</h3>
IE8 -&gt; 4 spans + 8 spans
--&gt;
&lt;div class="row cf"&gt;
&lt;div class="col span-3-vpalpha span-6-vpbeta span-4-vpgamma span-4-ie8"&gt;
&lt;div class="col span_3_vpalpha span_6_vpbeta span_4_vpgamma span_4_ie8"&gt;
content...
&lt;/div&gt;
&lt;div class="col span-9-vpalpha span-6-vpbeta span-8-vpgamma span-8-ie8"&gt;
&lt;div class="col span_9_vpalpha span_6_vpbeta span_8_vpgamma span_8_ie8"&gt;
content...
&lt;/div&gt;
&lt;/div&gt;</pre>
Expand All @@ -316,23 +316,23 @@ <h3>Usage</h3>
of the parent column.
--&gt;
&lt;div class="row cf"&gt;
&lt;div class="col span-6-vpalpha span-6-ie8"&gt;
&lt;div class="col span_6_vpalpha span_6_ie8"&gt;
&lt;div class="row cf"&gt;
&lt;div class="col span-6-vpalpha span-6-ie8"&gt;
&lt;div class="col span_6_vpalpha span_6_ie8"&gt;
content...
&lt;/div&gt;
&lt;div class="col span-6-vpalpha span-6-ie8"&gt;
&lt;div class="col span_6_vpalpha span_6_ie8"&gt;
content...
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class="col span-6-vpalpha span-6-ie8"&gt;
&lt;div class="col span_6_vpalpha span_6_ie8"&gt;
&lt;div class="row cf"&gt;
&lt;div class="col span-6-vpalpha span-6-ie8"&gt;
&lt;div class="col span_6_vpalpha span_6_ie8"&gt;
content...
&lt;/div&gt;
&lt;div class="col span-6-vpalpha span-6-ie8"&gt;
&lt;div class="col span_6_vpalpha span_6_ie8"&gt;
content...
&lt;/div&gt;
&lt;/div&gt;
Expand All @@ -357,4 +357,4 @@ <h3>Conclusion</h3>

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.
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.

0 comments on commit 9e7d040

Please sign in to comment.