cssgrids-units.mustache revision d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<div class="intro">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <p>Creating a layout using grids requires a <code>yui3-g</code> container and any number of <code>yui3-u-*</code> units. To create a layout that splits the units 50/50, use <code>yui3-u-1-2</code> units.</p>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<div class="example newwindow">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <a href="cssgrids-units-example.html" target="_blank" class="button">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney View Example in New Window
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<h4>Note</h4>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<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>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<h3>Basic Markup Structure</h3>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<div class="yui3-g">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="yui3-u-1-2"></div>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="yui3-u-1-2"></div>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<h3>Provide a Content Container</h3>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<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>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<div class="yui3-g">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="yui3-u-1-2">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="content">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="yui3-u-1-2">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="content">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<h3>Adding a Gutter</h3>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<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>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney.yui3-g .content {
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney border: 2px solid #000;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney margin-right:10px; /* "column" gutters */
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney padding: 1em;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<h3>Available Units</h3>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<table class="auto">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <tr class="odd">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <th>Class</th>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <th>Description</th>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>shrinks to fit content (unless given an explicit size)</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <tr class="odd">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-1</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>fills entire width of container</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-1-2</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>fills 1/2 the container</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <tr class="odd">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-1-3</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>fills 1/3 the container</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-2-3</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>fills 2/3 the container</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <tr class="odd">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-1-4</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>fills 1/4 the container</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-3-4</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>fills 3/4 the container</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <tr class="odd">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-1-5</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>fills 1/5 the container</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-2-5</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>fills 2/5 the container</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <tr class="odd">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-3-5</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>fills 3/5 the container</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-4-5</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>fills 4/5 the container</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <tr class="odd">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-1-6</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>fills 1/6 the container</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-5-6</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>fills 5/6 the container</td>