mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-06 13:56:27 +02:00
Code Issues Releases Wiki Activity

Navigation sidebar styles

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-02 14:01:55 +02:00
parent 076a46b6b9
commit f5e0872129
6 changed files with 87 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/v2/DEVLOG.md
View File

@@ -261,4 +261,6 @@
- Updated live page for `header`.
- *NOTE* There is some bleedthrough of styles from `button` to `navigation`, specifically for `header`. This is not a problem, but should be noted for further reference/testing etc.
- Extended testing for `header`, there seem to be no bugs.
- Deployed demo page with `header`.
- Deployed demo page with `header`.
- Added simple styling for `nav`. Created iteration builder for `sublink` and categories tree.
- Tested and optimized `nav`, added demo to `index`.

30
docs/v2/index.html
View File

@@ -353,8 +353,36 @@
</fieldset>
</form><br>
<h3>Navigation</h3>
<p>Use the <code>&lt;header&gt;</code>, <code>&lt;nav&gt;</code> and <code>&lt;footer&gt;</code> elements to add navigational elements to your page. The <code>&lt;header&gt;</code> element displays as a non-fixed horizontal bar and can contain a logo along with a set of links or buttons. Style any links using the <code>.button</code> class to give them the proper style. You can see an example belo:</p>
<p>Use the <code>&lt;header&gt;</code>, <code>&lt;nav&gt;</code> and <code>&lt;footer&gt;</code> elements to add navigational elements to your page. The <code>&lt;header&gt;</code> element displays as a non-fixed horizontal bar and can contain a logo along with a set of links or buttons. Style any links using the <code>.button</code> class to give them the proper style. it is suggested that you place the <code>&lt;header&gt;</code> element outside of your grid system's <code>.container</code> to avoid styling problems. You can see an example below:</p>
<header><a href="#" class="logo">Logo</a><button>Link 1</button><a href="#" class="button">Link 2</a><button>Link 3</button></header><br>
<p><code>&lt;nav&gt;</code> implements the traditional navigation sidebar, using simple styling. The sidebar is not fixed by default and it has no specific width set, so you can use the grid system or some Javascript code to show or hide it and decide its size. Use simple links and <code>&lt;span&gt;</code> elements to add links and categories. The <code>.sublink-1</code> and <code>.sublink-2</code> classes can be added to create links in categories and subcategories. Below you can see an example (sidebar is displayed next to text on medium-large displays, but fills the whole display on phones and smaller screens):</p>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-9">
<p>This is some sample content that will show next to the navigation menu. Which means that we'll have to present some more fun facts about <strong>mini.css</strong> to occupy this space. Well, here's a couple:</p>
<ul>
<li><strong>mini.css</strong> was inspired by Bootstrap and Pure.css. Its original goal was to build a framework with the stylistic fluff of Bootstrap, but nearly the size of Pure.css. The first version, codenamed <strong>Neutrino</strong> was well-received and was mostly a tech demo of what <strong>Fermion</strong> now offers.</li>
<li><strong>mini.css</strong> v2.0 has been designed with modern browser compatibility and recent web standards in mind. Part of its aim is to reduce the footprint of websites by providing a customizable base to work with, while cutting down a lot of the fat that comes with premade stylesheets.</li>
</ul>
</div>
<div class="col-sm-12 col-md-3">
<nav>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<span>Category 1</span>
<a href="#" class="sublink-1">Link 3</a>
<a href="#" class="sublink-1">Link 4</a>
<span class="sublink-1">Category 2</span>
<a href="#" class="sublink-2">Link 5</a>
<a href="#" class="sublink-2">Link 6</a>
<a href="#" class="sublink-1">Link 7</a>
<a href="#" >Link 8</a>
</nav>
</div>
</div>
</div><br>
<p>Finally, use the <code>&lt;footer&gt;</code> element to create your very own footer, the way you want it.</p>
</div>
</div>
</div>

12
flavors/v2/mini-default.css
View File

@@ -647,7 +647,17 @@ header {
text-decoration: none; }
nav {
display: block; }
display: block;
background: #eceff1;
border-radius: 1px;
margin: 2px;
padding: 4px 4px 4px 16px; }
nav a {
display: block; }
nav .sublink-1 {
padding-left: 12px; }
nav .sublink-2 {
padding-left: 24px; }
footer {
display: block; }

2
flavors/v2/mini-default.min.css vendored
View File

File diff suppressed because one or more lines are too long

10
flavors/v2/mini-default.scss
View File

@@ -183,6 +183,16 @@ $header-logo-margin: 1px 6px 1px 1px; // Margin for header's logo
$header-logo-padding: 0; // Padding for header's logo
$header-link-hover-color: #37474f; // Hover color for header's links
$header-link-margin: 2px 0 0; // Margin for header's links
$nav-back-color: #eceff1; // Background for nav
$nav-fore-color: $fore-color; // Text color for nav
$nav-border-style: 0; // Border style for nav
$nav-border-radius: 1px; // Border radius for nav
$nav-padding: 4px 4px 4px 16px; // Padding for nav
$nav-margin: 2px; // Margin for nav
$nav-link-fore-color: $link-fore-color; // Text color for links in nav
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in nav
$nav-sublink-depth: 2; // Amount of subcategory classes to add
$nav-sublink-padding-left: 12px; // Left padding to add to subcategories
// Variables for button elements
$button-back-color: #cfd8dc; // Back color for button elements
$button-back-opacity: 0.75; // Background opacity for button elements

33
scss/v2/mini-core/_navigation.scss
View File

@@ -52,6 +52,39 @@ button, [type="button"], a.#{$button-class-name}, label.#{$button-class-name}, .
// Navigation sidebar styling.
nav {
display: block; // Correct display for older versions of IE.
@if $nav-back-color != $back-color {
background: $nav-back-color;
}
@if $nav-fore-color != $fore-color {
color: $nav-fore-color;
}
@if $nav-border-style != 0 {
border: $nav-border-style;
}
@if $nav-border-radius != 0 {
border-radius: $nav-border-radius;
}
@if $nav-margin != 0 {
margin: $nav-margin;
}
@if $nav-padding != 0 {
padding: $nav-padding;
}
a {
display: block;
@if $nav-link-fore-color != $link-fore-color {
color: $nav-link-fore-color;
}
}
// Subcategories in navigation.
$nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav
$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add
$nav-sublink-padding-left: 12px !default; // Left padding to add to subcategories
@for $i from 1 through $nav-sublink-depth {
.#{$nav-sublink-prefix}-#{$i} {
padding-left: $i * $nav-sublink-padding-left;
}
}
}
// Footer styling.
footer {