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: Improved demo responsiveness Created Nov. 12, 2016, 2:38 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') | scss/_grid.scss » ('J')
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,157 @@
+<!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>
+
+ /* These styles are for demo purposes **only**. */
+
+ .example
saroyanm 2016/11/15 16:09:40 Note: considering the comment above I think it mak
saroyanm 2016/11/15 16:09:41 I think people still may refer to this document as
juliandoucette 2016/11/16 17:17:37 Acknowledged. We will clarify this class name and
+ {
+ color: white;
+ background-color: black;
+ padding: 0.25em 0.5em;
+ margin: 0em 0em 1em 0em;
saroyanm 2016/11/15 16:09:44 Suggestion: What about setting margin-bottom on th
juliandoucette 2016/11/16 17:17:37 Acknowledged. See comment above.
+ }
+
+ .mobile,
+ .tablet
+ {
+ max-width: 100%;
+ padding: 16px 0;
+ }
+
+ .mobile
+ {
+ width: 540px;
+ }
+
+ .mobile .column,
+ .tablet .column
+ {
+ width: 100%;
+ }
+
+ .tablet
+ {
+ width: 720px;
+ }
+
+ @media(min-width: 576px)
+ {
+ .tablet .column.one-fourth
+ {
+ width: 50%;
+ }
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+
+ <h1>Grid</h1>
+ <p>A grid is made up of one or more rows that clear and contain one or more columns. Column widths are set by modifier classes and may behave differently at different device widths. Columns may also be displayed in reverse order and/or right-to-left direction. See examples below.</p>
+
+ <div class="desktop">
+ <h2>Desktop width</h2>
+ <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">
+ <h2>Tablet width</h2>
+ <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">
+ <h2>Mobile width</h2>
+ <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>
+
+ <h2>Reverse order</h2>
+ <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>
+
+ <h2>Right-to-left direction</h2>
+ <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>
+
+ <h2>Reverse order and right-to-left direction</h2>
+ <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>
+
+ </div>
+</body>
+</html>
« no previous file with comments | « no previous file | scss/_grid.scss » ('j') | scss/_grid.scss » ('J')

Powered by Google App Engine
This is Rietveld