diff options
Add Colors utilities #205
1 files changed, 171 insertions, 84 deletions
| -rw-r--r-- | docs/utilities.html | 255 |
diff --git a/docs/utilities.html b/docs/utilities.html index 27706a7..8739d52 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -47,22 +47,28 @@ <a href="utilities.html">Utilities</a> <ul class="nav"> <li class="nav-item"> - <a href="utilities.html#position">Position</a> + <a href="utilities.html#colors">Colors</a> </li> <li class="nav-item"> <a href="utilities.html#display">Display</a> </li> <li class="nav-item"> - <a href="utilities.html#text">Text</a> + <a href="utilities.html#divider">Divider</a> </li> <li class="nav-item"> - <a href="utilities.html#shapes">Shapes</a> + <a href="utilities.html#loading">Loading</a> </li> <li class="nav-item"> - <a href="utilities.html#divider">Divider</a> + <a href="utilities.html#position">Position</a> </li> <li class="nav-item"> - <a href="utilities.html#loading">Loading</a> + <a href="utilities.html#shadow">Shadow</a> + </li> + <li class="nav-item"> + <a href="utilities.html#shapes">Shapes</a> + </li> + <li class="nav-item"> + <a href="utilities.html#text">Text</a> </li> </ul> </li> @@ -74,30 +80,77 @@ <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> <div class="docs-content column col-9 col-sm-12"> - <section id="position" class="container"> - <header class="text-center"><h3><a href="#position" class="anchor" aria-hidden="true">#</a>Position utilities</h3></header> + <section id="colors" class="container"> + <header class="text-center"><h3><a href="#colors" class="anchor" aria-hidden="true">#</a>Color utilities</h3></header> <section class="notes"> - <p><strong>Position utilities</strong> are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p> + <p><strong>Color utilities</strong> are used for changing colors for text, link and background.</p> + </section> + <header class="text-center"><h4>Text colors</h4></header> + <section class="notes"> + <p> + <span class="text-primary p-5">primary color</span> + <span class="text-secondary bg-primary p-5 rounded">secondary color</span> + <span class="text-gray p-5">gray color</span> + <span class="text-light bg-dark p-5 rounded">light color</span> + <span class="text-success p-5">success color</span> + <span class="text-warning p-5">warning color</span> + <span class="text-error p-5">error color</span> + </p> </section> -<!-- position utilities example --> -<pre class="code" data-lang="HTML"><code><span class="com"><!-- clear float --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"clearfix"</span>><<span class="tag">/div</span>> -<span class="com"><!-- float: left and right --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"float-left"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"float-right"</span>><<span class="tag">/div</span>> -<span class="com"><!-- position: relative, absolute and fixed --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"rel"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"abs"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"fixed"</span>><<span class="tag">/div</span>> -<span class="com"><!-- centered block --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"centered"</span>><<span class="tag">/div</span>> -<span class="com"><!-- margin: 10px and 5px in 4 directions. mt-10 = margin-top: 10px; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"mt-10"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"mt-5"</span>><<span class="tag">/div</span>> -<span class="com"><!-- padding: 10px and 5px in 4 directions. pt-10 = padding-top: 10px; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"pt-10"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"pt-5"</span>><<span class="tag">/div</span>> +<!-- colors example --> +<pre class="code" data-lang="HTML"><code><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-primary"</span>>primary color<<span class="tag">/span</span>> +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-secondary"</span>>secondary color<<span class="tag">/span</span>> +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-gray"</span>>gray color<<span class="tag">/span</span>> +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-light"</span>>light color<<span class="tag">/span</span>> +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-success"</span>>success color<<span class="tag">/span</span>> +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-warning"</span>>warning color<<span class="tag">/span</span>> +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-error"</span>>error color<<span class="tag">/span</span>> +</code></pre> + + <section class="notes"> + <p> + <a class="text-primary p-5" href="#colors">primary link</a> + <a class="text-secondary bg-primary p-5 rounded" href="#colors">secondary link</a> + <a class="text-gray p-5" href="#colors">gray link</a> + <a class="text-light bg-dark p-5 rounded" href="#colors">light link</a> + <a class="text-success p-5" href="#colors">success link</a> + <a class="text-warning p-5" href="#colors">warning link</a> + <a class="text-error p-5" href="#colors">error link</a> + </p> + </section> + +<!-- colors example --> +<pre class="code" data-lang="HTML"><code><<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-primary"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>primary color<<span class="tag">/a</span>> +<<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-secondary"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>secondary color<<span class="tag">/a</span>> +<<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-gray"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>gray color<<span class="tag">/a</span>> +<<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-light"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>light color<<span class="tag">/a</span>> +<<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-success"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>success color<<span class="tag">/a</span>> +<<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-warning"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>warning color<<span class="tag">/a</span>> +<<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-error"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>error color<<span class="tag">/a</span>> +</code></pre> + + <header class="text-center"><h4>Background colors</h4></header> + <section class="notes"> + <p> + <span class="bg-primary text-light p-5 rounded">primary bg</span> + <span class="bg-secondary text-primary p-5 rounded">secondary bg</span> + <span class="bg-dark text-light p-5 rounded">dark bg</span> + <span class="bg-gray p-5 rounded">gray bg</span> + <span class="bg-success text-light p-5 rounded">success bg</span> + <span class="bg-warning text-light p-5 rounded">warning bg</span> + <span class="bg-error text-light p-5 rounded">error bg</span> + </p> + </section> + +<!-- colors example --> +<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-primary"</span>>primary bg<<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-secondary"</span>>secondary bg<<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-dark"</span>>dark bg<<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-gray"</span>>gray bg<<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-success"</span>>success bg<<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-warning"</span>>warning bg<<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-error"</span>>error bg<<span class="tag">/div</span>> </code></pre> </section> @@ -133,63 +186,6 @@ </section> - <section id="text" class="container"> - <header class="text-center"><h3><a href="#text" class="anchor" aria-hidden="true">#</a>Text utilities</h3></header> - <section class="notes"> - <p><strong>Text utilities</strong> are used for text alignment, styles and overflow things.</p> - </section> - -<!-- text utilities example --> -<pre class="code" data-lang="HTML"><code><span class="com"><!-- left-aligned text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-left"</span>><<span class="tag">/div</span>> -<span class="com"><!-- center-aligned text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-center"</span>><<span class="tag">/div</span>> -<span class="com"><!-- right-aligned text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-right"</span>><<span class="tag">/div</span>> -<span class="com"><!-- justified text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-justify"</span>><<span class="tag">/div</span>> - -<span class="com"><!-- Lowercased text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-lowercase"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Uppercased text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-uppercase"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Capitalized text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-capitalize"</span>><<span class="tag">/div</span>> - -<span class="com"><!-- Normal weight text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-normal"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Bold text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-bold"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Italicized text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-italic"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Larger text (120%) --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-large"</span>><<span class="tag">/div</span>> - -<span class="com"><!-- Overflow behavior: display an ellipsis to represent clipped text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-ellipsis"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Overflow behavior: truncate the text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-clip"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Text may be broken at arbitrary points --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-break"</span>><<span class="tag">/div</span>> -</code></pre> - - </section> - - <section id="shapes" class="container"> - <header class="text-center"><h3><a href="#shapes" class="anchor" aria-hidden="true">#</a>Shape utilities</h3></header> - <section class="notes"> - <p><strong>Shape utilities</strong> are used for change element shapes.</p> - </section> - -<!-- shape utilities example --> -<pre class="code" data-lang="HTML"><code><span class="com"><!-- rounded element --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"rounded"</span>><<span class="tag">/div</span>> -<span class="com"><!-- circle element --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"circle"</span>><<span class="tag">/div</span>> -</code></pre> - - </section> - <section id="divider" class="container"> <header class="text-center"><h3><a href="#divider" class="anchor" aria-hidden="true">#</a>Divider</h3></header> <section class="notes"> @@ -243,7 +239,7 @@ </div> </div> -<!-- shape utilities example --> +<!-- divider utilities example --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- divider element --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"divider"</span>><<span class="tag">/div</span>> <span class="com"><!-- divider element with text --></span> @@ -280,6 +276,97 @@ </section> + <section id="position" class="container"> + <header class="text-center"><h3><a href="#position" class="anchor" aria-hidden="true">#</a>Position utilities</h3></header> + <section class="notes"> + <p><strong>Position utilities</strong> are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p> + </section> + +<!-- position utilities example --> +<pre class="code" data-lang="HTML"><code><span class="com"><!-- clear float --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"clearfix"</span>><<span class="tag">/div</span>> +<span class="com"><!-- float: left and right --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"float-left"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"float-right"</span>><<span class="tag">/div</span>> +<span class="com"><!-- position: relative, absolute and fixed --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"rel"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"abs"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"fixed"</span>><<span class="tag">/div</span>> +<span class="com"><!-- centered block --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"centered"</span>><<span class="tag">/div</span>> +<span class="com"><!-- margin: 10px and 5px in 4 directions. mt-10 = margin-top: 10px; --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"mt-10"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"mt-5"</span>><<span class="tag">/div</span>> +<span class="com"><!-- m-10 = margin: 10px; --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"m-10"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"m-5"</span>><<span class="tag">/div</span>> +<span class="com"><!-- padding: 10px and 5px in 4 directions. pt-10 = padding-top: 10px; --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"pt-10"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"pt-5"</span>><<span class="tag">/div</span>> +<span class="com"><!-- p-10 = padding: 10px; --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"p-10"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"p-5"</span>><<span class="tag">/div</span>> +</code></pre> + + </section> + + <section id="shapes" class="container"> + <header class="text-center"><h3><a href="#shapes" class="anchor" aria-hidden="true">#</a>Shape utilities</h3></header> + <section class="notes"> + <p><strong>Shape utilities</strong> are used for change element shapes.</p> + </section> + +<!-- shape utilities example --> +<pre class="code" data-lang="HTML"><code><span class="com"><!-- rounded element --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"rounded"</span>><<span class="tag">/div</span>> +<span class="com"><!-- circle element --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"circle"</span>><<span class="tag">/div</span>> +</code></pre> + + </section> + + <section id="text" class="container"> + <header class="text-center"><h3><a href="#text" class="anchor" aria-hidden="true">#</a>Text utilities</h3></header> + <section class="notes"> + <p><strong>Text utilities</strong> are used for text alignment, styles and overflow things.</p> + </section> + +<!-- text utilities example --> +<pre class="code" data-lang="HTML"><code><span class="com"><!-- left-aligned text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-left"</span>><<span class="tag">/div</span>> +<span class="com"><!-- center-aligned text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-center"</span>><<span class="tag">/div</span>> +<span class="com"><!-- right-aligned text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-right"</span>><<span class="tag">/div</span>> +<span class="com"><!-- justified text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-justify"</span>><<span class="tag">/div</span>> + +<span class="com"><!-- Lowercased text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-lowercase"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Uppercased text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-uppercase"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Capitalized text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-capitalize"</span>><<span class="tag">/div</span>> + +<span class="com"><!-- Normal weight text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-normal"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Bold text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-bold"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Italicized text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-italic"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Larger text (120%) --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-large"</span>><<span class="tag">/div</span>> + +<span class="com"><!-- Overflow behavior: display an ellipsis to represent clipped text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-ellipsis"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Overflow behavior: truncate the text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-clip"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Text may be broken at arbitrary points --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-break"</span>><<span class="tag">/div</span>> +</code></pre> + + </section> + <section class="container"> <div class="divider"></div> <ul class="pagination"> |