Unified Diff: html/grid.html
Issue 29361708:
Issue 4609 - Default grid component (Closed)
Patch Set:
Created Nov. 3, 2016, 5:51 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,207 @@ |
| +<!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>HTML Content</title> |
| + <link rel="stylesheet" href="/css/main.css"> |
| + <style> |
| + body |
| + { |
| + margin-bottom: 4em; |
| + } |
| + |
| + header |
| + { |
| + border-bottom: 1px solid lightgray; |
| + margin-top: 4em !important; |
| + margin-bottom: 1em !important; |
| + } |
| + |
| + .desktop |
| + { |
| + max-width: 992px; |
| + } |
| + |
| + .tablet |
| + { |
| + max-width: 768px; |
| + } |
| + |
| + .mobile |
| + { |
| + max-width: 576px; |
| + } |
| + |
| + .tablet .one-fourth |
| + { |
| + width: 50%; |
| + } |
| + |
| + .mobile .column |
| + { |
| + width: 100%; |
| + } |
| + |
| + .example |
| + { |
| + background-color: lightgray; |
| + padding: 8px 16px; |
| + margin-top: 16px; |
| + margin-bottom: 16px; |
| + border: 1px solid white; |
| + } |
| + </style> |
| +</head> |
| +<body> |
| + |
| + <div class="container"> |
| + <header> |
| + <h1>Grid component</h1> |
| + </header> |
| + <ol> |
| + <li><a href="#sizes">Sizes</a></li> |
| + <li><a href="#containers">Containers</a></li> |
| + <li><a href="#columns">Columns</a></li> |
| + <li><a href="#direction">Direction</a></li> |
| + <li><a href="#pushing-and-pulling">Pushing & pulling</a></li> |
| + </ol> |
| + </div> |
| + |
| + <section class="container"> |
| + <header> |
| + <h2 id="sizes">Sizes</h2> |
| + </header> |
| + <p class="mobile example"><code>$mobile-breakpoint</code> - 576px</p> |
| + <p class="tablet example"><code>$tablet-breakpoint</code> - 768px</p> |
| + <p class="desktop example"><code>$desktop-breakpoint</code> - 992px</p> |
| + </section> |
| + |
| + <section> |
| + <header class="container"> |
| + <h2 id="containers">Containers</h2> |
| + </header> |
| + <p class="container example"><code>.container</code> - device <a href="#sizes">size</a>.</p> |
| + <p class="container-fluid example"><code>.container-fluid</code> - 100%</p> |
| + </section> |
| + |
| + <div class="container"> |
| + |
| + <section> |
| + <header> |
| + <h2 id="columns">Columns</h2> |
| + </header> |
| + <p>Columns must be contained within one or more <code>.row</code>.</p> |
| + <section> |
| + <header> |
| + <h3 id="columns-desktop">Desktop</h3> |
| + </header> |
| + <p>Up to four columns are supported on desktop.</p> |
| + |
| + <section> |
| + <h4 id="desktop-halfs">Halfs</h4> |
| + <div class="row"> |
| + <div class="one-half column example"><code>.one-half .column</code></div> |
| + <div class="one-half column example"><code>.one-half .column</code></div> |
| + </div> |
| + </section> |
| + |
| + <section> |
| + <h4 id="desktop-thirds">Thirds</h4> |
| + <div class="row"> |
| + <div class="one-third column example"><code>.one-third .column</code></div> |
| + <div class="two-thirds column example"><code>.two-thirds .column</code></div> |
| + </div> |
| + </section> |
| + |
| + <section> |
| + <h4 id="desktop-fourths">Fourths</h4> |
| + <div class="row"> |
| + <div class="one-fourth column example"><code>.one-fourth .column</code></div> |
| + <div class="three-fourths column example"><code>.three-fourths .column</code></div> |
| + </div> |
| + </section> |
| + </section> |
| + |
| + <section> |
| + <header> |
| + <h3 id="columns-tablet">Tablet</h3> |
| + </header> |
| + <p>Fourth columns collapse into half columns on tablets. All other columns (including .one-half) collapse into one.</p> |
| + <div class="row tablet"> |
| + <div class="one-fourth column example"><code>.one-fourth .column</code></div> |
| + <div class="one-fourth column example"><code>.one-fourth .column</code></div> |
| + <div class="one-fourth column example"><code>.one-fourth .column</code></div> |
| + <div class="one-fourth column example"><code>.one-fourth .column</code></div> |
| + </div> |
| + </section> |
| + |
| + <section> |
| + <header> |
| + <h3 id="columns-mobile">Mobile</h3> |
| + </header> |
| + <p>All columns collapse into one on mobile.</p> |
| + <div class="row mobile"> |
| + <div class="one-fourth column example"><code>.one-fourth .column</code></div> |
| + <div class="one-third column example"><code>.one-third .column</code></div> |
| + <div class="one-half column example"><code>.one-half .column</code></div> |
| + </div> |
| + </section> |
| + </section> |
| + |
| + <section> |
| + <header> |
| + <h2 id="direction">Direction</h2> |
| + </header> |
| + <p>Columns flow according to parent direction.</p> |
| + |
| + <section dir="ltr"> |
| + <h3>Left to right</h3> |
| + <div class="row"> |
| + <div class="one-half column example">Column 1</div> |
| + <div class="one-half column example">Column 2</div> |
| + </div> |
| + </section> |
| + |
| + <section dir="rtl"> |
| + <h3>Right to left</h3> |
| + <div class="row"> |
| + <div class="one-half column example">Column 1</div> |
| + <div class="one-half column example">Column 2</div> |
| + </div> |
| + </section> |
| + </section> |
| + |
| + <section> |
| + <header> |
| + <h2 id="pushing-and-pulling">Pushing & pulling</h2> |
| + </header> |
| + <p>Use <code>.push-*-*</code> and <code>.pull-*-*</code> to push (forward) or pull (backward) a column.</p> |
| + <p>This is useful for controling the order in which columns appear when they are collapsed.</p> |
| + <div class="row"> |
| + <div class="one-half push-one-half column example"><code>.one-half .push-one-half column</code></div> |
| + <div class="one-half pull-one-half column example"><code>.one-half .pull-one-half column</code></div> |
| + </div> |
| + </section> |
| + |
| + </div> |
| +</body> |
| +</html> |
« no previous file with comments
|
« no previous file
|
scss/_grid.scss » ('j')
|
no next file with comments »
