Side by Side Diff: html/grid.html
Issue 29361708:
Issue 4609 - Default grid component (Closed)
Patch Set: Simplified documentation
Created Nov. 11, 2016, 5:51 p.m.
| Left: | ||
| Right: |
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 »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE html> | |
| 2 <!-- | |
| 3 This file is part of universal-design-language | |
| 4 Copyright (C) 2016 Eyeo GmbH | |
| 5 | |
| 6 universal-design-language is free software: you can redistribute it and/or | |
| 7 modify it under the terms of the GNU General Public License as published by | |
| 8 the Free Software Foundation, either version 3 of the License, or | |
| 9 (at your option) any later version. | |
| 10 | |
| 11 universal-design-language is distributed in the hope that it will be useful, | |
| 12 but WITHOUT ANY WARRANTY; without even the implied warranty of | |
| 13 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | |
| 14 GNU General Public License for more details. | |
| 15 | |
| 16 You should have received a copy of the GNU General Public License | |
| 17 along with web.starter-kit. If not, see <http://www.gnu.org/licenses/>. | |
| 18 --> | |
| 19 <html dir="ltr"> | |
| 20 <head> | |
| 21 <meta charset="utf-8"> | |
| 22 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to- fit=no"> | |
| 23 <meta http-equiv="x-ua-compatible" content="ie=edge"> | |
| 24 <title>Grid</title> | |
| 25 <link rel="stylesheet" href="/css/main.css"> | |
| 26 <style> | |
| 27 .example | |
| 28 { | |
| 29 color: white; | |
| 30 background-color: black; | |
| 31 padding: 0.25em 0.5em; | |
| 32 margin: 0em 0em 1em 0em; | |
| 33 } | |
| 34 | |
| 35 .mobile | |
| 36 { | |
| 37 width: 540px; | |
| 38 } | |
| 39 | |
| 40 .mobile .column, | |
| 41 .tablet .column | |
| 42 { | |
| 43 width: 100%; | |
| 44 } | |
| 45 | |
| 46 .tablet | |
| 47 { | |
| 48 width: 720px; | |
| 49 } | |
| 50 | |
| 51 .tablet .column.one-fourth | |
| 52 { | |
| 53 width: 50%; | |
| 54 } | |
| 55 </style> | |
| 56 </head> | |
| 57 <body> | |
| 58 <div class="container"> | |
| 59 | |
| 60 <h1>Grid</h1> | |
| 61 <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> | |
| 62 | |
| 63 <div class="desktop"> | |
| 64 <h2>Desktop width</h2> | |
| 65 <div class="row"> | |
| 66 <div class="one-half column"><div class="example">.one-half .column</div ></div> | |
| 67 <div class="one-half column"><div class="example">.one-half .column</div ></div> | |
| 68 </div> | |
| 69 <div class="row"> | |
| 70 <div class="one-third column"><div class="example">.one-third .column</d iv></div> | |
| 71 <div class="one-third column"><div class="example">.one-third .column</d iv></div> | |
| 72 <div class="one-third column"><div class="example">.one-third .column</d iv></div> | |
| 73 </div> | |
| 74 <div class="row"> | |
| 75 <div class="one-fourth column"><div class="example">.one-fourth .column< /div></div> | |
| 76 <div class="one-fourth column"><div class="example">.one-fourth .column< /div></div> | |
| 77 <div class="one-fourth column"><div class="example">.one-fourth .column< /div></div> | |
| 78 <div class="one-fourth column"><div class="example">.one-fourth .column< /div></div> | |
| 79 </div> | |
| 80 </div> | |
| 81 | |
| 82 <div class="tablet"> | |
| 83 <h2>Tablet width</h2> | |
| 84 <div class="row"> | |
| 85 <div class="one-half column"><div class="example">.one-half .column</div ></div> | |
| 86 <div class="one-half column"><div class="example">.one-half .column</div ></div> | |
| 87 </div> | |
| 88 <div class="row"> | |
| 89 <div class="one-third column"><div class="example">.one-third .column</d iv></div> | |
| 90 <div class="one-third column"><div class="example">.one-third .column</d iv></div> | |
| 91 <div class="one-third column"><div class="example">.one-third .column</d iv></div> | |
| 92 </div> | |
| 93 <div class="row"> | |
| 94 <div class="one-fourth column"><div class="example">.one-fourth .column< /div></div> | |
| 95 <div class="one-fourth column"><div class="example">.one-fourth .column< /div></div> | |
| 96 <div class="one-fourth column"><div class="example">.one-fourth .column< /div></div> | |
| 97 <div class="one-fourth column"><div class="example">.one-fourth .column< /div></div> | |
| 98 </div> | |
| 99 </div> | |
| 100 | |
| 101 <div class="mobile"> | |
| 102 <h2>Mobile width</h2> | |
| 103 <div class="row"> | |
| 104 <div class="one-half column"><div class="example">.one-half .column</div ></div> | |
| 105 <div class="one-half column"><div class="example">.one-half .column</div ></div> | |
| 106 </div> | |
| 107 <div class="row"> | |
| 108 <div class="one-third column"><div class="example">.one-third .column</d iv></div> | |
| 109 <div class="one-third column"><div class="example">.one-third .column</d iv></div> | |
| 110 <div class="one-third column"><div class="example">.one-third .column</d iv></div> | |
| 111 </div> | |
| 112 <div class="row"> | |
| 113 <div class="one-fourth column"><div class="example">.one-fourth .column< /div></div> | |
| 114 <div class="one-fourth column"><div class="example">.one-fourth .column< /div></div> | |
| 115 <div class="one-fourth column"><div class="example">.one-fourth .column< /div></div> | |
| 116 <div class="one-fourth column"><div class="example">.one-fourth .column< /div></div> | |
| 117 </div> | |
| 118 </div> | |
| 119 | |
| 120 <h2>Reverse order</h2> | |
| 121 <div class="row reverse"> | |
| 122 <div class="one-half column"><div class="example">Column 1</div></div> | |
| 123 <div class="one-half column"><div class="example">Column 2</div></div> | |
| 124 </div> | |
| 125 | |
| 126 <h2>Right-to-left direction</h2> | |
| 127 <div dir="rtl"> | |
| 128 <div class="row"> | |
| 129 <div class="one-half column"><div class="example">Column 1</div></div> | |
| 130 <div class="one-half column"><div class="example">Column 2</div></div> | |
| 131 </div> | |
| 132 </div> | |
| 133 | |
| 134 <h2>Reverse order and right-to-left direction</h2> | |
| 135 <div dir="rtl"> | |
| 136 <div class="row reverse"> | |
| 137 <div class="one-half column"><div class="example">Column 1</div></div> | |
| 138 <div class="one-half column"><div class="example">Column 2</div></div> | |
| 139 </div> | |
| 140 </div> | |
| 141 | |
| 142 </div> | |
| 143 </body> | |
| 144 </html> | |
| OLD | NEW |
« no previous file with comments
|
« no previous file
|
scss/_grid.scss » ('j')
|
no next file with comments »
