1
0
mirror of https://github.com/jenil/chota.git synced 2023-08-10 21:13:07 +03:00

add device grids and border utils

This commit is contained in:
Jenil Gogari
2019-03-23 13:54:27 -04:00
parent f19bda80c6
commit c32b24a5d0
8 changed files with 527 additions and 67 deletions

View File

@@ -4,6 +4,7 @@
<ul>
<li><code>text-primary</code> - <span class="text-primary">Primary text</span></li>
<li><code>text-light</code> - <span class="text-light">Light text</span></li>
<li><code>text-white</code> - <span class="bg-primary text-white">White text</span></li>
<li><code>text-dark</code> - <span class="text-dark">Dark text</span></li>
<li><code>text-grey</code> - <span class="text-grey">Grey text</span></li>
<li><code>text-error</code> - <span class="text-error">Error text</span></li>
@@ -14,6 +15,12 @@
<li><code>bg-grey</code> - <span class="bg-grey">Grey background</span></li>
<li><code>bg-error</code> - <span class="bg-error">Error background</span></li>
<li><code>bg-success</code> - <span class="bg-success">Success background</span></li>
<li><code>bd-primary</code> - <span class="bd-primary">primary border</span></li>
<li><code>bd-light</code> - <span class="bd-light">Light border</span></li>
<li><code>bd-dark</code> - <span class="bd-dark">Dark border</span></li>
<li><code>bd-grey</code> - <span class="bd-grey">Grey border</span></li>
<li><code>bd-error</code> - <span class="bd-error">Error border</span></li>
<li><code>bd-success</code> - <span class="bd-success">Success border</span></li>
<li><code>pull-right</code> - floats an element to the right</li>
<li><code>pull-left</code> - floats an element to the left</li>
<li><code>is-text-center</code> - center aligns text</li>
@@ -34,7 +41,8 @@
<li><code>is-marginless</code> - removes any margin</li>
<li><code>clearfix</code> - clears the floats</li>
<li><code>is-hidden</code> - hides the element completely</li>
<li><code>hide-phone</code> - hides the element for screens &lt;480px</li>
<li><code>hide-tablet</code> - hides the element for screens &lt;768px</li>
<li><code>hide-sm</code> - hides the element for screens &lt;600px</li>
<li><code>hide-md</code> - hides the element for screens &gt;=600px and &lt;=1200px</li>
<li><code>hide-lg</code> - hides the element for screens &gt;=1200px</li>
</ul>
</section>