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

Sort utils alphabetically

Browse Source
This commit is contained in:
Cory LaViska
2017-08-26 11:32:47 -04:00
parent 26e1d46f9c
commit d0d7c5bc8e
2 changed files with 179 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
docs/utilities.html
View File

@@ -53,95 +53,6 @@
<div id="content">
<h2 id="utilities">Utilities</h2>
<p>Shoelace provides a number of helpful utility classes that make prototyping easier.</p>
<h3 id="text-utilities">Text Utilities</h3>
<p>Text utility classes can be applied to change an element’s text.</p>
<table class="table">
<thead>
<tr>
<th>Class</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>text-primary</code></td>
<td class="text-primary">This is primary text</td>
</tr>
<tr>
<td><code>text-secondary</code></td>
<td class="text-secondary">This is secondary text</td>
</tr>
<tr>
<td><code>text-success</code></td>
<td class="text-success">This is success text</td>
</tr>
<tr>
<td><code>text-info</code></td>
<td class="text-info">This is info text</td>
</tr>
<tr>
<td><code>text-warning</code></td>
<td class="text-warning">This is warning text</td>
</tr>
<tr>
<td><code>text-danger</code></td>
<td class="text-danger">This is danger text</td>
</tr>
<tr>
<td><code>text-light</code></td>
<td class="text-light">This is light text</td>
</tr>
<tr>
<td><code>text-dark</code></td>
<td class="text-dark">This is dark text</td>
</tr>
<tr>
<td><code>text-small</code></td>
<td class="text-small">This is small text</td>
</tr>
<tr>
<td><code>text-bold</code></td>
<td class="text-bold">This is bold text</td>
</tr>
<tr>
<td><code>text-italic</code></td>
<td class="text-italic">This is italic text</td>
</tr>
<tr>
<td><code>text-left</code></td>
<td class="text-left">This is left-aligned text</td>
</tr>
<tr>
<td><code>text-center</code></td>
<td class="text-center">This is centered text</td>
</tr>
<tr>
<td><code>text-right</code></td>
<td class="text-right">This is right-aligned text</td>
</tr>
<tr>
<td><code>text-justify</code></td>
<td class="text-justify">This is justified text</td>
</tr>
<tr>
<td><code>text-nowrap</code></td>
<td class="text-nowrap">This is text that won’t wrap</td>
</tr>
<tr>
<td><code>text-lowercase</code></td>
<td class="text-lowercase">This is lowercase text</td>
</tr>
<tr>
<td><code>text-uppercase</code></td>
<td class="text-uppercase">This is uppercase text</td>
</tr>
<tr>
<td><code>text-capitalize</code></td>
<td class="text-capitalize">This is capitalized text</td>
</tr>
</tbody>
</table>
<h3 id="background-utilities">Background Utilities</h3>
<p>Background utility classes can be applied to change an element’s background color.</p>
<pre><code class="lang-html">&lt;div class=&quot;bg-primary&quot;&gt;Primary&lt;/div&gt;
@@ -255,6 +166,94 @@ mar-[t|r|b|l|x|y]-[0|xs|sm|md|lg|xl]
<pre><code class="lang-html">&lt;div class=&quot;pad-l-md mar-b-0&quot;&gt;
</code></pre>
<p>You can also use <code>mar-[x|y|xy]-auto</code> to set automatic margins horizontally and/or vertically.</p>
<h3 id="text-utilities">Text Utilities</h3>
<p>Text utility classes can be applied to change an element’s text.</p>
<table class="table">
<thead>
<tr>
<th>Class</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>text-primary</code></td>
<td class="text-primary">This is primary text</td>
</tr>
<tr>
<td><code>text-secondary</code></td>
<td class="text-secondary">This is secondary text</td>
</tr>
<tr>
<td><code>text-success</code></td>
<td class="text-success">This is success text</td>
</tr>
<tr>
<td><code>text-info</code></td>
<td class="text-info">This is info text</td>
</tr>
<tr>
<td><code>text-warning</code></td>
<td class="text-warning">This is warning text</td>
</tr>
<tr>
<td><code>text-danger</code></td>
<td class="text-danger">This is danger text</td>
</tr>
<tr>
<td><code>text-light</code></td>
<td class="text-light">This is light text</td>
</tr>
<tr>
<td><code>text-dark</code></td>
<td class="text-dark">This is dark text</td>
</tr>
<tr>
<td><code>text-small</code></td>
<td class="text-small">This is small text</td>
</tr>
<tr>
<td><code>text-bold</code></td>
<td class="text-bold">This is bold text</td>
</tr>
<tr>
<td><code>text-italic</code></td>
<td class="text-italic">This is italic text</td>
</tr>
<tr>
<td><code>text-left</code></td>
<td class="text-left">This is left-aligned text</td>
</tr>
<tr>
<td><code>text-center</code></td>
<td class="text-center">This is centered text</td>
</tr>
<tr>
<td><code>text-right</code></td>
<td class="text-right">This is right-aligned text</td>
</tr>
<tr>
<td><code>text-justify</code></td>
<td class="text-justify">This is justified text</td>
</tr>
<tr>
<td><code>text-nowrap</code></td>
<td class="text-nowrap">This is text that won’t wrap</td>
</tr>
<tr>
<td><code>text-lowercase</code></td>
<td class="text-lowercase">This is lowercase text</td>
</tr>
<tr>
<td><code>text-uppercase</code></td>
<td class="text-uppercase">This is uppercase text</td>
</tr>
<tr>
<td><code>text-capitalize</code></td>
<td class="text-capitalize">This is capitalized text</td>
</tr>
</tbody>
</table>
</div>
</div>

182
source/docs/utilities.md
View File

@@ -8,97 +8,6 @@ description: Use these utilities for quick prototyping.
Shoelace provides a number of helpful utility classes that make prototyping easier.
### Text Utilities
Text utility classes can be applied to change an element’s text.
<table class="table">
<thead>
<tr>
<th>Class</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>`text-primary`</td>
<td class="text-primary">This is primary text</td>
</tr>
<tr>
<td>`text-secondary`</td>
<td class="text-secondary">This is secondary text</td>
</tr>
<tr>
<td>`text-success`</td>
<td class="text-success">This is success text</td>
</tr>
<tr>
<td>`text-info`</td>
<td class="text-info">This is info text</td>
</tr>
<tr>
<td>`text-warning`</td>
<td class="text-warning">This is warning text</td>
</tr>
<tr>
<td>`text-danger`</td>
<td class="text-danger">This is danger text</td>
</tr>
<tr>
<td>`text-light`</td>
<td class="text-light">This is light text</td>
</tr>
<tr>
<td>`text-dark`</td>
<td class="text-dark">This is dark text</td>
</tr>
<tr>
<td>`text-small`</td>
<td class="text-small">This is small text</td>
</tr>
<tr>
<td>`text-bold`</td>
<td class="text-bold">This is bold text</td>
</tr>
<tr>
<td>`text-italic`</td>
<td class="text-italic">This is italic text</td>
</tr>
<tr>
<td>`text-left`</td>
<td class="text-left">This is left-aligned text</td>
</tr>
<tr>
<td>`text-center`</td>
<td class="text-center">This is centered text</td>
</tr>
<tr>
<td>`text-right`</td>
<td class="text-right">This is right-aligned text</td>
</tr>
<tr>
<td>`text-justify`</td>
<td class="text-justify">This is justified text</td>
</tr>
<tr>
<td>`text-nowrap`</td>
<td class="text-nowrap">This is text that won’t wrap</td>
</tr>
<tr>
<td>`text-lowercase`</td>
<td class="text-lowercase">This is lowercase text</td>
</tr>
<tr>
<td>`text-uppercase`</td>
<td class="text-uppercase">This is uppercase text</td>
</tr>
<tr>
<td>`text-capitalize`</td>
<td class="text-capitalize">This is capitalized text</td>
</tr>
</tbody>
</table>
### Background Utilities
Background utility classes can be applied to change an element’s background color.
@@ -248,3 +157,94 @@ Example:
```
You can also use `mar-[x|y|xy]-auto` to set automatic margins horizontally and/or vertically.
### Text Utilities
Text utility classes can be applied to change an element’s text.
<table class="table">
<thead>
<tr>
<th>Class</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>`text-primary`</td>
<td class="text-primary">This is primary text</td>
</tr>
<tr>
<td>`text-secondary`</td>
<td class="text-secondary">This is secondary text</td>
</tr>
<tr>
<td>`text-success`</td>
<td class="text-success">This is success text</td>
</tr>
<tr>
<td>`text-info`</td>
<td class="text-info">This is info text</td>
</tr>
<tr>
<td>`text-warning`</td>
<td class="text-warning">This is warning text</td>
</tr>
<tr>
<td>`text-danger`</td>
<td class="text-danger">This is danger text</td>
</tr>
<tr>
<td>`text-light`</td>
<td class="text-light">This is light text</td>
</tr>
<tr>
<td>`text-dark`</td>
<td class="text-dark">This is dark text</td>
</tr>
<tr>
<td>`text-small`</td>
<td class="text-small">This is small text</td>
</tr>
<tr>
<td>`text-bold`</td>
<td class="text-bold">This is bold text</td>
</tr>
<tr>
<td>`text-italic`</td>
<td class="text-italic">This is italic text</td>
</tr>
<tr>
<td>`text-left`</td>
<td class="text-left">This is left-aligned text</td>
</tr>
<tr>
<td>`text-center`</td>
<td class="text-center">This is centered text</td>
</tr>
<tr>
<td>`text-right`</td>
<td class="text-right">This is right-aligned text</td>
</tr>
<tr>
<td>`text-justify`</td>
<td class="text-justify">This is justified text</td>
</tr>
<tr>
<td>`text-nowrap`</td>
<td class="text-nowrap">This is text that won’t wrap</td>
</tr>
<tr>
<td>`text-lowercase`</td>
<td class="text-lowercase">This is lowercase text</td>
</tr>
<tr>
<td>`text-uppercase`</td>
<td class="text-uppercase">This is uppercase text</td>
</tr>
<tr>
<td>`text-capitalize`</td>
<td class="text-capitalize">This is capitalized text</td>
</tr>
</tbody>
</table>