mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-01 19:40:35 +02:00
Customization docs for input_control complete
Added all variables and mixins to the documentation, added captions to all tables up to now to make them look consistent.
This commit is contained in:
Angelos Chalaris
@@ -73,6 +73,7 @@
|
||||
<div class="section">
|
||||
<p>The <strong>core</strong> module's typography rules are quite extensive and deal with background and foreground colors, used fonts, sizing and line height, along with heading, link and paragraph styling.</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>
|
||||
@@ -231,6 +232,7 @@
|
||||
<div class="section">
|
||||
<p>The <strong>core</strong> module contains a plethora of styles for horizontal rules, lists and code elements, as well as a few optional display fixes for certain other elements.</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>
|
||||
|
||||
@@ -75,6 +75,7 @@
|
||||
<div class="section">
|
||||
<p>The <strong>grid</strong> module's systems are based on custom-named classes for containers, rows and columns, as well as reordering and ofsetting classes, breakpoints and padding.</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>
|
||||
|
||||
@@ -74,6 +74,7 @@
|
||||
<div class="section">
|
||||
<p>The <strong>input_control</strong> module's forms and input fields can be easily customized to use different sizes and colors, as well as different class names for groupping.</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>
|
||||
@@ -232,8 +233,9 @@
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Checkboxes & radio buttons</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>navigation</strong> module's checkbox and radio button elements are based on custom rules and depend on the use of <code><label></code> elements and input groups to be stylized and properly displayed.</p><br/>
|
||||
<p>The <strong>input_control</strong> module's checkbox and radio button elements are based on custom rules and depend on the use of <code><label></code> elements and input groups to be stylized and properly displayed.</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>
|
||||
@@ -287,6 +289,184 @@
|
||||
</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>Button & button groups</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>input_control</strong> module's button elements are highly customizable, along with the button groups that can be used in combination with them.</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">$button-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for button elements</td><td data-label="Sample value">#bdbdbd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for button elements</td><td data-label="Sample value">$fore-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for button elements</td><td data-label="Sample value">1px solid #9e9e9e</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for button elements</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for button elements</td><td data-label="Sample value">8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for button elements</td><td data-label="Sample value">8px 12px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for button elements</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-back-opacity</td><td data-label="Type">Opacity</td>
|
||||
<td data-label="Description">Background opacity for button elements (default)</td><td data-label="Sample value">0.65</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-hover-back-opacity</td><td data-label="Type">Opacity</td>
|
||||
<td data-label="Description">Background opacity for button elements (focused)</td><td data-label="Sample value">0.8</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-disabled-opacity</td><td data-label="Type">Opacity</td>
|
||||
<td data-label="Description">Opacity for button elements (focused)</td><td data-label="Sample value">0.65</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-class-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for button elements</td><td data-label="Sample value">'button'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-group-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for button groups</td><td data-label="Sample value">'button-group'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-group-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for button groups</td><td data-label="Sample value">1px solid #9e9e9e</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-group-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for button groups</td><td data-label="Sample value">8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-group-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for button groups</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-group-mobile-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">Breakpoint for button groups on mobile devices</td><td data-label="Sample value">767px</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>Button mixins</h2></div>
|
||||
<div class="section">
|
||||
<p>The <strong>input_control</strong> module contains a couple of mixins for adding custom styles to button elements (color and style variants).</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-button-alt-color (<span class="fore-primary">$button-alt-name</span>, <span class="fore-primary">$button-alt-back-color</span>, <span class="fore-primary">$button-alt-back-opacity</span>, <span class="fore-primary">$button-alt-hover-back-opacity</span>, <span class="fore-tertiary">$button-alt-fore-color</span>)</td>
|
||||
<td data-label="Description">Creates a new button color variant using the specified values.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-button-alt-style (<span class="fore-primary">$button-alt-name</span>, <span class="fore-primary">$button-alt-border-style</span>, <span class="fore-primary">$button-alt-border-radius</span>, <span class="fore-primary">$button-alt-padding</span>, <span class="fore-primary">$button-alt-margin</span>)</td>
|
||||
<td data-label="Description">Creates a new button style variant using the specified values.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table width="100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-button-alt-color</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$button-alt-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the button color variant</td><td data-label="Sample value">'primary'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$button-alt-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for the button color variant</td><td data-label="Sample value">#0277bd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$button-alt-back-opacity</td><td data-label="Type">Opacity</td>
|
||||
<td data-label="Description">Background opacity for the button color variant (default)</td><td data-label="Sample value">0.9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$button-alt-hover-back-opacity</td><td data-label="Type">Opacity</td>
|
||||
<td data-label="Description">Background opacity for the button color variant (focused)</td><td data-label="Sample value">1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$button-alt-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">(Optional) Text color for the button color variant</td><td data-label="Sample value">#fafafa</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-button-alt-color</span> ('primary', #0277bd, 0.9, 1, #fafafa);</pre>
|
||||
<br/>
|
||||
<table width="100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-button-alt-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">$button-alt-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the button style variant</td><td data-label="Sample value">'large'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$button-alt-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for the button style variant</td><td data-label="Sample value">2px solid #9e9e9e</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$button-alt-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for the button style variant</td><td data-label="Sample value">4px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$button-alt-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for the button style variant</td><td data-label="Sample value">12px 18px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$button-alt-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for the button style variant</td><td data-label="Sample value">10px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-button-alt-style</span> ('large', 2px solid #9e9e9e, 4px, 18px, 10px);</pre>
|
||||
<br/>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes:</h3>
|
||||
<ol>
|
||||
<li id="footer-note-one">The value of <code>$footer-sticky-name</code> will only be used if <code>$include-footer-sticky</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
</ol>
|
||||
</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>
|
||||
|
||||
@@ -73,6 +73,7 @@
|
||||
<div class="section">
|
||||
<p>The <strong>navigation</strong> module contains definitions for styling the <code><header></code> element, along with its contents (logo and links).</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>
|
||||
@@ -161,6 +162,7 @@
|
||||
<div class="section">
|
||||
<p>The <strong>navigation</strong> module contains definitions for styling <code><nav></code> elements, along with the links they contain.</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>
|
||||
@@ -245,6 +247,7 @@
|
||||
<div class="section">
|
||||
<p>The <strong>navigation</strong> module contains various definitions for customizing the appearance of the <code><footer></code> element.</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>
|
||||
|
||||
Reference in New Issue
Block a user