Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code
Issues
All Issues

Unified Diff: html/grid.html

Issue 29361708: Issue 4609 - Default grid component (Closed)
Patch Set: Adjusted grid HTML spacing. Created Nov. 9, 2016, 7:44 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | scss/_grid.scss » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: html/grid.html
===================================================================
new file mode 100644
--- /dev/null
+++ b/html/grid.html
@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<!--
+ This file is part of universal-design-language
+ Copyright (C) 2016 Eyeo GmbH
+
+ universal-design-language is free software: you can redistribute it and/or
+ modify it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ universal-design-language is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with web.starter-kit. If not, see <http://www.gnu.org/licenses/>.
+-->
+<html dir="ltr">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <title>Grid</title>
+ <link rel="stylesheet" href="/css/main.css">
+ <style>
+
+ /* NOTE: The following inline styles are meant for this demo **only**. */
+
+ body
+ {
+ margin-bottom: 3em;
+ }
+
+ .example
+ {
+ color: white;
+ background-color: black;
+ padding: 0.25em 0.5em;
+ margin: 0 0 1em 0;
+ }
+
+ .mobile
+ {
+ width: 540px;
+ }
+
+ .mobile .column,
+ .tablet .column
+ {
+ width: 100%;
+ }
+
+ .tablet
+ {
+ width: 720px;
+ }
+
+ .tablet .column.one-fourth
+ {
+ width: 50%;
+ }
+
+ .clearfix:after
+ {
+ content: "";
+ display: block;
+ clear: both;
+ }
+
+ </style>
+</head>
+<body>
+ <main class="container">
+
+ <h2>Grid</h2>
+ <ul>
+ <li>A grid is made up of rows of columns</li>
+ </ul>
+
+ <h3>Rows</h3>
+ <ul>
+ <li>Rows contain one or more columns</li>
+ <li>Rows clear columns</li>
+ <li>
+ Rows negate the the left & right padding of their first & last columns
+ <ul>
+ <li>While preserving consistent padding between columns</li>
+ </ul>
+ </li>
+ </ul>
+
+ <h4>Row with columns</h4>
+ <div class="row">
+ <div class="one-half column"><div class="example">This block is aligned with the above heading.</div></div>
+ <div class="one-half column"><div class="example">&nbsp;</div></div>
+ </div>
+
+ <h4>Container with columns</h4>
+ <div class="clearfix">
+ <div class="one-half column"><div class="example">This block is not aligned with the above heading.</div></div>
+ <div class="one-half column"><div class="example">&nbsp;</div></div>
+ </div>
+
+ <h3>Columns</h3>
+ <ul>
+ <li>Columns are 100% width by default</li>
+ <li>Modifier classes are applied to columns to change their width</li>
+ <li>Modifier classes behave differently on different device widths</li>
+ </ul>
+
+ <div class="desktop">
+ <h4>Desktop</h4>
+ <div class="row">
+ <div class="one-half column"><div class="example">.one-half .column</div></div>
+ <div class="one-half column"><div class="example">.one-half .column</div></div>
+ </div>
+ <div class="row">
+ <div class="one-third column"><div class="example">.one-third .column</div></div>
+ <div class="one-third column"><div class="example">.one-third .column</div></div>
+ <div class="one-third column"><div class="example">.one-third .column</div></div>
+ </div>
+ <div class="row">
+ <div class="one-fourth column"><div class="example">.one-fourth .column</div></div>
+ <div class="one-fourth column"><div class="example">.one-fourth .column</div></div>
+ <div class="one-fourth column"><div class="example">.one-fourth .column</div></div>
+ <div class="one-fourth column"><div class="example">.one-fourth .column</div></div>
+ </div>
+ </div>
+
+ <div class="tablet">
+ <h4>Tablet</h4>
+ <div class="row">
+ <div class="one-half column"><div class="example">.one-half .column</div></div>
+ <div class="one-half column"><div class="example">.one-half .column</div></div>
+ </div>
+ <div class="row">
+ <div class="one-third column"><div class="example">.one-third .column</div></div>
+ <div class="one-third column"><div class="example">.one-third .column</div></div>
+ <div class="one-third column"><div class="example">.one-third .column</div></div>
+ </div>
+ <div class="row">
+ <div class="one-fourth column"><div class="example">.one-fourth .column</div></div>
+ <div class="one-fourth column"><div class="example">.one-fourth .column</div></div>
+ <div class="one-fourth column"><div class="example">.one-fourth .column</div></div>
+ <div class="one-fourth column"><div class="example">.one-fourth .column</div></div>
+ </div>
+ </div>
+
+ <div class="mobile">
+ <h4>Mobile</h4>
+ <div class="row">
+ <div class="one-half column"><div class="example">.one-half .column</div></div>
+ <div class="one-half column"><div class="example">.one-half .column</div></div>
+ </div>
+ <div class="row">
+ <div class="one-third column"><div class="example">.one-third .column</div></div>
+ <div class="one-third column"><div class="example">.one-third .column</div></div>
+ <div class="one-third column"><div class="example">.one-third .column</div></div>
+ </div>
+ <div class="row">
+ <div class="one-fourth column"><div class="example">.one-fourth .column</div></div>
+ <div class="one-fourth column"><div class="example">.one-fourth .column</div></div>
+ <div class="one-fourth column"><div class="example">.one-fourth .column</div></div>
+ <div class="one-fourth column"><div class="example">.one-fourth .column</div></div>
+ </div>
+ </div>
+
+ <h3>Direction</h3>
+ <ul>
+ <li>Columns within rows modified by the <code>.reverse</code> class appear in reverse order</li>
+ <li>Columns within sections modified by the <code>rtl</code> direction appear in reverse order respectively</li>
+ </ul>
+
+ <h4>Reverse Row</h4>
+ <div class="row reverse">
+ <div class="one-half column"><div class="example">Column 1</div></div>
+ <div class="one-half column"><div class="example">Column 2</div></div>
+ </div>
+
+ <h4>RTL Row</h4>
+ <div dir="rtl">
+ <div class="row">
+ <div class="one-half column"><div class="example">Column 1</div></div>
+ <div class="one-half column"><div class="example">Column 2</div></div>
+ </div>
+ </div>
+
+ <h4>RTL Reverse Row</h4>
+ <div dir="rtl">
+ <div class="row reverse">
+ <div class="one-half column"><div class="example">Column 1</div></div>
+ <div class="one-half column"><div class="example">Column 2</div></div>
+ </div>
+ </div>
+
+ </main>
+</body>
+</html>
« no previous file with comments | « no previous file | scss/_grid.scss » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld