mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-07-31 02:50:26 +02:00
Customization documentation for header
Documented customization for navigation module's header component.
This commit is contained in:
Angelos Chalaris
@@ -58,8 +58,95 @@
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Quick start</h2>
|
||||
<p>To use the <strong>navigation</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code><head></code> to utilize the viewport meta tag:</p><br>
|
||||
<pre><<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">"viewport"</span> <span class="fore-secondary">content</span>=<span class="fore-primary">"width=device-width, initial-scale=1"</span>></pre><br>
|
||||
<p>To customize the <strong>navigation</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <a href="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <a href="https://atom.io/">Atom</a>).</p><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>Header</h2></div>
|
||||
<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">
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-height</td><td data-label="Type">Height</td>
|
||||
<td data-label="Description">The height of the <code><header></code> element</td><td data-label="Sample value">44px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for the <code><header></code> element</td><td data-label="Sample value">#263238</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for the <code><header></code> element</td><td data-label="Sample value">#fafafa</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for the <code><header></code> element</td><td data-label="Sample value">1px solid #424242</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for the <code><header></code> element</td><td data-label="Sample value">0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for the <code><header></code> element</td><td data-label="Sample value">2px 8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for the <code><header></code> element</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-logo-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the <code><header></code> element's logo</td><td data-label="Sample value">'logo'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-logo-font-size</td><td data-label="Type">Font size</td>
|
||||
<td data-label="Description">Font size for the <code><header></code> element's logo</td><td data-label="Sample value">1.75em</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-logo-line-height</td><td data-label="Type">Line height</td>
|
||||
<td data-label="Description">Line height for the <code><header></code> element's logo</td><td data-label="Sample value">1.2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-logo-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for the <code><header></code> element's logo</td><td data-label="Sample value">1px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-logo-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for the <code><header></code> element's logo</td><td data-label="Sample value">3px 0 0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-link-hover-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Hover color for the <code><header></code> element's links</td><td data-label="Sample value">#37474f</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-link-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for the <code><header></code> element's links</td><td data-label="Sample value">2px 0 0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$include-header-sticky</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Enables sticky <code><header></code> elements<sup><a href="#header-note-one">1</a></sup></td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-sticky-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the sticky <code><header></code> element<sup><a href="#header-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="header-note-one">The value of <code>$header-sticky-name</code> will only be used if <code>$include-header-sticky</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user