beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Navigation header complete

Browse source
This commit is contained in:
Angelos Chalaris 2016-11-02 13:17:25 +02:00
parent e382ae1a02
commit 0928dd8cec
7 changed files with 163 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
docs/v2/DEVLOG.md
View file

@ -250,3 +250,14 @@
- Added edge case for tabbing to checkbox for `focus`, which will make the `label`'s box `border` glow to the blue-ish shade usually used.
- Removed `readonly` styling for `checkbox` and `radio` as it does not work due to technicalities.
- Updated demo page for `checkbox` module.
- Created `mini-core/navigation` for the navigational components.
- Cleanup in `core`, moved fixes for navigational to proper file, moved leftover fixes to their proper place.
- Added responsiveness for `img`.
- Updated demo page for `checkbox` module.
- Changed `inline` `progress` elements to use `vw` instead of `em`. Fixed a rare bug that would be caused due to that.
- Coded the `header` element's styling. Optimized.
- Made `header` responsive.
- Added demo for `header` element.
- 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.

31
docs/v2/index.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<!-- Live demo styled as of 20161025 -->
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/5b4a224c4cad68a76b94e1635696925d13ea45f6/flavors/v2/mini-default.min.css"> -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/e382ae1a02c9d08ccbc67a85447422a4559b51fd/flavors/v2/mini-default.min.css">
<link rel="stylesheet" href="../../flavors/v2/mini-default.css">
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
<meta charset="utf-8">
@ -13,6 +13,10 @@
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<style>
#header-logo {
display: inline; height: 28px; width: 28px; margin-top: 2px; background: #558b2f; border-radius: 1px;
margin-left: -3px; padding: 2px;
}
#top-logo {
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
@ -28,6 +32,16 @@
</style>
</head>
<body>
<header>
<img class="logo" src="mini-logo.svg" id="header-logo"><div style="display: inline; overflow: auto;">
<a href="#" class="button">Introduction</a>
<a href="#" class="button">Module Overview</a>
<a href="#" class="button">Module Demos</a>
<a href="#" class="button">Flavors</a>
<a href="#" class="button">Customization</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</a>
</div>
</header>
<div class="container" style="height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 1px 3px rgba(0,0,0,0.35);">
<div class="row">
<div class="col-sm">
@ -40,7 +54,7 @@
</div>
</div>
<div class="container">
<div class="row">
<div class="row" style="padding-top: 20px;">
<div class="col-sm-12 col-md">
<div class="box-centered">
<h2>Minimal</h2>
@ -318,7 +332,7 @@
</select>
<input type="search" placeholder="search..." value="">
</fieldset>
</form>
</form><br>
<h3>Checkboxes and Radio buttons</h3>
<p>Checkboxes and radio buttons are styled using the <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>, while keeping things simple and adding just the needed consistency for those input types. Place an <code>&lt;input&gt;</code> (checkbox or radio button) and a linked <code>&lt;label&gt;</code> inside an <code>.input-group</code> and the controls will style themselves. To allow accessibility for those controls, you can use <code>tabindex=&quot;0&quot;</code> on the <code>&lt;input&gt;</code> elements only. You can see some examples below:</p>
<form>
@ -332,12 +346,15 @@
</fieldset>
<fieldset>
<div class="input-group">
<input type="radio" name="radios" value="r1" checked id="r1" tabindex="0"> <label for="i1">Value 1</label>
<input type="radio" name="radios" value="r2" id="r2" tabindex="0"> <label for="i2">Value 2</label>
<input type="radio" name="radios" value="r3"checked id="r3" tabindex="0"> <label for="i3">Value 3</label>
<input type="radio" name="radios" value="r1" checked id="r1" tabindex="0"> <label for="r1">Value 1</label>
<input type="radio" name="radios" value="r2" id="r2" tabindex="0"> <label for="r2">Value 2</label>
<input type="radio" name="radios" value="r3"checked id="r3" tabindex="0"> <label for="r3">Value 3</label>
</div>
</fieldset>
</form>
</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>
<header><a href="#" class="logo">Logo</a><button>Link 1</button><a href="#" class="button">Link 2</a><button>Link 3</button></header><br>
</div>
</div>
</div>

57
flavors/v2/mini-default.css
View file

@ -14,9 +14,12 @@ body {
color: #212121;
background: #fafafa; }
article, aside, footer, header, nav, section, figcaption, figure, main {
article, aside, section, figcaption, figure, main, details, menu {
display: block; }
summary {
display: list-item; }
abbr[title] {
border-bottom: none;
text-decoration: underline; }
@ -30,9 +33,13 @@ svg:not(:root) {
input {
overflow: visible; }
img {
width: 100%;
height: auto; }
h1, h2, h3, h4, h5, h6 {
line-height: 1.2em;
margin: 0.7em 8px;
margin: 0;
font-weight: 500; }
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
color: #424242;
@ -615,6 +622,36 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
::-ms-placeholder {
color: #37474f; }
header {
display: block;
height: 36px;
background: #263238;
color: #fafafa;
padding: 2px 8px;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden; }
header .logo {
color: #fafafa;
font-size: 1.75em;
line-height: 1.2;
margin: 1px 6px 1px 1px; }
header button, header [type="button"], header a.button, header label.button, header .button {
background: #263238;
color: #fafafa;
vertical-align: top;
margin: 2px 0 0; }
header button:hover, header button:active, header button:focus, header [type="button"]:hover, header [type="button"]:active, header [type="button"]:focus, header a.button:hover, header a.button:active, header a.button:focus, header label.button:hover, header label.button:active, header label.button:focus, header .button:hover, header .button:active, header .button:focus {
background: #37474f; }
header .logo, header a.button {
text-decoration: none; }
nav {
display: block; }
footer {
display: block; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0; }
@ -730,20 +767,6 @@ progress {
progress[value="100"]::-moz-progress-bar {
border-radius: 1px; }
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details,
menu {
display: block; }
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item; }
button.primary, [type="button"].primary, [type="submit"].primary,
[type="reset"].primary, .button.primary {
background: #1565c0;
@ -804,7 +827,7 @@ mark.bubble {
progress.inline {
display: inline-block;
vertical-align: middle;
width: 20em; }
width: 80vw; }
progress.secondary {
color: #e53935; }

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

File diff suppressed because one or more lines are too long

15
flavors/v2/mini-default.scss
View file

@ -170,6 +170,19 @@ $input-disabled-opacity: 0.75; // Opacity for disabled input
$input-readonly-back-color: #eceff1; // Background color for readonly input
$input-readonly-border-color: #90a4ae; // Border color for readonly input
$input-placeholder-fore-color: #37474f; // Text color for input placeholder
// Variables for navigational elements
$header-height: 36px; // Height for header
$header-back-color: #263238; // Background color for header
$header-fore-color: $back-color; // Text color for header
$header-margin: 0; // Margin for header
$header-padding: 2px 8px; // Padding for header
$header-logo-name: 'logo'; // Class name for header's logo
$header-logo-font-size: 1.75em; // Font size for header's logo
$header-logo-line-height: 1.2; // Line height for header's logo
$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
// Variables for button elements
$button-back-color: #cfd8dc; // Back color for button elements
$button-back-opacity: 0.75; // Background opacity for button elements
@ -262,7 +275,7 @@ $progress-border-style: 0; // Border style for <progress>
$progress-border-radius: 1px; // Border radius for the <progress> container
$progress-margin: 1px auto; // Margin for <progress>
$progress-inline-name: 'inline'; // Class name for inline <progress>
$progress-inline-width: 20em; // Width for inline <progress>
$progress-inline-width: 80vw; // Width for inline <progress>
$progress-variant1-name: 'secondary'; // Class name for <progress> variant 1
$progress-variant1-fore-color: #e53935; // Progress bar color for <progress> variant 1
$progress-variant2-name: 'tertiary'; // Class name for <progress> variant 2

36
scss/v2/_core.scss
View file

@ -27,11 +27,16 @@ body {
}
// Correct display for older versions of IE.
// TODO: Move styling of `nav` to the proper file.
article, aside, footer, header, nav, section, figcaption, figure, main {
// Fix display of some elements in other browsers as well.
article, aside, section, figcaption, figure, main, details, menu {
display: block;
}
// Correct display in all browsers.
summary {
display: list-item;
}
abbr[title] {
border-bottom: none; // Remove bottom border in Firefox 39-.
text-decoration: underline; // Opinionated style-fix for all browsers.
@ -54,6 +59,12 @@ input {
overflow: visible;
}
// Make images responsive by default.
img {
width: 100%;
height: auto;
}
// Fix display in older versions of Android.
$include-dfn-fix: true !default;
@if $include-dfn-fix {
@ -347,28 +358,9 @@ a{
@import 'mini-core/grid';
@import 'mini-core/table';
@import 'mini-core/form';
@import 'mini-core/navigation';
@import 'mini-core/button';
@import 'mini-core/checkbox';
@import 'mini-core/contextual';
@import 'mini-core/progress';
// TODO: Figure out where to move those.
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details, /* 1 */
menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
//===================================================

59
scss/v2/mini-core/_navigation.scss Normal file
View file

@ -0,0 +1,59 @@
// Definitions for navigation elements.
// Different elements are styled based on the same set of rules.
// Header styling.
header {
display: block; // Correct display for older versions of IE.
height: $header-height;
background: $header-back-color;
color: $header-fore-color;
@if $header-margin != 0 {
margin: $header-margin;
}
@if $header-padding != 0 {
padding: $header-padding;
}
// Reposnivenes for smaller displays, scrolls horizontally.
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
// Header logo styling.
.#{$header-logo-name} {
color: $header-fore-color;
@if $header-logo-font-size != $base-font-size {
font-size: $header-logo-font-size;
}
@if $header-logo-line-height != $base-line-height {
line-height: $header-logo-line-height;
}
@if $header-logo-margin != 0 {
margin: $header-logo-margin;
}
@if $header-logo-padding != 0 {
padding: $header-logo-padding;
}
}
button, [type="button"], a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name} {
background: $header-back-color;
color: $header-fore-color;
vertical-align: top;
@if $header-link-margin != 0 {
margin: $header-link-margin;
}
&:hover, &:active, &:focus {
background: $header-link-hover-color;
}
}
@if $apply-link-underline { // Override for links if underline is enabled.
.#{$header-logo-name}, a.#{$button-class-name} {
text-decoration: none;
}
}
}
// Navigation sidebar styling.
nav {
display: block; // Correct display for older versions of IE.
}
// Footer styling.
footer {
display: block; // Correct display for older versions of IE.
}