Unified Diff: demo/grid.html
Issue 29361708:
Issue 4609 - Default grid component (Closed)
Patch Set: Updated name, inverse class, and documentation
Created Dec. 1, 2016, 6:45 p.m.
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with comments
|
« demo/css/demo.css ('k')
|
demo/index.html » ('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: demo/grid.html |
| =================================================================== |
| new file mode 100644 |
| --- /dev/null |
| +++ b/demo/grid.html |
| @@ -0,0 +1,108 @@ |
| +<!DOCTYPE html> |
| +<!-- |
| + This file is part of website-defaults |
| + Copyright (C) 2016 Eyeo GmbH |
| + |
| + website-defaults 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. |
| + |
| + website-defaults 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 website-defaults. 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"> |
| + <link rel="stylesheet" href="/css/demo.css"> |
| +</head> |
| +<body> |
| + <div class="container"> |
| + |
| + <h1>Grid</h1> |
| + <p>A grid is made up of rows of columns. Column widths are set by modifier classes and collapse on smaller screens. Columns may also appear in reverse order and right-to-left direction.</p> |
| + |
| + <ol> |
| + <li><a href="#desktop">Desktop</a></li> |
| + <li><a href="#tablet">Tablet</a></li> |
| + <li><a href="#mobile">Mobile</a></li> |
| + <li><a href="#reverse">Reverse</a></li> |
| + <li><a href="#right-to-left">Right-to-left</a></li> |
| + <li><a href="#reverse-and-right-to-left">Reverse & right-to-left</a></li> |
| + </ol> |
| + |
| + <h2 id="desktop">Desktop</h2> |
| + <div class="row"> |
| + <div class="one-half column"><p class="inverse-text">One half</p></div> |
|
saroyanm
2016/12/01 19:11:05
* What was the reason of renaming the classes from
|
| + <div class="one-half column"><p class="inverse-text">One half</p></div> |
| + </div> |
| + <div class="row"> |
| + <div class="one-third column"><p class="inverse-text">One third</p></div> |
| + <div class="two-thirds column"><p class="inverse-text">Two thirds</p></div> |
| + </div> |
| + <div class="row"> |
| + <div class="one-fourth column"><p class="inverse-text">One fourth</p></div> |
| + <div class="three-fourths column"><p class="inverse-text">Three fourths</p></div> |
| + </div> |
| + |
| + <h2 id="tablet">Tablet</h2> |
| + <div class="tablet"> |
| + <div class="row"> |
| + <div class="one-half column"><p class="inverse-text">One half</p></div> |
| + </div> |
| + <div class="row"> |
| + <div class="one-third column"><p class="inverse-text">One third</p></div> |
| + </div> |
| + <div class="row"> |
| + <div class="one-fourth column"><p class="inverse-text">One fourth</p></div> |
| + <div class="one-fourth column"><p class="inverse-text">One fourth</p></div> |
| + </div> |
| + </div> |
| + |
| + <h2 id="mobile">Mobile</h2> |
| + <div class="mobile"> |
| + <div class="row"> |
| + <div class="one-half column"><p class="inverse-text">One half</p></div> |
| + </div> |
| + <div class="row"> |
| + <div class="one-third column"><p class="inverse-text">One third</p></div> |
| + </div> |
| + <div class="row"> |
| + <div class="one-fourth column"><p class="inverse-text">One fourth</p></div> |
| + </div> |
| + </div> |
| + |
| + <h2 id="reverse">Reverse</h2> |
| + <div class="row reverse"> |
| + <div class="one-half column"><p class="inverse-text">First</p></div> |
| + <div class="one-half column"><p class="inverse-text">Second</p></div> |
| + </div> |
| + |
| + <h2 id="right-to-left">Right-to-left</h2> |
| + <div dir="rtl"> |
| + <div class="row"> |
| + <div class="one-half column"><p class="inverse-text">First</p></div> |
| + <div class="one-half column"><p class="inverse-text">Second</p></div> |
| + </div> |
| + </div> |
| + |
| + <h2 id="reverse-and-right-to-left">Reverse & right-to-left</h2> |
| + <div dir="rtl"> |
| + <div class="row reverse"> |
| + <div class="one-half column"><p class="inverse-text">First</p></div> |
| + <div class="one-half column"><p class="inverse-text">Second</p></div> |
| + </div> |
| + </div> |
| + |
| + </div> |
| +</body> |
| +</html> |
« no previous file with comments
|
« demo/css/demo.css ('k')
|
demo/index.html » ('j')
|
no next file with comments »
