js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated docs

Browse Source
This commit is contained in:
Cory LaViska
2017-08-26 10:28:33 -04:00
parent b9206c3cf5
commit 286d9c861f
2 changed files with 26 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
docs/grid-system.html
View File

@@ -136,7 +136,7 @@
<h3 id="making-columns-responsive">Making Columns Responsive</h3>
<p>There are five responsive tiers in Shoelace: <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, and <code>xl</code>. You can use these tiers to change the way the grid responds at various breakpoints.</p>
<p>Use the <code>col-{tier}-*</code> modifier to target a specific tier. Note that tiers are based on minimum widths, so using <code>col-sm-6</code> will target <code>sm</code>, <code>md</code>, <code>lg</code>, and <code>xl</code>. However, you can target multiple tiers on the same column as needed.</p>
<p>Use the <code>col-[xs|sm|md|lg|xl]-*</code> modifier to target a specific tier. Note that tiers are based on minimum widths, so using <code>col-sm-6</code> will target <code>sm</code>, <code>md</code>, <code>lg</code>, and <code>xl</code>. However, you can target multiple tiers on the same column as needed.</p>
<p>For example, the following columns will stack on <code>xs</code> screens, take up 50% each (6 out of 12 columns) on <code>sm</code> screens, and 75% and 25% respectively on <code>md</code>, <code>lg</code>, and <code>xl</code> screens.</p>
<pre><code class="lang-html">&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-12 col-sm-6 col-md-8&quot;&gt;1st column&lt;/div&gt;
@@ -151,7 +151,7 @@
</div>
<h3 id="offsetting-columns">Offsetting Columns</h3>
<p>You can offset columns using <code>offset-*</code> and <code>offset-{tier}-*</code> modifiers. To reset an offset at a specific tier, use <code>offset-{tier}-0</code>.</p>
<p>You can offset columns using <code>offset-*</code> and <code>offset-[xs|sm|md|lg|xl]-*</code> modifiers. To reset an offset at a specific tier, use <code>offset-[xs|sm|md|lg|xl]-0</code>.</p>
<pre><code class="lang-html">&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-2&quot;&gt;left&lt;/div&gt;
&lt;div class=&quot;col-2 offset-2&quot;&gt;center&lt;/div&gt;
@@ -167,7 +167,7 @@
</div>
<h3 id="reordering-columns">Reordering Columns</h3>
<p>You can control the visual order of columns using the <code>order-*</code> and <code>order-{tier}-*</code> modifiers. Note that columns without an order modifier will not be affected.</p>
<p>You can control the visual order of columns using the <code>order-*</code> and <code>order-[xs|sm|md|lg|xl]-*</code> modifiers. Note that columns without an order modifier will not be affected.</p>
<pre><code class="lang-html">&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-4&quot;&gt;1st (no order)&lt;/div&gt;
&lt;div class=&quot;col-4 order-3&quot;&gt;2nd (shown 3rd)&lt;/div&gt;
@@ -185,23 +185,20 @@
<h3 id="hiding-columns">Hiding Columns</h3>
<p>You can hide columns based on breakpoints using <a href="utilities.html#display-utilities">display utilities</a>.</p>
<pre><code class="lang-html">&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-2&quot;&gt;always&lt;/div&gt;
&lt;div class=&quot;col-2 hidden-xs&quot;&gt;hidden-xs&lt;/div&gt;
&lt;div class=&quot;col-2 hidden-sm&quot;&gt;hidden-sm&lt;/div&gt;
&lt;div class=&quot;col-2 hidden-md&quot;&gt;hidden-md&lt;/div&gt;
&lt;div class=&quot;col-2 hidden-lg&quot;&gt;hidden-lg&lt;/div&gt;
&lt;div class=&quot;col-2 hidden-xl&quot;&gt;hidden-xl&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-2 hide-xs&quot;&gt;hide-xs&lt;/div&gt;
&lt;div class=&quot;col-2 hide-sm&quot;&gt;hide-sm&lt;/div&gt;
&lt;div class=&quot;col-2 hide-md&quot;&gt;hide-md&lt;/div&gt;
&lt;div class=&quot;col-2 hide-lg&quot;&gt;hide-lg&lt;/div&gt;
&lt;div class=&quot;col-2 hide-xl&quot;&gt;hide-xl&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="container grid-example">
<div class="row">
<div class="col-2 hidden-xs">xs</div>
<div class="col-2 hidden-sm">sm</div>
<div class="col-2 hidden-md">md</div>
<div class="col-2 hidden-lg">lg</div>
<div class="col-2 hidden-xl">xl</div>
</div>
<div class="col-2 hide-xs">hide-xs</div>
<div class="col-2 hide-sm">hide-sm</div>
<div class="col-2 hide-md">hide-md</div>
<div class="col-2 hide-lg">hide-lg</div>
<div class="col-2 hide-xl">hide-xl</div>
</div>
</div>

29
source/docs/grid-system.md
View File

@@ -110,7 +110,7 @@ You can mix and match sized columns with unsized columns for flexibility. Unsize
There are five responsive tiers in Shoelace: `xs`, `sm`, `md`, `lg`, and `xl`. You can use these tiers to change the way the grid responds at various breakpoints.
Use the `col-{tier}-*` modifier to target a specific tier. Note that tiers are based on minimum widths, so using `col-sm-6` will target `sm`, `md`, `lg`, and `xl`. However, you can target multiple tiers on the same column as needed.
Use the `col-[xs|sm|md|lg|xl]-*` modifier to target a specific tier. Note that tiers are based on minimum widths, so using `col-sm-6` will target `sm`, `md`, `lg`, and `xl`. However, you can target multiple tiers on the same column as needed.
For example, the following columns will stack on `xs` screens, take up 50% each (6 out of 12 columns) on `sm` screens, and 75% and 25% respectively on `md`, `lg`, and `xl` screens.
@@ -130,7 +130,7 @@ For example, the following columns will stack on `xs` screens, take up 50% each
### Offsetting Columns
You can offset columns using `offset-*` and `offset-{tier}-*` modifiers. To reset an offset at a specific tier, use `offset-{tier}-0`.
You can offset columns using `offset-*` and `offset-[xs|sm|md|lg|xl]-*` modifiers. To reset an offset at a specific tier, use `offset-[xs|sm|md|lg|xl]-0`.
```html
<div class="row">
@@ -150,7 +150,7 @@ You can offset columns using `offset-*` and `offset-{tier}-*` modifiers. To rese
### Reordering Columns
You can control the visual order of columns using the `order-*` and `order-{tier}-*` modifiers. Note that columns without an order modifier will not be affected.
You can control the visual order of columns using the `order-*` and `order-[xs|sm|md|lg|xl]-*` modifiers. Note that columns without an order modifier will not be affected.
```html
<div class="row">
@@ -174,24 +174,21 @@ You can hide columns based on breakpoints using [display utilities](utilities.ht
```html
<div class="row">
<div class="col-2">always</div>
<div class="col-2 hidden-xs">hidden-xs</div>
<div class="col-2 hidden-sm">hidden-sm</div>
<div class="col-2 hidden-md">hidden-md</div>
<div class="col-2 hidden-lg">hidden-lg</div>
<div class="col-2 hidden-xl">hidden-xl</div>
</div>
<div class="col-2 hide-xs">hide-xs</div>
<div class="col-2 hide-sm">hide-sm</div>
<div class="col-2 hide-md">hide-md</div>
<div class="col-2 hide-lg">hide-lg</div>
<div class="col-2 hide-xl">hide-xl</div>
</div>
```
<div class="container grid-example">
<div class="row">
<div class="col-2 hidden-xs">xs</div>
<div class="col-2 hidden-sm">sm</div>
<div class="col-2 hidden-md">md</div>
<div class="col-2 hidden-lg">lg</div>
<div class="col-2 hidden-xl">xl</div>
</div>
<div class="col-2 hide-xs">hide-xs</div>
<div class="col-2 hide-sm">hide-sm</div>
<div class="col-2 hide-md">hide-md</div>
<div class="col-2 hide-lg">hide-lg</div>
<div class="col-2 hide-xl">hide-xl</div>
</div>
</div>