Difference between revisions of "Test Page"
From Titan's Teeth
Dicemonger (talk | contribs) |
Dicemonger (talk | contribs) |
||
| Line 18: | Line 18: | ||
<li>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</li> | <li>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</li> | ||
</ul> | </ul> | ||
| + | |||
| + | == Grid == | ||
| + | 12 Wide | ||
| + | |||
| + | === Basic Grids === | ||
| + | |||
| + | Specify the widths of each column with the small-#, medium-#, and large-# classes. | ||
| + | |||
| + | <div class="row"> | ||
| + | <div class="small-2 large-4 columns">...</div> | ||
| + | <div class="small-4 large-4 columns">...</div> | ||
| + | <div class="small-6 large-4 columns">...</div> | ||
| + | </div> | ||
| + | <div class="row"> | ||
| + | <div class="large-3 columns">...</div> | ||
| + | <div class="large-6 columns">...</div> | ||
| + | <div class="large-3 columns">...</div> | ||
| + | </div> | ||
| + | |||
| + | Small grids expand to large screens easier than large grids cram into small screens. | ||
| + | |||
| + | <div class="row"> | ||
| + | <div class="small-2 columns">2 columns</div> | ||
| + | <div class="small-10 columns">10 columns</div> | ||
| + | </div> | ||
| + | <div class="row"> | ||
| + | <div class="small-3 columns">3 columns</div> | ||
| + | <div class="small-9 columns">9 columns</div> | ||
| + | </div> | ||
| + | |||
| + | === Offset === | ||
| + | |||
| + | Move blocks up to 11 columns to the right by using classes like .large-offset-1 and .small-offset-3. | ||
| + | |||
| + | <div class="row"> | ||
| + | <div class="large-1 columns">1</div> | ||
| + | <div class="large-10 large-offset-1 columns">10, offset 1</div> | ||
| + | </div> | ||
| + | |||
| + | === Collapse/Uncollapse Rows === | ||
| + | The collapse class lets you remove column gutters (padding). | ||
| + | |||
| + | There are times when you won't want each media query to be collapsed or uncollapsed. In this case, use the media query size you want and collapse or uncollapse and add that to your row element. Example removes the gutter at the large breakpoint and then adds the gutter to columns at medium and small. | ||
| + | |||
| + | <div class="row medium-uncollapse large-collapse"> | ||
| + | <div class="small-6 columns"> | ||
| + | Removes gutter at large media query | ||
| + | </div> | ||
| + | <div class="small-6 columns"> | ||
| + | Removes gutter at large media query | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
== Tabs == | == Tabs == | ||
Revision as of 16:27, 9 June 2019
Block Grid
Block grids are made from a ul.small-block-grid-# or ul.large-block-grid-#. These are ideal for blocked-in content generated by an application, as they do not require rows or even numbers of elements to display correctly.
These have a bit of flexibility since you have access to two separate grids between our built in 768px breakpoint. If you use the small-block-grid only, the grid will keep its spacing and configuration no matter the screen size. If you use large-block-grid only, the list items will stack on top of each other for small devices. If you use both of those classes combined, you can control the configuration and layout separately for each breakpoint.
- Hello
- Sweeties
- Do what the man says
- Duck
- This is the first panel of the basic tab example. You can place all sorts of content here including a grid.
- This is the first panel of the basic tab example. You can place all sorts of content here including a grid.
- This is the first panel of the basic tab example. You can place all sorts of content here including a grid.
- This is the first panel of the basic tab example. You can place all sorts of content here including a grid.
Grid
12 Wide
Basic Grids
Specify the widths of each column with the small-#, medium-#, and large-# classes.
Small grids expand to large screens easier than large grids cram into small screens.
Offset
Move blocks up to 11 columns to the right by using classes like .large-offset-1 and .small-offset-3.
Collapse/Uncollapse Rows
The collapse class lets you remove column gutters (padding).
There are times when you won't want each media query to be collapsed or uncollapsed. In this case, use the media query size you want and collapse or uncollapse and add that to your row element. Example removes the gutter at the large breakpoint and then adds the gutter to columns at medium and small.
Removes gutter at large media query
Removes gutter at large media query
Tabs
This is the first panel of the basic tab example. You can place all sorts of content here including a grid.
This is the second panel of the basic tab example. This is the second panel of the basic tab example.
This is the third panel of the basic tab example. This is the third panel of the basic tab example.
This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.
This is the first panel of the basic tab example. You can place all sorts of content here including a grid.
This is the second panel of the basic tab example. This is the second panel of the basic tab example.
This is the third panel of the basic tab example. This is the third panel of the basic tab example.
This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.