|
|
@@ -0,0 +1,195 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <meta http-equiv=Content-type content="text/html; charset=utf-8">
|
|
|
+ <title>OOCSS Component: Grid </title>
|
|
|
+
|
|
|
+ <link rel=stylesheet href="/static/css/reset.css">
|
|
|
+ <link rel=stylesheet href="/static/css/shared.css">
|
|
|
+ <link rel=stylesheet href="/static/oocss/Grid.css">
|
|
|
+
|
|
|
+ <link rel=stylesheet href="../../../../../../desktop/core/static/css/reset.css">
|
|
|
+ <link rel=stylesheet href="../../../../../../desktop/core/static/css/shared.css">
|
|
|
+ <link rel=stylesheet href="../../../../../../desktop/core/static/oocss/Grid.css">
|
|
|
+
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<div class="print oocss-gallery" style="padding:2ex">
|
|
|
+
|
|
|
+<h1>Grid</h1>
|
|
|
+<p><strong>Requires <code>class=Grid</code></strong></p>
|
|
|
+<p>Semantic flexible grid layouts. Use the grid to impose a strict grid layout.</p>
|
|
|
+<p>A Grid can have many <code>"Row"</code> children.</p>
|
|
|
+
|
|
|
+<p><strong>Grid</strong> is a namespace.</p>
|
|
|
+
|
|
|
+<p>NOTE: Having non Row children of a Grid may give unexpected results.</p>
|
|
|
+<hr>
|
|
|
+
|
|
|
+<h3>Grid > Row</h3>
|
|
|
+<p><strong>Requires <code>class=Row</code></strong></p>
|
|
|
+<p>Split a Grid up into rows</p>
|
|
|
+
|
|
|
+<hr>
|
|
|
+
|
|
|
+<h3>Grid > Row > *</h3>
|
|
|
+<p>Any child of a "Row"</p>
|
|
|
+
|
|
|
+<dl class=Grid style="border:5px solid green">
|
|
|
+
|
|
|
+ <dt class=Row>
|
|
|
+ <b style="border:5px solid blue">Grid > Row > *</b>
|
|
|
+ <u style="border:5px solid purple">Each 'cell' can have its own border and other styles</u>
|
|
|
+ </dt>
|
|
|
+
|
|
|
+ <dd class=Row>
|
|
|
+ <b>Col A</b>
|
|
|
+ </dd>
|
|
|
+
|
|
|
+ <dt class=Row>
|
|
|
+ <b></b>
|
|
|
+ <i>lorem ipsum dolar sit amet</i>
|
|
|
+ </dt>
|
|
|
+
|
|
|
+ <dd class=Row>
|
|
|
+ <b></b>
|
|
|
+ <i></i>
|
|
|
+ <span>Col C</span>
|
|
|
+ </dd>
|
|
|
+
|
|
|
+</dl>
|
|
|
+
|
|
|
+<h2>Form Grid</h2>
|
|
|
+<p>Design complex semantic forms without writing any custom CSS.</p>
|
|
|
+
|
|
|
+<form class=Grid>
|
|
|
+
|
|
|
+ <label class=Row>
|
|
|
+ <span>Foo bar baz bang</span>
|
|
|
+ <input value=foo>
|
|
|
+ <strong>Required</strong>
|
|
|
+ </label>
|
|
|
+
|
|
|
+ <label class=Row>
|
|
|
+ <span>Lorem ipsum dolor sit amet,<br>consectetur adipisicing elit,<br>sed do eiusmod tempor incididunt</span>
|
|
|
+ <input value=bar>
|
|
|
+ <strong>Required</strong>
|
|
|
+ </label>
|
|
|
+
|
|
|
+ <label class=Row>
|
|
|
+ <span>Bang</span>
|
|
|
+ <input value=bang>
|
|
|
+ <strong>Not Required</strong>
|
|
|
+ </label>
|
|
|
+
|
|
|
+ <div class=Row>
|
|
|
+ <label align=right><input type=reset></label>
|
|
|
+ <label><input type=submit></label>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</form>
|
|
|
+
|
|
|
+<h3>Custom Style</h3>
|
|
|
+
|
|
|
+<h4>Inline</h4>
|
|
|
+<p>Supported attributes on Rows and Row direct children:</p>
|
|
|
+<ul>
|
|
|
+ <li><code> align=left</code></li>
|
|
|
+ <li><code> align=right</code></li>
|
|
|
+ <li><code> align=center</code></li>
|
|
|
+ <li><code>valign=top</code></li>
|
|
|
+ <li><code>valign=bottom</code></li>
|
|
|
+ <li><code>valign=middle</code></li>
|
|
|
+</ul>
|
|
|
+<p>Supported inline style:</p>
|
|
|
+<dd>
|
|
|
+ <dt>width</dt>
|
|
|
+ <dd>e.g. <code>style="width:20ex"</code></dd>
|
|
|
+ <dd>If set on a child of the first Row, <br>it will define the width for the entire column.</dd>
|
|
|
+</dd>
|
|
|
+
|
|
|
+<form class=Grid style="width:100%; border:2px solid blue">
|
|
|
+
|
|
|
+ <label class=Row>
|
|
|
+ <span style="width:20%"> style="width:20ex"</span>
|
|
|
+ <input value=foo>
|
|
|
+ <strong style="width:20ex" align=center>Required</strong>
|
|
|
+ </label>
|
|
|
+
|
|
|
+ <h5 class=Row align=center>
|
|
|
+ <span>Row</span>
|
|
|
+ <span>align=</span>
|
|
|
+ <span>center</span>
|
|
|
+ </h5>
|
|
|
+
|
|
|
+ <label class=Row>
|
|
|
+ <span align=right valign=middle>right middle</span>
|
|
|
+ <textarea rows=4>textarea[rows=4]
|
|
|
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
|
|
|
+ <strong align=center>Required</strong>
|
|
|
+ </label>
|
|
|
+
|
|
|
+ <label class=Row>
|
|
|
+ <span>Individual Row children can contain tons and tons of text without breaking the layout even a bit!</span>
|
|
|
+ <span align=center valign=middle><input style="width:60%" value="align=center valign=middle"></span>
|
|
|
+ <strong align=center>Not Required</strong>
|
|
|
+ </label>
|
|
|
+
|
|
|
+ <div class=Row>
|
|
|
+ <i></i>
|
|
|
+ <span align=right><input type=reset></span>
|
|
|
+ <label align=center><input type=submit></label>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</form>
|
|
|
+
|
|
|
+<hr>
|
|
|
+<p><em>NOTE: Using a form element as a direct child of a Row may have unexpected results in some edge cases.</em></p>
|
|
|
+<hr>
|
|
|
+
|
|
|
+
|
|
|
+<h2>Columns</h2>
|
|
|
+
|
|
|
+
|
|
|
+<h3>Auto Widths</h3>
|
|
|
+<div class=Grid>
|
|
|
+ <div class=Row>
|
|
|
+ <h3>left</h3>
|
|
|
+ <h3>center</h3>
|
|
|
+ <h3>right</h3>
|
|
|
+ </div>
|
|
|
+ <div class=Row>
|
|
|
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
|
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
|
|
|
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
|
|
|
+ </div>
|
|
|
+ <div class=Row>
|
|
|
+ <strong>left</strong>
|
|
|
+ <strong>center</strong>
|
|
|
+ <strong>right</strong>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<hr>
|
|
|
+<h3>Fluid Widths</h3>
|
|
|
+<div class=Grid>
|
|
|
+ <div class=Row>
|
|
|
+ <h3>top left</h3>
|
|
|
+ <h3>top center</h3>
|
|
|
+ <h3>top right</h3>
|
|
|
+ </div>
|
|
|
+ <div class=Row>
|
|
|
+ <p style="width:33.3%">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
|
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
|
|
|
+ <p style="width:33.3%">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
|
|
|
+ </div>
|
|
|
+ <div class=Row>
|
|
|
+ <h4>bottom left</h4>
|
|
|
+ <h4>bottom center</h4>
|
|
|
+ <h4>bottom right</h4>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+</div>
|
|
|
+</body>
|
|
|
+</html>
|