index.mustache revision e4af7be013110f3f5aa4d29aaa1d21dfe58466d2
0c27b3fe77ac1d5094ba3521e8142d9e7973133fMark Andrews <div class="intro">
0c27b3fe77ac1d5094ba3521e8142d9e7973133fMark Andrews<strong>Note:</strong> The file "grids.css" is deprecated, use "cssgrids.css" instead.
0c27b3fe77ac1d5094ba3521e8142d9e7973133fMark Andrews <p>The foundational CSS Grids provides a simple system for layout out content. The basic components are "grids" and "units". A "grid" (<code>yui3-g</code>) contains one or more "units" (<code>yui3-u</code>). The type of "unit" chosen describes how it should be sized (e.g. "yui3-u-1-2" takes up half the grid, "yui3-u-1-3" takes up one-third, et cetera). The only constrains for YUI3 Grids are that all "units" are children of a "grid". All you need to do is define a grid, one or more units inside it, and specify widths for them. Then stack and nest as required.</p>
9769d3146777ca71af80b459ecec1ef8e2d05950Andreas Gustafsson <h2 id="start">Getting Started</h2>
9769d3146777ca71af80b459ecec1ef8e2d05950Andreas Gustafsson <h3 id="dependencies">Include Dependencies</h3>
9769d3146777ca71af80b459ecec1ef8e2d05950Andreas Gustafsson <p>To use CSS Grids, include the following source file in your web page with the link element.</p>
9769d3146777ca71af80b459ecec1ef8e2d05950Andreas Gustafsson<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/{{yuiVersion}}/build/cssgrids/grids-min.css">
0f7bbb64ea71e1226c34fb433731eebf4b395333Andreas Gustafsson <h2 id="using">Using YUI CSS Grids</h2>
9769d3146777ca71af80b459ecec1ef8e2d05950Andreas Gustafsson <h3>Unit Sizes</h3>
d8417b5f3406f4ace0f3bdb228b05a7b701976d6Andreas Gustafsson <p>All of the sizing for YUI Grids is done using "units". Units can be subdivided up to 1/24 of the available width. The following table gives the various unit classes that can be applied.</p>
d8417b5f3406f4ace0f3bdb228b05a7b701976d6Andreas Gustafsson <table class="auto">
59ddb53fd74be6c4d76536e45465f34f1a08b834Andreas Gustafsson <th>Class</th>
59ddb53fd74be6c4d76536e45465f34f1a08b834Andreas Gustafsson <th>Description</th>
59c0977bedf9af5a47682655d36c6000ac1a3a4aJeremy Reed <td><code>.yui3-u</code></td>
59c0977bedf9af5a47682655d36c6000ac1a3a4aJeremy Reed <td>Shrinks to fit unless a width is applied.</td>
59c0977bedf9af5a47682655d36c6000ac1a3a4aJeremy Reed <td><code>.yui3-u-1</code></td>
59c0977bedf9af5a47682655d36c6000ac1a3a4aJeremy Reed <td>Fills 100% of the available width.</td>
59c0977bedf9af5a47682655d36c6000ac1a3a4aJeremy Reed <td><code>.yui3-u-1-2</code></td>
59c0977bedf9af5a47682655d36c6000ac1a3a4aJeremy Reed <td>Fills 1/2 of available width.</td>
35b61b8fb1f377ec9b68bbc8e4e43fbd2756a04dAndreas Gustafsson <td><code>.yui3-u-1-3</code></td>
35b61b8fb1f377ec9b68bbc8e4e43fbd2756a04dAndreas Gustafsson <td>Fills 1/3 of available width.</td>
35b61b8fb1f377ec9b68bbc8e4e43fbd2756a04dAndreas Gustafsson <td><code>.yui3-u-2-3</code></td>
a9568c0abbda42b95482d581647de0a950ed8438Andreas Gustafsson <td>Fills 2/3 of available width.</td>
35b61b8fb1f377ec9b68bbc8e4e43fbd2756a04dAndreas Gustafsson <td><code>.yui3-u-1-4</code></td>
074ae7bf0993ced96b32e3e85553a401f3f3eca9Andreas Gustafsson <td>Fills 1/4 of available width.</td>
074ae7bf0993ced96b32e3e85553a401f3f3eca9Andreas Gustafsson <td><code>.yui3-u-3-4</code></td>
074ae7bf0993ced96b32e3e85553a401f3f3eca9Andreas Gustafsson <td>Fills 3/4 of available width.</td>
074ae7bf0993ced96b32e3e85553a401f3f3eca9Andreas Gustafsson <td><code>.yui3-u-1-5</code></td>
074ae7bf0993ced96b32e3e85553a401f3f3eca9Andreas Gustafsson <td>Fills 1/5 of available width.</td>
074ae7bf0993ced96b32e3e85553a401f3f3eca9Andreas Gustafsson <td><code>.yui3-u-2-5</code></td>
074ae7bf0993ced96b32e3e85553a401f3f3eca9Andreas Gustafsson <td>Fills 2/5 of available width.</td>
533df4efdafcf7a8b7292a298f45df9ab7f7f7f9Mark Andrews <td><code>.yui3-u-3-5</code></td>
533df4efdafcf7a8b7292a298f45df9ab7f7f7f9Mark Andrews <td>Fills 3/5 of available width.</td>
95940593a680fd37704b74849902ca7fd2ff8f2aAndreas Gustafsson <td><code>.yui3-u-4-5</code></td>
322445da85b6a318cb2506d216442b3e5af7c3c0Andreas Gustafsson <td>Fills 4/5 of available width.</td>
692f5c282d13b6a0276e5a60c87ab4af013d3b80Mark Andrews <td><code>.yui3-u-1-6</code></td>
47871e33fb84e286e8e938caa1fccd18deee0d0dAndreas Gustafsson <td>Fills 1/6 of available width.</td>
d8417b5f3406f4ace0f3bdb228b05a7b701976d6Andreas Gustafsson <td><code>.yui3-u-5-6</code></td>
9769d3146777ca71af80b459ecec1ef8e2d05950Andreas Gustafsson <td>Fills 5/6 of available width.</td>
8f9d22f92aae318244392e217bd53c6173ee6079Andreas Gustafsson <td><code>.yui3-u-1-8</code></td>
8f9d22f92aae318244392e217bd53c6173ee6079Andreas Gustafsson <td>Fills 1/8 of available width.</td>
8f9d22f92aae318244392e217bd53c6173ee6079Andreas Gustafsson <td><code>.yui3-u-3-8</code></td>
8f9d22f92aae318244392e217bd53c6173ee6079Andreas Gustafsson <td>Fills 3/8 of available width.</td>
8f9d22f92aae318244392e217bd53c6173ee6079Andreas Gustafsson <td><code>.yui3-u-5-8</code></td>
9769d3146777ca71af80b459ecec1ef8e2d05950Andreas Gustafsson <td>Fills 5/8 of available width.</td>
8f9d22f92aae318244392e217bd53c6173ee6079Andreas Gustafsson <td><code>.yui3-u-7-8</code></td>
8f9d22f92aae318244392e217bd53c6173ee6079Andreas Gustafsson <td>Fills 7/8 of available width.</td>
8f9d22f92aae318244392e217bd53c6173ee6079Andreas Gustafsson <td><code>.yui3-u-1-12</code></td>
8f9d22f92aae318244392e217bd53c6173ee6079Andreas Gustafsson <td>Fills 1/12 of available width.</td>
d8417b5f3406f4ace0f3bdb228b05a7b701976d6Andreas Gustafsson <td><code>.yui3-u-5-12</code></td>
d8417b5f3406f4ace0f3bdb228b05a7b701976d6Andreas Gustafsson <td>Fills 5/12 of available width.</td>
d8417b5f3406f4ace0f3bdb228b05a7b701976d6Andreas Gustafsson <td><code>.yui3-u-7-12</code></td>
d8417b5f3406f4ace0f3bdb228b05a7b701976d6Andreas Gustafsson <td>Fills 7/12 of available width.</td>
d8417b5f3406f4ace0f3bdb228b05a7b701976d6Andreas Gustafsson <td><code>.yui3-u-11-12</code></td>
d8417b5f3406f4ace0f3bdb228b05a7b701976d6Andreas Gustafsson <td>Fills 11/12 of available width.</td>
d8417b5f3406f4ace0f3bdb228b05a7b701976d6Andreas Gustafsson <td><code>.yui3-u-1-24</code></td>
d8417b5f3406f4ace0f3bdb228b05a7b701976d6Andreas Gustafsson <td>Fills 1/24 of available width.</td>
4e0ab18258915b14c163aa9087390402f5ff599bAndreas Gustafsson <td><code>.yui3-u-5-24</code></td>
4e0ab18258915b14c163aa9087390402f5ff599bAndreas Gustafsson <td>Fills 5/24 of available width.</td>
4e0ab18258915b14c163aa9087390402f5ff599bAndreas Gustafsson <td><code>.yui3-u-7-24</code></td>
4e0ab18258915b14c163aa9087390402f5ff599bAndreas Gustafsson <td>Fills 7/24 of available width.</td>
4e0ab18258915b14c163aa9087390402f5ff599bAndreas Gustafsson <td><code>.yui3-u-11-24</code></td>
4e0ab18258915b14c163aa9087390402f5ff599bAndreas Gustafsson <td>Fills 11/24 of available width.</td>
a488e91e5dedfd055b6a6e6dc3018866478facceAndreas Gustafsson <td><code>.yui3-u-13-24</code></td>
a488e91e5dedfd055b6a6e6dc3018866478facceAndreas Gustafsson <td>Fills 13/24 of available width.</td>
b9f6bf5fdfbaaf2bd9a62af0ce6d358c9905ab77Mark Andrews <td><code>.yui3-u-17-24</code></td>
b9f6bf5fdfbaaf2bd9a62af0ce6d358c9905ab77Mark Andrews <td>Fills 17/24 of available width.</td>
b9f6bf5fdfbaaf2bd9a62af0ce6d358c9905ab77Mark Andrews <td><code>.yui3-u-19-24</code></td>
b9f6bf5fdfbaaf2bd9a62af0ce6d358c9905ab77Mark Andrews <td>Fills 19/24 of available width.</td>
47871e33fb84e286e8e938caa1fccd18deee0d0dAndreas Gustafsson <td><code>.yui3-u-23-24</code></td>
d8417b5f3406f4ace0f3bdb228b05a7b701976d6Andreas Gustafsson <td>Fills 23/24 of available width.</td>
64b0479a910055c6e16843fbd80897ac926e69e0Mark Andrews <h3 id="page_width">Building a Page Template</h3>
9769d3146777ca71af80b459ecec1ef8e2d05950Andreas Gustafsson <p>The sizing of "units" is done using percentages, so in order to build a "page" template, a width on the outermost container is required. The simplest approach to fixing your page size is to apply a width directly to the body element. Optionally, the page can be centered in the viewport by setting the <code>margin</code> to <code>auto</code>. The following creates a 960px, centered layout.</p>
a488e91e5dedfd055b6a6e6dc3018866478facceAndreas Gustafsson margin: auto; /* center in viewport */
9769d3146777ca71af80b459ecec1ef8e2d05950Andreas Gustafsson <p>The next step is to decide on the size of each "column" and choose the appropriate "unit". Remember, units sizes are percentage-based, so a bit of math may be required when designing with pixels rather than proportions. To create a 200 pixel wide sidebar, assuming a 960px layout, we would use a 5/24 unit ("yui3-u-5-24") for the narrow column, and a 19/24 ("yui3-19-24") for the main column.</p>
2e28950b721fcdd29dac6bf306b444ee7642cdf6Andreas Gustafsson margin: auto; /* center in viewport */
5dbccb84737c96fef00663919c83ee8f3d6e887aAndreas Gustafsson <div class="yui3-g">
5dbccb84737c96fef00663919c83ee8f3d6e887aAndreas Gustafsson <div class="yui3-u-5-24">
7969572891fbaf3e6d34998b80978e6520f4f823Mark Andrews <div class="yui3-u-19-24">
ecbe731ce428d243b0c7eea5d2d2b24732a698a1Andreas Gustafsson <h3 id="pixels">Pixel Units</h3>
ecbe731ce428d243b0c7eea5d2d2b24732a698a1Andreas Gustafsson <p>Some layouts have precise sizing requirements that may not always be fulfilled by percentage-based units. Custom unit sizes may be applied using the generic unit ("yui3-u"). Rather than overriding the YUI units, custom sizing should be done using your own semantic markup. To recreate the previous example with custom units, we will add IDs to the column containers. This examples uses "nav" and "main", but these should be tailored to your content.</p>
ecbe731ce428d243b0c7eea5d2d2b24732a698a1Andreas Gustafsson margin: auto; /* center in viewport */
ecbe731ce428d243b0c7eea5d2d2b24732a698a1Andreas Gustafsson <div class="yui3-g">
64b0479a910055c6e16843fbd80897ac926e69e0Mark Andrews <div class="yui3-u" id="nav">
923cbf79eb621bb82f8a648f4ecb947667a1e5d3Andreas Gustafsson <div class="yui3-u" id="main">