mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-03-13 16:59:39 +01:00
Code Issues Releases Wiki Activity

Added new footer element class for absolute positioning, as discussed in #42

Browse Source
This commit is contained in:
Angelos Chalaris 2017-01-08 18:12:31 +02:00
parent 7d97f8c0d4
commit a7d0a87f48
6 changed files with 31 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
dist/mini-default.css vendored
View File

@ -2,7 +2,7 @@
/*
Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com)
mini.css version: v2.0.2 (Fermion)
mini.css version: v2.1.0 (Fermion)
*/
/*
Browsers resets and base typography.
@ -681,6 +681,12 @@ footer {
footer a, footer a:visited {
color: #039be5; }
footer.bottom {
box-sizing: border-box;
position: absolute;
bottom: 0;
width: 100%; }
/*
Definitions for forms and input elements.
*/

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

File diff suppressed because one or more lines are too long

5
docs/v2/DEVLOG.md
View File

@ -751,3 +751,8 @@
- Updated `index.html` to use the new `.sticky` `header`, along with other styling changes, such as content sizing.
- *TODO* Update the rest of the pages, bump everything to `v2.1.0` and use the local stylesheets in the meantime.
- Content spacing changes in `index.html`.
## 20170108
- Added `$include-footer-bottom` flag, coded the necessary parts for absolute-bottom-aligned `footer` elements.
- *TODO* Update all pages to use the new `footer` absolute-alignment. Should solve some issues on different devices.

2
docs/v2/demo.html
View File

@ -136,6 +136,6 @@
</div>
</div></main>
<!-- End of page content-->
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
<footer class="bottom"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
</body>
</html>

7
src/flavors/mini-default.scss
View File

@ -4,7 +4,7 @@
/*
Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com)
mini.css version: v2.0.2 (Fermion)
mini.css version: v2.1.0 (Fermion)
*/
// Basic rules for body and typography
$fore-color: #212121; // Text and general foreground color
@ -198,9 +198,14 @@ $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>
$include-footer-bottom: true; // Should the class that aligns <footer> elements to
// the bottom of the page be included (`true`/`false`) [2]
$footer-bottom-name: 'bottom'; // Class name for <footer> element with bottom alignment [2]
// 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.
// [2] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for absolute positioning
// of <footer> elements, using the value of $footer-bottom-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

11
src/mini/_navigation.scss
View File

@ -117,6 +117,9 @@ nav {
}
}
}
$include-footer-bottom: false !default; // Should the class that aligns <footer> elements to the
// bottom of the page be included
// Footer styling.
footer {
display: block; // Correct display for older versions of IE.
@ -139,4 +142,12 @@ footer {
a, a:visited {
color: $footer-link-fore-color;
}
}
@if $include-footer-bottom {
footer.#{$footer-bottom-name}{
box-sizing: border-box;
position: absolute;
bottom: 0;
width: 100%;
}
}