Unified Diff: pages/grid.html
Issue 29509576:
Issue 5453 - Make website-defaults adblockplus/cms compatible (Closed)
Base URL: https://hg.adblockplus.org/website-defaults
Patch Set:
Created Aug. 8, 2017, 12:43 p.m.
Use n/p to move between diff chunks;
N/P to move between comments.
« README.md ('K')
|
« pages/content.html ('k')
|
pages/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: pages/grid.html |
| =================================================================== |
| new file mode 100644 |
| --- /dev/null |
| +++ b/pages/grid.html |
| @@ -0,0 +1,76 @@ |
| +title=Grid |
| + |
| +<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> |
| + <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> |
« README.md ('K')
|
« pages/content.html ('k')
|
pages/index.html » ('j')
|
no next file with comments »
