Unified Diff: html/grid.html
Issue 29361708:
Issue 4609 - Default grid component (Closed)
Patch Set: Minor documentation changes.
Created Nov. 17, 2016, 6:26 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,161 @@ |
| +<!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**. */ |
| + |
| + .bg-inverse |
|
saroyanm
2016/11/21 19:14:46
Deatail: I think this is used as a container, but
juliandoucette
2016/11/30 18:27:43
Acknowledged.
|
| + { |
| + color: white; |
| + background-color: black; |
| + padding: 5px 10px |
| + } |
| + |
| + .column |
| + { |
| + margin-bottom: 20px; |
| + } |
| + |
| + .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 bg-inverses below.</p> |
| + |
| + <div class="desktop"> |
| + <h2>Desktop width</h2> |
| + <div class="row"> |
| + <div class="one-half column"><div class="bg-inverse">.one-half .column</div></div> |
| + <div class="one-half column"><div class="bg-inverse">.one-half .column</div></div> |
| + </div> |
| + <div class="row"> |
| + <div class="one-third column"><div class="bg-inverse">.one-third .column</div></div> |
| + <div class="one-third column"><div class="bg-inverse">.one-third .column</div></div> |
| + <div class="one-third column"><div class="bg-inverse">.one-third .column</div></div> |
| + </div> |
| + <div class="row"> |
| + <div class="one-fourth column"><div class="bg-inverse">.one-fourth .column</div></div> |
| + <div class="one-fourth column"><div class="bg-inverse">.one-fourth .column</div></div> |
| + <div class="one-fourth column"><div class="bg-inverse">.one-fourth .column</div></div> |
| + <div class="one-fourth column"><div class="bg-inverse">.one-fourth .column</div></div> |
| + </div> |
| + </div> |
| + |
| + <div class="tablet"> |
| + <h2>Tablet width</h2> |
| + <div class="row"> |
| + <div class="one-half column"><div class="bg-inverse">.one-half .column</div></div> |
| + <div class="one-half column"><div class="bg-inverse">.one-half .column</div></div> |
| + </div> |
| + <div class="row"> |
| + <div class="one-third column"><div class="bg-inverse">.one-third .column</div></div> |
| + <div class="one-third column"><div class="bg-inverse">.one-third .column</div></div> |
| + <div class="one-third column"><div class="bg-inverse">.one-third .column</div></div> |
| + </div> |
| + <div class="row"> |
| + <div class="one-fourth column"><div class="bg-inverse">.one-fourth .column</div></div> |
| + <div class="one-fourth column"><div class="bg-inverse">.one-fourth .column</div></div> |
| + <div class="one-fourth column"><div class="bg-inverse">.one-fourth .column</div></div> |
| + <div class="one-fourth column"><div class="bg-inverse">.one-fourth .column</div></div> |
| + </div> |
| + </div> |
| + |
| + <div class="mobile"> |
| + <h2>Mobile width</h2> |
| + <div class="row"> |
| + <div class="one-half column"><div class="bg-inverse">.one-half .column</div></div> |
| + <div class="one-half column"><div class="bg-inverse">.one-half .column</div></div> |
| + </div> |
| + <div class="row"> |
| + <div class="one-third column"><div class="bg-inverse">.one-third .column</div></div> |
| + <div class="one-third column"><div class="bg-inverse">.one-third .column</div></div> |
| + <div class="one-third column"><div class="bg-inverse">.one-third .column</div></div> |
| + </div> |
| + <div class="row"> |
| + <div class="one-fourth column"><div class="bg-inverse">.one-fourth .column</div></div> |
| + <div class="one-fourth column"><div class="bg-inverse">.one-fourth .column</div></div> |
| + <div class="one-fourth column"><div class="bg-inverse">.one-fourth .column</div></div> |
| + <div class="one-fourth column"><div class="bg-inverse">.one-fourth .column</div></div> |
| + </div> |
| + </div> |
| + |
| + <h2>Reverse order</h2> |
| + <div class="row reverse"> |
| + <div class="one-half column"><div class="bg-inverse">Column 1</div></div> |
| + <div class="one-half column"><div class="bg-inverse">Column 2</div></div> |
| + </div> |
| + |
| + <h2>Right-to-left direction</h2> |
| + <div dir="rtl"> |
| + <div class="row"> |
| + <div class="one-half column"><div class="bg-inverse">Column 1</div></div> |
| + <div class="one-half column"><div class="bg-inverse">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="bg-inverse">Column 1</div></div> |
| + <div class="one-half column"><div class="bg-inverse">Column 2</div></div> |
| + </div> |
| + </div> |
| + |
| + </div> |
| +</body> |
| +</html> |
« no previous file with comments
|
« no previous file
|
scss/_grid.scss » ('j')
|
no next file with comments »
