Unified Diff: html/grid.html
Issue 29361708:
Issue 4609 - Default grid component (Closed)
Patch Set: Fixed patch to apply to updated content
Created Nov. 10, 2016, 2:13 p.m.
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with comments
|
« no previous file
|
scss/_grid.scss » ('j')
|
no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| Index: html/grid.html |
| =================================================================== |
| new file mode 100644 |
| --- /dev/null |
| +++ b/html/grid.html |
| @@ -0,0 +1,192 @@ |
| +<!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**. */ |
|
juliandoucette
2016/11/10 16:08:15
I should probably explain what I'm doing with the
|
| + |
| + .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 |
|
juliandoucette
2016/11/10 16:08:15
This is redundant. _content.scss will define .clea
|
| + { |
| + content: ""; |
| + display: block; |
| + clear: both; |
| + } |
| + |
| + </style> |
| +</head> |
| +<body> |
| + <main class="container"> |
| + |
| + <h1>Grid</h1> |
| + <p>A grid is made up of rows of columns.</p> |
| + |
| + <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"> </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"> </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 »
