diff options
Diffstat (limited to 'css.html')
| -rw-r--r-- | css.html | 284 |
1 files changed, 168 insertions, 116 deletions
@@ -117,15 +117,16 @@ base_url: "../" <tr> <th>Max container width</th> <td>None (auto)</td> - <td>728px</td> + <td>720px</td> <td>940px</td> - <td>1170px</td> + <td>1140px</td> </tr> <tr> <th>Class prefix</th> - <td><code>.col-</code></td> + <td><code>.col-xs</code></td> <td><code>.col-sm-</code></td> - <td colspan="2"><code>.col-lg-</code></td> + <td><code>.col-md-</code></td> + <td><code>.col-lg-</code></td> </tr> <tr> <th># of columns</th> @@ -133,10 +134,10 @@ base_url: "../" </tr> <tr> <th>Max column width</th> - <td>Auto</td> - <td>~60px</td> - <td>~78px</td> - <td>~98px</td> + <td class="text-muted">Auto</td> + <td>60px</td> + <td>78px</td> + <td>95px</td> </tr> <tr> <th>Gutter width</th> @@ -161,101 +162,101 @@ base_url: "../" </div> <h3 id="grid-example-basic">Example: Stacked-to-horizontal</h3> - <p>Using a single set of grid classes, you can create a basic grid system that starts out stacked on mobile and tablet devices before becoming horizontal on desktop devices.</p> + <p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.</p> <div class="bs-docs-grid"> <div class="row show-grid"> - <div class="col-lg-1">1</div> - <div class="col-lg-1">1</div> - <div class="col-lg-1">1</div> - <div class="col-lg-1">1</div> - <div class="col-lg-1">1</div> - <div class="col-lg-1">1</div> - <div class="col-lg-1">1</div> - <div class="col-lg-1">1</div> - <div class="col-lg-1">1</div> - <div class="col-lg-1">1</div> - <div class="col-lg-1">1</div> - <div class="col-lg-1">1</div> + <div class="col-md-1">1</div> + <div class="col-md-1">1</div> + <div class="col-md-1">1</div> + <div class="col-md-1">1</div> + <div class="col-md-1">1</div> + <div class="col-md-1">1</div> + <div class="col-md-1">1</div> + <div class="col-md-1">1</div> + <div class="col-md-1">1</div> + <div class="col-md-1">1</div> + <div class="col-md-1">1</div> + <div class="col-md-1">1</div> </div> <div class="row show-grid"> - <div class="col-lg-8">8</div> - <div class="col-lg-4">4</div> + <div class="col-md-8">8</div> + <div class="col-md-4">4</div> </div> <div class="row show-grid"> - <div class="col-lg-4">4</div> - <div class="col-lg-4">4</div> - <div class="col-lg-4">4</div> + <div class="col-md-4">4</div> + <div class="col-md-4">4</div> + <div class="col-md-4">4</div> </div> <div class="row show-grid"> - <div class="col-lg-6">6</div> - <div class="col-lg-6">6</div> + <div class="col-md-6">6</div> + <div class="col-md-6">6</div> </div> </div> {% highlight html %} <div class="row"> - <div class="col-lg-1">1</div> - <div class="col-lg-1">1</div> - <div class="col-lg-1">1</div> - <div class="col-lg-1">1</div> - <div class="col-lg-1">1</div> - <div class="col-lg-1">1</div> - <div class="col-lg-1">1</div> - <div class="col-lg-1">1</div> - <div class="col-lg-1">1</div> - <div class="col-lg-1">1</div> - <div class="col-lg-1">1</div> - <div class="col-lg-1">1</div> + <div class="col-md-1">1</div> + <div class="col-md-1">1</div> + <div class="col-md-1">1</div> + <div class="col-md-1">1</div> + <div class="col-md-1">1</div> + <div class="col-md-1">1</div> + <div class="col-md-1">1</div> + <div class="col-md-1">1</div> + <div class="col-md-1">1</div> + <div class="col-md-1">1</div> + <div class="col-md-1">1</div> + <div class="col-md-1">1</div> </div> <div class="row"> - <div class="col-lg-8">8</div> - <div class="col-lg-4">4</div> + <div class="col-md-8">8</div> + <div class="col-md-4">4</div> </div> <div class="row"> - <div class="col-lg-4">4</div> - <div class="col-lg-4">4</div> - <div class="col-lg-4">4</div> + <div class="col-md-4">4</div> + <div class="col-md-4">4</div> + <div class="col-md-4">4</div> </div> <div class="row"> - <div class="col-lg-6">6</div> - <div class="col-lg-6">6</div> + <div class="col-md-6">6</div> + <div class="col-md-6">6</div> </div> {% endhighlight %} <h3 id="grid-example-mixed">Example: Combining mobile with desktop</h3> - <p>Don't want your columns to simply stack in smaller devices? Use the small device grid system by adding <code>.col-*</code> classes to the existing <code>.col-lg-*</code> ones. See the example below for a better idea of how it all works.</p> + <p>Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding <code>.col-xs-*</code> <code>.col-md-*</code> to your columns. See the example below for a better idea of how it all works.</p> <div class="bs-docs-grid"> <div class="row show-grid"> - <div class="col-12 col-lg-8">8</div> - <div class="col-6 col-lg-4">4</div> + <div class="col-xs-12 col-md-8">8</div> + <div class="col-xs-6 col-md-4">4</div> </div> <div class="row show-grid"> - <div class="col-6 col-lg-4">4</div> - <div class="col-6 col-lg-4">4</div> - <div class="col-6 col-lg-4">4</div> + <div class="col-xs-6 col-md-4">4</div> + <div class="col-xs-6 col-md-4">4</div> + <div class="col-xs-6 col-md-4">4</div> </div> <div class="row show-grid"> - <div class="col-6 col-lg-6">6</div> - <div class="col-6 col-lg-6">6</div> + <div class="col-xs-6 col-md-6">6</div> + <div class="col-xs-6 col-md-6">6</div> </div> </div> {% highlight html %} <!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> - <div class="col-12 col-lg-8">8</div> - <div class="col-6 col-lg-4">4</div> + <div class="col-xs-12 col-md-8">8</div> + <div class="col-xs-6 col-md-4">4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> - <div class="col-6 col-lg-4">4</div> - <div class="col-6 col-lg-4">4</div> - <div class="col-6 col-lg-4">4</div> + <div class="col-xs-6 col-md-4">4</div> + <div class="col-xs-6 col-md-4">4</div> + <div class="col-xs-6 col-md-4">4</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> - <div class="col-6 col-lg-6">6</div> - <div class="col-6 col-lg-6">6</div> + <div class="col-xs-6 col-md-6">6</div> + <div class="col-xs-6 col-md-6">6</div> </div> {% endhighlight %} @@ -263,32 +264,32 @@ base_url: "../" <p>Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</p> <div class="bs-docs-grid"> <div class="row show-grid"> - <div class="col-12 col-sm-8 col-lg-8">.col-12 .col-sm-8 .col-lg-8</div> - <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div> + <div class="col-xs-12 col-sm-8 col-md-8">.col-xs-12 .col-sm-8 .col-md-8</div> + <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> </div> <div class="row show-grid"> - <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div> - <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div> - <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div> + <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> + <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> + <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> </div> <div class="row show-grid"> - <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div> - <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div> + <div class="col-6 col-sm-6 col-md-6">.col-xs-6 .col-sm-6 .col-md-6</div> + <div class="col-6 col-sm-6 col-md-6">.col-xs-6 .col-sm-6 .col-md-6</div> </div> </div> {% highlight html %} <div class="row"> - <div class="col-12 col-sm-8 col-lg-8">.col-12 .col-sm-8 .col-lg-8</div> - <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div> + <div class="col-xs-12 col-sm-8 col-md-8">.col-xs-12 .col-sm-8 .col-md-8</div> + <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> </div> <div class="row"> - <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div> - <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div> - <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div> + <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> + <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> + <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> </div> <div class="row"> - <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div> - <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div> + <div class="col-xs-6 col-sm-6 col-md-6">.col-xs-6 .col-sm-6 .col-md-6</div> + <div class="col-xs-6 col-sm-6 col-md-6">.col-xs-6 .col-sm-6 .col-md-6</div> </div> {% endhighlight %} @@ -299,45 +300,45 @@ base_url: "../" </div> <h3 id="grid-offsetting">Offsetting columns</h3> - <p>Move columns to the right using <code>.col-lg-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-lg-offset-4</code> moves <code>.col-lg-4</code> over four columns.</p> + <p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-4</code> over four columns.</p> <div class="bs-docs-grid"> <div class="row show-grid"> - <div class="col-lg-4">4</div> - <div class="col-lg-4 col-lg-offset-4">4 offset 4</div> + <div class="col-md-4">4</div> + <div class="col-md-4 col-md-offset-4">4 offset 4</div> </div><!-- /row --> <div class="row show-grid"> - <div class="col-lg-3 col-lg-offset-3">3 offset 3</div> - <div class="col-lg-3 col-lg-offset-3">3 offset 3</div> + <div class="col-md-3 col-md-offset-3">3 offset 3</div> + <div class="col-md-3 col-md-offset-3">3 offset 3</div> </div><!-- /row --> <div class="row show-grid"> - <div class="col-lg-6 col-lg-offset-3">6 offset 3</div> + <div class="col-md-6 col-md-offset-3">6 offset 3</div> </div><!-- /row --> </div> {% highlight html %} <div class="row"> - <div class="col-lg-4">...</div> - <div class="col-lg-4 col-lg-offset-4">...</div> + <div class="col-md-4">...</div> + <div class="col-md-4 col-md-offset-4">...</div> </div> <div class="row"> - <div class="col-lg-3 col-lg-offset-3">3 offset 3</div> - <div class="col-lg-3 col-lg-offset-3">3 offset 3</div> + <div class="col-md-3 col-md-offset-3">3 offset 3</div> + <div class="col-md-3 col-md-offset-3">3 offset 3</div> </div> <div class="row"> - <div class="col-lg-6 col-lg-offset-3">...</div> + <div class="col-md-6 col-md-offset-3">...</div> </div> {% endhighlight %} <h3 id="grid-nesting">Nesting columns</h3> - <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-lg-*</code> columns within an existing <code>.col-lg-*</code> column. Nested rows should include a set of columns that add up to 12.</p> + <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12.</p> <div class="row show-grid"> - <div class="col-lg-9"> + <div class="col-md-9"> Level 1: 9 columns <div class="row show-grid"> - <div class="col-lg-6"> + <div class="col-md-6"> Level 2: 6 columns </div> - <div class="col-lg-6"> + <div class="col-md-6"> Level 2: 6 columns </div> </div> @@ -345,13 +346,13 @@ base_url: "../" </div> {% highlight html %} <div class="row"> - <div class="col-lg-9"> + <div class="col-md-9"> Level 1: 9 columns <div class="row"> - <div class="col-lg-6"> + <div class="col-md-6"> Level 2: 6 columns </div> - <div class="col-lg-6"> + <div class="col-md-6"> Level 2: 6 columns </div> </div> @@ -360,16 +361,16 @@ base_url: "../" {% endhighlight %} <h3 id="grid-column-ordering">Column ordering</h3> - <p>Easily change the order of our built-in grid columns with <code>.col-lg-push-*</code> and <code>.col-lg-pull-*</code> modifier classes.</p> + <p>Easily change the order of our built-in grid columns with <code>.col-md-push-*</code> and <code>.col-md-pull-*</code> modifier classes.</p> <div class="row show-grid"> - <div class="col-lg-9 col-lg-push-3">9</div> - <div class="col-lg-3 col-lg-pull-9">3</div> + <div class="col-md-9 col-md-push-3">9</div> + <div class="col-md-3 col-md-pull-9">3</div> </div> {% highlight html %} <div class="row"> - <div class="col-lg-9 col-lg-push-3">9</div> - <div class="col-lg-3 col-lg-pull-9">3</div> + <div class="col-md-9 col-md-push-3">9</div> + <div class="col-md-3 col-md-pull-9">3</div> </div> {% endhighlight %} @@ -2015,15 +2016,44 @@ For example, <code><section></code> should be wrapped as inline. <table class="table table-bordered table-striped responsive-utilities"> <thead> <tr> + <th></th> + <th> + Extra small devices + <small>Phones (<768px)</small> + </th> + <th> + Small devices + <small>Tablets (>768px)</small> + </th> + <th> + Medium devices + <small>Desktops (>992px)</small> + </th> + <th> + Large devices + <small>Desktops (>1200px)</small> + </th> + </tr> + </thead> +<!-- <thead> + <tr> <th>Class</th> <th>Small devices <small>Up to 768px</small></th> <th>Medium devices <small>768px to 991px</small></th> <th>Large devices <small>992px and up</small></th> </tr> </thead> - <tbody> + --> <tbody> + <tr> + <th><code>.visible-xs</code></th> + <td class="is-visible">Visible</td> + <td class="is-hidden">Hidden</td> + <td class="is-hidden">Hidden</td> + <td class="is-hidden">Hidden</td> + </tr> <tr> <th><code>.visible-sm</code></th> + <td class="is-hidden">Hidden</td> <td class="is-visible">Visible</td> <td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td> @@ -2031,6 +2061,7 @@ For example, <code><section></code> should be wrapped as inline. <tr> <th><code>.visible-md</code></th> <td class="is-hidden">Hidden</td> + <td class="is-hidden">Hidden</td> <td class="is-visible">Visible</td> <td class="is-hidden">Hidden</td> </tr> @@ -2038,10 +2069,21 @@ For example, <code><section></code> should be wrapped as inline. <th><code>.visible-lg</code></th> <td class="is-hidden">Hidden</td> <td class="is-hidden">Hidden</td> + <td class="is-hidden">Hidden</td> + <td class="is-visible">Visible</td> + </tr> + </tbody> + <tbody> + <tr> + <th><code>.hidden-xs</code></th> + <td class="is-hidden">Hidden</td> + <td class="is-visible">Visible</td> + <td class="is-visible">Visible</td> <td class="is-visible">Visible</td> </tr> <tr> <th><code>.hidden-sm</code></th> + <td class="is-visible">Visible</td> <td class="is-hidden">Hidden</td> <td class="is-visible">Visible</td> <td class="is-visible">Visible</td> @@ -2049,6 +2091,7 @@ For example, <code><section></code> should be wrapped as inline. <tr> <th><code>.hidden-md</code></th> <td class="is-visible">Visible</td> + <td class="is-visible">Visible</td> <td class="is-hidden">Hidden</td> <td class="is-visible">Visible</td> </tr> @@ -2056,6 +2099,7 @@ For example, <code><section></code> should be wrapped as inline. <th><code>.hidden-lg</code></th> <td class="is-visible">Visible</td> <td class="is-visible">Visible</td> + <td class="is-visible">Visible</td> <td class="is-hidden">Hidden</td> </tr> </tbody> @@ -2094,35 +2138,43 @@ For example, <code><section></code> should be wrapped as inline. <p>Resize your browser or load on different devices to test the responsive utility classes.</p> <h4>Visible on...</h4> <p>Green checkmarks indicate the element <strong>is visible</strong> in your current viewport.</p> - <ul class="responsive-utilities-test visible-on"> - <li> + <div class="row responsive-utilities-test visible-on"> + <div class="col-xs-6 col-sm-3"> + <span class="hidden-xs">Extra small</span> + <span class="visible-xs">✔ Visible on x-small</span> + </div> + <div class="col-xs-6 col-sm-3"> <span class="hidden-sm">Small</span> <span class="visible-sm">✔ Visible on small</span> - </li> - <li> + </div> + <div class="col-xs-6 col-sm-3"> <span class="hidden-md">Medium</span> <span class="visible-md">✔ Visible on medium</span> - </li> - <li> + </div> + <div class="col-xs-6 col-sm-3"> <span class="hidden-lg">Large</span> <span class="visible-lg">✔ Visible on large</span> - </li> - </ul> + </div> + </div> <h4>Hidden on...</h4> <p>Here, green checkmarks indicate the element <strong>is hidden</strong> in your current viewport.</p> - <ul class="responsive-utilities-test hidden-on"> - <li> + <div class="row responsive-utilities-test hidden-on"> + <div class="col-xs-6 col-sm-3"> + <span class="visible-xs">Extra small</span> + <span class="hidden-xs">✔ Hidden on x-small</span> + </div> + <div class="col-xs-6 col-sm-3"> <span class="visible-sm">Small</span> <span class="hidden-sm">✔ Hidden on small</span> - </li> - <li> + </div> + <div class="col-xs-6 col-sm-3"> <span class="visible-md">Medium</span> <span class="hidden-md">✔ Hidden on medium</span> - </li> - <li> + </div> + <div class="col-xs-6 col-sm-3"> <span class="visible-lg">Large</span> <span class="hidden-lg">✔ Hidden on large</span> - </li> - </ul> + </div> + </div> </div> |