Finished customization docs
Added customization documentation for utility module, fixed typos and problems in some others.
This commit is contained in:
Angelos Chalaris
parent
9e3aadc93e
commit
c282a31089
|
|
@ -264,7 +264,7 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-mark-alt-color (<span class="fore-primary">$mark-alt-name</span>, <span class="fore-primary">$mark-alt-back-color</span>. <span class="fore-tertiary">$mark-alt-fore-color</span>)</td>
|
||||
<td data-label="Mixin">make-mark-alt-color (<span class="fore-primary">$mark-alt-name</span>, <span class="fore-primary">$mark-alt-back-color</span>, <span class="fore-tertiary">$mark-alt-fore-color</span>)</td>
|
||||
<td data-label="Description">Creates a new <code><mark></code> color variant using the specified values.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -353,7 +353,7 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-alert-alt-color (<span class="fore-primary">$alert-alt-name</span>, <span class="fore-primary">$alert-alt-back-color</span>. <span class="fore-tertiary">$alert-alt-fore-color</span>)</td>
|
||||
<td data-label="Mixin">make-alert-alt-color (<span class="fore-primary">$alert-alt-name</span>, <span class="fore-primary">$alert-alt-back-color</span>, <span class="fore-tertiary">$alert-alt-fore-color</span>)</td>
|
||||
<td data-label="Description">Creates a new alert color variant using the specified values.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -438,7 +438,7 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-tooltip-alt-color (<span class="fore-primary">$tooltip-alt-name</span>, <span class="fore-primary">$tooltip-alt-back-color</span>. <span class="fore-tertiary">$tooltip-alt-fore-color</span>)</td>
|
||||
<td data-label="Mixin">make-tooltip-alt-color (<span class="fore-primary">$tooltip-alt-name</span>, <span class="fore-primary">$tooltip-alt-back-color</span>, <span class="fore-tertiary">$tooltip-alt-fore-color</span>)</td>
|
||||
<td data-label="Description">Creates a new tooltip color variant using the specified values.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$spinner-donut-size</td><td data-label="Type">Size (single value, <code>px</code> preferred)</td>
|
||||
<td data-label="Description">The size of donut spinner components (determines multiple values of the elements)</td><td data-label="Sample value">20px</td>
|
||||
<td data-label="Description">The size of donut spinner components (determines multiple values of the element)</td><td data-label="Sample value">20px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
|
|
@ -175,7 +175,7 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-progress-alt-color (<span class="fore-primary">$progress-alt-name</span>, <span class="fore-primary">$progress-alt-fore-color</span>. <span class="fore-tertiary">$progress-alt-back-color</span>)</td>
|
||||
<td data-label="Mixin">make-progress-alt-color (<span class="fore-primary">$progress-alt-name</span>, <span class="fore-primary">$progress-alt-fore-color</span>, <span class="fore-tertiary">$progress-alt-back-color</span>)</td>
|
||||
<td data-label="Description">Creates a new <code><progress></code> color variant using the specified values.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -235,7 +235,7 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$progress-alt-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">(Optional) Border stylefor the <code><progress></code> style variant</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
||||
<td data-label="Description">(Optional) Border style for the <code><progress></code> style variant</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$progress-alt-border-radius</td><td data-label="Type">Border radius</td>
|
||||
|
|
@ -287,7 +287,7 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-spinner-donut-alt-color (<span class="fore-primary">$spinner-donut-alt-name</span>, <span class="fore-primary">$spinner-donut-alt-back-color</span>. <span class="fore-primary">$spinner-donut-alt-fore-color</span>)</td>
|
||||
<td data-label="Mixin">make-spinner-donut-alt-color (<span class="fore-primary">$spinner-donut-alt-name</span>, <span class="fore-primary">$spinner-donut-alt-back-color</span>, <span class="fore-primary">$spinner-donut-alt-fore-color</span>)</td>
|
||||
<td data-label="Description">Creates a new donut spinner color variant using the specified values.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -331,7 +331,7 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$spinner-donut-alt-size</td><td data-label="Type">Size (single value, <code>px</code> preferred)</td>
|
||||
<td data-label="Description">Size of the donut spinner style variant</td><td data-label="Sample value">32px</td>
|
||||
<td data-label="Description">Size of the donut spinner style variant (determines multiple values of the element)</td><td data-label="Sample value">32px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$spinner-donut-alt-border-thickness</td><td data-label="Type">Border width</td>
|
||||
|
|
|
|||
|
|
@ -66,6 +66,477 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Visibility helpers & legacy features</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>utility</strong> module's visiblity helpers use a couple of custom classes, while certain legacy features are also available via certain variables and custom class definitions.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$hidden-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for hidden elements</td><td data-label="Sample value">'hidden'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$visually-hidden-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for visually hidden elements</td><td data-label="Sample value">'visually-hidden'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$include-floats</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Enables floats (legacy feature)<sup><a href="#util-note-one">1</a></sup></td><td data-label="Sample value">false</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$float-prefix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class prefix for float classes<sup><a href="#util-note-one">1</a></sup></td><td data-label="Sample value">'float'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$include-clearfix</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Enables the clearfix (legacy feature)<sup><a href="#util-note-two">2</a></sup></td><td data-label="Sample value">false</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$clearfix-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for clearfix<sup><a href="#util-note-two">2</a></sup></td><td data-label="Sample value">'clearfix'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$include-center-block</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Enables the center block (legacy feature)<sup><a href="#util-note-three">3</a></sup></td><td data-label="Sample value">false</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$center-block-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for center block<sup><a href="#util-note-three">3</a></sup></td><td data-label="Sample value">'center-block'</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes:</h3>
|
||||
<ol>
|
||||
<li id="util-note-one">The value of <code>$float-prefix</code> will only be used if <code>$include-floats</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
<li id="util-note-two">The value of <code>$clearfix-name</code> will only be used if <code>$include-clearfix</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
<li id="util-note-three">The value of <code>$center-block-name</code> will only be used if <code>$include-center-block</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Breadcrumbs</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>utility</strong> module's breadcrumbs use a custom class and a few varaibles to allow you to customize their appearance.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$breadcrumbs-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the breadcrumbs component</td><td data-label="Sample value">'breadcrumbs'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$breadcrumbs-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for the breadcrumbs component</td><td data-label="Sample value">#e0e0e0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$breadcrumbs-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for the breadcrumbs component</td><td data-label="Sample value">10px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$breadcrumbs-height</td><td data-label="Type">Height</td>
|
||||
<td data-label="Description">Height for the breadcrumbs component</td><td data-label="Sample value">32px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$breadcrumbs-separator-width</td><td data-label="Type">Width</td>
|
||||
<td data-label="Description">Width of the breadcrumbs component's separator</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$breadcrumbs-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for the breadcrumbs component</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$breadcrumbs-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for the breadcrumbs component</td><td data-label="Sample value">4px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$breadcrumbs-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for the breadcrumbs component</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Close icon</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>utility</strong> module's close icon uses a custom class and a few variable to customize its appearance.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$close-icon-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the close icon component</td><td data-label="Sample value">'close'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$close-icon-size</td><td data-label="Type">Font size</td>
|
||||
<td data-label="Description">Size of the close icon component</td><td data-label="Sample value">32px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$close-icon-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for the close icon component</td><td data-label="Sample value">#e0e0e0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$close-icon-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Foreground color for the close icon component</td><td data-label="Sample value">#212121</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Generic border & shadow mixins</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>utility</strong> module contains a few mixins for creating generic borders, border styles and shadows.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<caption>Mixin definitions</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-border-generic (<span class="fore-primary">$border-generic-name</span>)</td>
|
||||
<td data-label="Description">Creates a new class that applies a generic border, based on the specified value.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-border-radial-style (<span class="fore-primary">$border-radial-name</span>, <span class="fore-primary">$border-radial-radius</span>)</td>
|
||||
<td data-label="Description">Creates a new class that applies a generic radial border, based on the specified values.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-box-shadow-generic (<span class="fore-primary">$box-shadow-name</span>, <span class="fore-primary">$box-shadow-value</span>)</td>
|
||||
<td data-label="Description">Creates a new class that applies a generic box shadow, based on the specified values.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table width="100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-border-generic</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$border-generic-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the generic border class</td><td data-label="Sample value">'bordered'</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-border-generic</span> ('bordered');</pre>
|
||||
<br/>
|
||||
<table width="100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-border-radial-style</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$border-radial-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the generic radial border class</td><td data-label="Sample value">'rounded'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$border-radial-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for the generic radial border class</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-border-radial-style</span> ('rounded', 2px);</pre>
|
||||
<br/>
|
||||
<table width="100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-box-shadow-generic</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$box-shadow-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the generic box shadow class</td><td data-label="Sample value">'shadow-small'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$box-shadow-value</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for the generic box shadow class</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-box-shadow-generic</span> ('shadow-small', 0 1px 3px rgba(0,0,0, 0.1));</pre>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Responsive sizing & spacing mixins</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>utility</strong> module contains a couple of mixins for creating responsive sizing and spacing classes.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<caption>Mixin definitions</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-margin-responsive (<span class="fore-primary">$margin-name</span>, <span class="fore-primary">$margin-small-value</span>, <span class="fore-primary">$margin-medium-value</span>, <span class="fore-primary">$margin-large-value</span>, <span class="fore-tertiary">$margin-medium-breakpoint</span>, <span class="fore-tertiary">$margin-large-breakpoint</span>, <span class="fore-tertiary">$margin-use-four-step-grid</span>, <span class="fore-tertiary">$margin-small-breakpoint</span>, <span class="fore-tertiary">$margin-extra-small-value</span>)</td>
|
||||
<td data-label="Description">Creates a responsive margin class using the specified values.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-padding-responsive (<span class="fore-primary">$padding-name</span>, <span class="fore-primary">$padding-small-value</span>, <span class="fore-primary">$padding-medium-value</span>, <span class="fore-primary">$padding-large-value</span>, <span class="fore-tertiary">$padding-medium-breakpoint</span>, <span class="fore-tertiary">$padding-large-breakpoint</span>, <span class="fore-tertiary">$padding-use-four-step-grid</span>, <span class="fore-tertiary">$padding-small-breakpoint</span>, <span class="fore-tertiary">$padding-extra-small-value</span>)</td>
|
||||
<td data-label="Description">Creates a responsive padding class using the specified values.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table width="100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-margin-responsive</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$margin-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the responsive margin class</td><td data-label="Sample value">'urgent'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$margin-small-value</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin of the responsive margin class on smaller screens</td><td data-label="Sample value">4px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$margin-medium-value</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin of the responsive margin class on medium-sized screens</td><td data-label="Sample value">6px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$margin-large-value</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin of the responsive margin class on larger screens</td><td data-label="Sample value">8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$margin-medium-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">(Optional) Breakpoint of the responsive margin class for medium-sized screens</td><td data-label="Sample value">768px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$margin-large-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">(Optional) Breakpoint of the responsive margin class for larger screens</td><td data-label="Sample value">1280px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$margin-use-four-step-grid</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">(Optional) Enables the use of the four-step grid for the responsive margin class</td><td data-label="Sample value">false</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$margin-small-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">(Optional) Breakpoint of the responsive margin class for smaller screens (four-step grid only)</td><td data-label="Sample value">480px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$margin-extra-small-value</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">(Optional) Margin of the responsive margin class on extra small screens (four-step grid only)</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-margin-responsive</span> ('responsive-margin', 4px, 6px, 8px, 768px, 1280px, true, 480px, 2px);</pre>
|
||||
<br/>
|
||||
<table width="100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-padding-responsive</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$padding-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the responsive padding class</td><td data-label="Sample value">'urgent'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$padding-small-value</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding of the responsive padding class on smaller screens</td><td data-label="Sample value">4px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$padding-medium-value</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding of the responsive padding class on medium-sized screens</td><td data-label="Sample value">6px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$padding-large-value</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding of the responsive padding class on larger screens</td><td data-label="Sample value">8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$padding-medium-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">(Optional) Breakpoint of the responsive padding class for medium-sized screens</td><td data-label="Sample value">768px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$padding-large-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">(Optional) Breakpoint of the responsive padding class for larger screens</td><td data-label="Sample value">1280px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$padding-use-four-step-grid</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">(Optional) Enables the use of the four-step grid for the responsive padding class</td><td data-label="Sample value">false</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$padding-small-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">(Optional) Breakpoint of the responsive padding class for smaller screens (four-step grid only)</td><td data-label="Sample value">480px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$padding-extra-small-value</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">(Optional) Padding of the responsive padding class on extra small screens (four-step grid only)</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-padding-responsive</span> ('responsive-padding', 4px, 6px, 8px, 768px, 1280px, true, 480px, 2px);</pre>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Responsive visibility helper mixins</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>utility</strong> module contains a couple of mixins for creating responsive visibility helpers.</p><br/>
|
||||
<table width="100%" class="striped">
|
||||
<caption>Mixin definitions</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-hidden-responsive (<span class="fore-primary">$hidden-prefix</span>, <span class="fore-tertiary">$hidden-medium-breakpoint</span>, <span class="fore-tertiary">$hidden-large-breakpoint</span>,<span class="fore-tertiary">$hidden-small-suffix</span>, <span class="fore-tertiary">$hidden-medium-suffix</span>, <span class="fore-tertiary">$hidden-large-suffix</span>, <span class="fore-tertiary">$hidden-use-four-step-grid</span>, <span class="fore-tertiary">$hidden-small-breakpoint</span>, <span class="fore-tertiary">$hidden-extra-small-suffix</span>)</td>
|
||||
<td data-label="Description">Creates a responsive class for hiding elements using the specified values.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-visually-hidden-responsive (<span class="fore-primary">$visually-hidden-prefix</span>, <span class="fore-tertiary">$visually-hidden-medium-breakpoint</span>, <span class="fore-tertiary">$visually-hidden-large-breakpoint</span>,<span class="fore-tertiary">$visually-hidden-small-suffix</span>, <span class="fore-tertiary">$visually-hidden-medium-suffix</span>, <span class="fore-tertiary">$visually-hidden-large-suffix</span>, <span class="fore-tertiary">$visually-hidden-use-four-step-grid</span>, <span class="fore-tertiary">$visually-hidden-small-breakpoint</span>, <span class="fore-tertiary">$visually-hidden-extra-small-suffix</span>)</td>
|
||||
<td data-label="Description">Creates a responsive class for visually hiding elements using the specified values.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table width="100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-hidden-responsive</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$hidden-prefix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class prefix for the responsive hiding class</td><td data-label="Sample value">'hidden'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$hidden-medium-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">(Optional) Breakpoint of the responsive hiding class for medium-sized screens</td><td data-label="Sample value">768px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$hidden-large-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">(Optional) Breakpoint of the responsive hiding class for larger screens</td><td data-label="Sample value">1280px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$hidden-small-suffix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Suffix of the responsive hiding class on smaller screens</td><td data-label="Sample value">'sm</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$hidden-medium-suffix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Suffix of the responsive hiding class on medium-sized screens</td><td data-label="Sample value">'md'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$hidden-large-suffix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Suffix of the responsive hiding class on larger screens</td><td data-label="Sample value">'lg'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$hidden-use-four-step-grid</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">(Optional) Enables the use of the four-step grid for the responsive hiding class</td><td data-label="Sample value">false</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$hidden-small-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">(Optional) Breakpoint of the responsive hiding class for smaller screens (four-step grid only)</td><td data-label="Sample value">480px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$hidden-extra-small-suffix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">(Optional) Suffix of the responsive hiding class on extra small screens (four-step grid only)</td><td data-label="Sample value">'xs'</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-hidden-responsive</span> ('hidden', 768px, 1280px, 'sm', 'md', 'lg', true, 480px, 'xs');</pre>
|
||||
<br/>
|
||||
<table width="100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-visually-hidden-responsive</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$visually-hidden-prefix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class prefix for the responsive visual hiding class</td><td data-label="Sample value">'visually-hidden'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$visually-hidden-medium-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">(Optional) Breakpoint of the responsive visual hiding class for medium-sized screens</td><td data-label="Sample value">768px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$visually-hidden-large-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">(Optional) Breakpoint of the responsive visual hiding class for larger screens</td><td data-label="Sample value">1280px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$visually-hidden-small-suffix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Suffix of the responsive visual hiding class on smaller screens</td><td data-label="Sample value">'sm</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$visually-hidden-medium-suffix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Suffix of the responsive visual hiding class on medium-sized screens</td><td data-label="Sample value">'md'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$visually-hidden-large-suffix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Suffix of the responsive visual hiding class on larger screens</td><td data-label="Sample value">'lg'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$visually-hidden-use-four-step-grid</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">(Optional) Enables the use of the four-step grid for the responsive visual hiding class</td><td data-label="Sample value">false</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$visually-hidden-small-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">(Optional) Breakpoint of the responsive visual hiding class for smaller screens (four-step grid only)</td><td data-label="Sample value">480px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$visually-hidden-extra-small-suffix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">(Optional) Suffix of the responsive visual hiding class on extra small screens (four-step grid only)</td><td data-label="Sample value">'xs'</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-visually-hidden-responsive</span> ('visually-hidden', 768px, 1280px, 'sm', 'md', 'lg', true, 480px, 'xs');</pre>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<p>If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
|
||||
|
|
|
|||
|
|
@ -976,3 +976,4 @@
|
|||
- Documented `tab` module's customization.
|
||||
- Documented `contextual` module's customization.
|
||||
- Documented `progress` module's customization.
|
||||
- Documented customization for `utility` module, finishing developer docs (maybe a proofreading is required, but later).
|
||||
|
|
|
|||
Loading…
Reference in a new issue