cssgrids-units.mustache revision f53c8927602630269ff996397a763b7e5084d242
f579559b3a14c1f1ef96c372e7626c4733e6ef7dTom Gundersen<div class="intro">
f579559b3a14c1f1ef96c372e7626c4733e6ef7dTom Gundersen <p>Creating a layout using grids requires a <code>yui3-g</code> container
f579559b3a14c1f1ef96c372e7626c4733e6ef7dTom Gundersen and any number of <code>yui3-u-*</code> units.
f579559b3a14c1f1ef96c372e7626c4733e6ef7dTom Gundersen To create a layout that splits the available width into 2 equal parts,
f579559b3a14c1f1ef96c372e7626c4733e6ef7dTom Gundersen use <code>yui3-u-1-2</code> units. The last two numbers "1-2" represents
f579559b3a14c1f1ef96c372e7626c4733e6ef7dTom Gundersen<div class="example newwindow">
f579559b3a14c1f1ef96c372e7626c4733e6ef7dTom Gundersen <a href="cssgrids-units-example.html" target="_blank" class="button">
f579559b3a14c1f1ef96c372e7626c4733e6ef7dTom Gundersen View Example in New Window
f579559b3a14c1f1ef96c372e7626c4733e6ef7dTom Gundersen<p>The only child elements (e.g. direct descendants) of a <code>yui3-g</code> should be <code>yui-3-u-*</code> elements. Any elements within a <code>yui3-g</code> need to be wrapped in a <code>yui3-u-*</code> of some kind, otherwise you may experience side-effects due to the layout system being used.</p>
f579559b3a14c1f1ef96c372e7626c4733e6ef7dTom Gundersen<h3>Basic Markup Structure</h3>
f579559b3a14c1f1ef96c372e7626c4733e6ef7dTom Gundersen<div class="yui3-g">
091a364c802e34a58f3260c9cb5db9b75c62215cTom Gundersen <div class="yui3-u-1-2"></div>
bbf7c04821a71fec67eaf0e7a34d17afc5913c13Tom Gundersen <div class="yui3-u-1-2"></div>
f579559b3a14c1f1ef96c372e7626c4733e6ef7dTom Gundersen<h3>Provide a Content Container</h3>
3be1d7e0c5bf60658d34eb6311d4e77c6803578cTom Gundersen<p>Styling should be applied to a container within the unit, rather than the unit itself. This allows you to set borders, padding, margins (gutters), etc. without worrying about breaking the layout. For this demo we will give the content a class of <code>content</code>, but can be called whatever you like.</p>
f579559b3a14c1f1ef96c372e7626c4733e6ef7dTom Gundersen<div class="yui3-g">
7b77ed8cf36e8eca6017791626044b61ae2d68e7Lennart Poettering <div class="yui3-u-1-2">
50add2909c2e4b13a04d285b058b1c2270137656Tom Gundersen <div class="content">
505f8da7325591defe5f751f328bd26915267602Tom Gundersen <div class="yui3-u-1-2">
505f8da7325591defe5f751f328bd26915267602Tom Gundersen <div class="content">
2ad8416dd057e7e3185169609ca3006e7649f576Zbigniew Jędrzejewski-Szmek<h3>Adding a Gutter</h3>
2ad8416dd057e7e3185169609ca3006e7649f576Zbigniew Jędrzejewski-Szmek<p>All units align edge to edge, with zero space in between. You can add space ("gutter"), by simply adding a margin to your content. This is where additional content styling, such as borders, padding, colors, etc. can be applied as well.</p>
11bf3cced13c885ca215c108cb0bdb7a148520d6Lennart Poettering.yui3-g .content {
11bf3cced13c885ca215c108cb0bdb7a148520d6Lennart Poettering border: 2px solid #000;
11bf3cced13c885ca215c108cb0bdb7a148520d6Lennart Poettering margin-right:10px; /* "column" gutters */
11bf3cced13c885ca215c108cb0bdb7a148520d6Lennart Poettering<h3>Available Units</h3>
11bf3cced13c885ca215c108cb0bdb7a148520d6Lennart Poettering<table class="auto">
11bf3cced13c885ca215c108cb0bdb7a148520d6Lennart Poettering <tr class="odd">
11bf3cced13c885ca215c108cb0bdb7a148520d6Lennart Poettering <th>Class</th>
11bf3cced13c885ca215c108cb0bdb7a148520d6Lennart Poettering <th>Description</th>
11bf3cced13c885ca215c108cb0bdb7a148520d6Lennart Poettering <td><code>.yui3-u</code></td>
11bf3cced13c885ca215c108cb0bdb7a148520d6Lennart Poettering <td>shrinks to fit content (unless given an explicit size)</td>
11bf3cced13c885ca215c108cb0bdb7a148520d6Lennart Poettering <tr class="odd">
11bf3cced13c885ca215c108cb0bdb7a148520d6Lennart Poettering <td><code>.yui3-u-1</code></td>
11bf3cced13c885ca215c108cb0bdb7a148520d6Lennart Poettering <td>fills entire width of container</td>
f579559b3a14c1f1ef96c372e7626c4733e6ef7dTom Gundersen <td><code>.yui3-u-1-2</code></td>
f579559b3a14c1f1ef96c372e7626c4733e6ef7dTom Gundersen <td>fills 1/2 the container</td>
f579559b3a14c1f1ef96c372e7626c4733e6ef7dTom Gundersen <tr class="odd">
f579559b3a14c1f1ef96c372e7626c4733e6ef7dTom Gundersen <td><code>.yui3-u-1-3</code></td>
f579559b3a14c1f1ef96c372e7626c4733e6ef7dTom Gundersen <td>fills 1/3 the container</td>
bbf7c04821a71fec67eaf0e7a34d17afc5913c13Tom Gundersen <td><code>.yui3-u-2-3</code></td>
bbf7c04821a71fec67eaf0e7a34d17afc5913c13Tom Gundersen <td>fills 2/3 the container</td>
f579559b3a14c1f1ef96c372e7626c4733e6ef7dTom Gundersen <tr class="odd">
f579559b3a14c1f1ef96c372e7626c4733e6ef7dTom Gundersen <td><code>.yui3-u-1-4</code></td>
f579559b3a14c1f1ef96c372e7626c4733e6ef7dTom Gundersen <td>fills 1/4 the container</td>
186fe1db20902b6542cee58ba499ced914d687a8Lennart Poettering <td><code>.yui3-u-3-4</code></td>
186fe1db20902b6542cee58ba499ced914d687a8Lennart Poettering <td>fills 3/4 the container</td>
897e184c7d54156357fd204beafe06ab9bd0341aTom Gundersen <tr class="odd">
897e184c7d54156357fd204beafe06ab9bd0341aTom Gundersen <td><code>.yui3-u-1-5</code></td>
f579559b3a14c1f1ef96c372e7626c4733e6ef7dTom Gundersen <td>fills 1/5 the container</td>
1346b1f0388f4100bb3c2a2bb23bc881769c020cTom Gundersen <td><code>.yui3-u-2-5</code></td>
bcbca8291fe3beaed36dd672d8b544840cfc49deTom Gundersen <td>fills 2/5 the container</td>
1346b1f0388f4100bb3c2a2bb23bc881769c020cTom Gundersen <tr class="odd">
60ad0c85e58ea8f546677c1d2e425551f7b96179Tom Gundersen <td><code>.yui3-u-3-5</code></td>
60ad0c85e58ea8f546677c1d2e425551f7b96179Tom Gundersen <td>fills 3/5 the container</td>
505f8da7325591defe5f751f328bd26915267602Tom Gundersen <td><code>.yui3-u-4-5</code></td>
505f8da7325591defe5f751f328bd26915267602Tom Gundersen <td>fills 4/5 the container</td>
505f8da7325591defe5f751f328bd26915267602Tom Gundersen <tr class="odd">
60ad0c85e58ea8f546677c1d2e425551f7b96179Tom Gundersen <td><code>.yui3-u-1-6</code></td>
60ad0c85e58ea8f546677c1d2e425551f7b96179Tom Gundersen <td>fills 1/6 the container</td>
f579559b3a14c1f1ef96c372e7626c4733e6ef7dTom Gundersen <td><code>.yui3-u-5-6</code></td>
d5099efc47d4e6ac60816b5381a5f607ab03f06eMichal Schmidt <td>fills 5/6 the container</td>