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

Added sticky positioning for header elements, resolves #24

Browse source
This commit is contained in:
Angelos Chalaris 2017-01-07 14:45:39 +02:00
parent c9c2494656
commit 87a56c800a
6 changed files with 56 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
dist/mini-default.css vendored
View file

@ -650,6 +650,12 @@ header {
header .logo, header a.button {
text-decoration: none; }
header.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1101; }
nav {
display: block;
background: #eceff1;

2
dist/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

7
docs/v2/DEVLOG.md
View file

@ -741,3 +741,10 @@
- Decided to include the new `grid` system in the `mini-default` flavor, as its functionality could be beneficial to a lot of people. The new filesize (gzipped) is `6.47KB` over the previous `6.32KB`.
- Added what is basically an *auto-grid* option in `.row.cols-sm` and similar for other sizes, that auto-sizes all columns in a given row. Might come in handy.
- Updated `index.html` to show *under 10KB* instead of *about 5KB* in the **Minimal** card in order to deal with the controversy surrounding this specific line.
## 20170107
- Thoroughly tested `position: sticky` for `header` elements. It seems to work quite fine. - #24
- Tested `position: sticky` for breadcrumbs and other elements. Layout seems to get in the way quite a lot. Implementation might only be viable for `header` elements for now.
- Added `$include-header-sticky` flag and required variables to implement the `.sticky` class.
- Tested a new layout idea in `demo.html`, this is how the new `index.html` should look like in the next update (top part only).

38
docs/v2/demo.html
View file

@ -22,6 +22,11 @@
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
padding: 4px;
}
#top-area {
height: 320px;
background: -webkit-linear-gradient(#455a64,#192024);
background: linear-gradient(#455a64,#192024);
}
#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);
@ -29,6 +34,17 @@
#top-heading {
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
}
@media (min-width: 768px) {
#top-area {
height: 440px;
}
#top-logo {
margin: 88px auto -24px;
}
#top-heading {
margin-bottom: -6px;
}
}
#top-version-tag {
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
@ -73,17 +89,7 @@
</style>
</head>
<body>
<header>
<a href="index.html"><img class="logo" src="mini-logo.svg" id="header-logo"></a><div style="display: inline; overflow: auto;">
<a href="index.html" class="button">Introduction</a>
<a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a>
<a href="customization.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</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 3px 9px rgba(0,0,0,0.26), 0 3px 6px rgba(0,0,0,0.35);">
<div class="container" id="top-area">
<div class="row">
<div class="col-sm">
<div class="box-centered">
@ -94,6 +100,16 @@
</div>
</div>
</div>
<header class="sticky" style="box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); ">
<a href="index.html"><img class="logo" src="mini-logo.svg" id="header-logo"></a><div style="display: inline; overflow: auto;">
<a href="index.html" class="button">Introduction</a>
<a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a>
<a href="customization.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</a>
</div>
</header>
<!-- Insert your page content here-->
<main><div class="container">
<div class="row cols-sm-12" style="padding-top: 20px">

6
src/flavors/mini-default.scss
View file

@ -176,6 +176,9 @@ $header-logo-margin: 1px 6px 1px 1px; // Margin for <header>'s logo
$header-logo-padding: 3px 0 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
$include-header-sticky: true; // Should sticky <header> elements be
// included? (`true`/`false`) [1]
$header-sticky-name: 'sticky'; // Class name for sticky <header>
$nav-back-color: #eceff1; // Background for <nav>
$nav-fore-color: $fore-color; // Text color for <nav>
$nav-border-style: 1px solid #bdbdbd; // Border style for <nav>
@ -195,6 +198,9 @@ $footer-font-size: 85%; // Font size for <footer>
$footer-margin: 18px 0 0; // Margin for <footer>
$footer-padding: 22px 10px 12px; // Padding for <footer>
$footer-link-fore-color: #039be5; // Text color for links in <footer>
// Notes:
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
// of <header> elements, using the value of $header-sticky-name for the name of the class.
// Variables for forms and inputs
$form-back-color: #eeeeee; // Background color for forms
$form-fore-color: $fore-color; // Text color for forms

9
src/mini/_navigation.scss
View file

@ -5,6 +5,7 @@
// Header styling.
$button-class-name: 'button' !default; // Class name for the button-like elements
$header-logo-name: 'logo' !default; // Class name for <header>'s logo
$include-header-sticky: false !default; // Should the sticky class for <header> elements be included
header {
display: block; // Correct display for older versions of IE.
height: $header-height;
@ -70,6 +71,14 @@ header {
}
}
}
@if $include-header-sticky {
header.#{$header-sticky-name} {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1101; // Deals with certain problems when combined with cards and tables.
}
}
// Navigation sidebar styling.
nav {
display: block; // Correct display for older versions of IE.