1
0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-04-16 10:21:51 +02:00

Customization documentation for navigation

Fully documented customization for navigation module (header, nav, footer).
This commit is contained in:
Angelos Chalaris 2017-04-13 12:14:59 +03:00
parent f8fec6de77
commit d8c3f9ee6e
2 changed files with 64 additions and 0 deletions

View File

@ -238,6 +238,66 @@
</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>Footer</h2></div>
<div class="section">
<p>The <strong>navigation</strong> module contains various definitions for customizing the appearance of the <code>&lt;footer&gt;</code> element.</p><br/>
<table width="100%" class="striped">
<thead>
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
</thead>
<tbody>
<tr>
<td data-label="Variable">$footer-back-color</td><td data-label="Type">Color</td>
<td data-label="Description">Background color for the <code>&lt;footer&gt;</code> element</td><td data-label="Sample value">#263238</td>
</tr>
<tr>
<td data-label="Variable">$footer-fore-color</td><td data-label="Type">Color</td>
<td data-label="Description">Text color for the <code>&lt;footer&gt;</code> element</td><td data-label="Sample value">#fafafa</td>
</tr>
<tr>
<td data-label="Variable">$footer-border-style</td><td data-label="Type">Border</td>
<td data-label="Description">Border style for the <code>&lt;footer&gt;</code> element</td><td data-label="Sample value">1px solid #424242</td>
</tr>
<tr>
<td data-label="Variable">$footer-font-size</td><td data-label="Type">Font size</td>
<td data-label="Description">Font size for the <code>&lt;footer&gt;</code> element</td><td data-label="Sample value">85%</td>
</tr>
<tr>
<td data-label="Variable">$footer-margin</td><td data-label="Type">Margin</td>
<td data-label="Description">Margin for the <code>&lt;footer&gt;</code> element</td><td data-label="Sample value">18px 0 0</td>
</tr>
<tr>
<td data-label="Variable">$footer-padding</td><td data-label="Type">Padding</td>
<td data-label="Description">Padding for the <code>&lt;footer&gt;</code> element</td><td data-label="Sample value">10px</td>
</tr>
<tr>
<td data-label="Variable">$footer-link-fore-color</td><td data-label="Type">Color</td>
<td data-label="Description">Text color for the <code>&lt;footer&gt;</code> element's links</td><td data-label="Sample value">#039be5</td>
</tr>
<tr>
<td data-label="Variable">$include-footer-sticky</td><td data-label="Type">Logical</td>
<td data-label="Description">Enables sticky <code>&lt;footer&gt;</code> elements<sup><a href="#footer-note-one">1</a></sup></td><td data-label="Sample value">true</td>
</tr>
<tr>
<td data-label="Variable">$footer-sticky-name</td><td data-label="Type">String</td>
<td data-label="Description">Class name for the sticky <code>&lt;footer&gt;</code> element<sup><a href="#footer-note-one">1</a></sup></td><td data-label="Sample value">'sticky'</td>
</tr>
</tbody>
</table><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>

View File

@ -960,3 +960,7 @@
- Added `$samp-element-box-shadow` for consistency, mostly.
- Fully documented customization page for `core` module.
- Fully documented customization page for `grid` module.
## 20170412
- Documented `navigation` module's customization page.