mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-05 05:17:24 +02:00
Code Issues Releases Wiki Activity

Sticky footers

Browse Source
This commit is contained in:
Angelos Chalaris
2017-01-08 18:40:56 +02:00
parent 0d998340a6
commit 7abb30843a
20 changed files with 29 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/mini-default.css vendored
View File

@@ -681,7 +681,7 @@ footer {
footer a, footer a:visited { footer a, footer a:visited {
color: #039be5; } color: #039be5; }
footer.bottom { footer.sticky {
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
bottom: 0; bottom: 0;

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

File diff suppressed because one or more lines are too long

2
docs/card.html
View File

@@ -371,6 +371,6 @@
</div> </div>
</div></main> </div></main>
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

2
docs/contextual.html
View File

@@ -278,6 +278,6 @@
</div> </div>
</div></main> </div></main>
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

2
docs/core.html
View File

@@ -263,6 +263,6 @@
</div> </div>
</div></main> </div></main>
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

2
docs/customization.html
View File

@@ -242,6 +242,6 @@
</div> </div>
</div></main> </div></main>
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

2
docs/flavors.html
View File

@@ -123,6 +123,6 @@
</div> </div>
</div></main> </div></main>
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

2
docs/index.html
View File

@@ -295,6 +295,6 @@
</div> </div>
</div></main> </div></main>
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

2
docs/input_control.html
View File

@@ -524,6 +524,6 @@
</div> </div>
</div></main> </div></main>
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

2
docs/modules.html
View File

@@ -159,6 +159,6 @@
</div> </div>
</div></main> </div></main>
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

2
docs/navigation.html
View File

@@ -282,6 +282,6 @@
</div> </div>
</div></main> </div></main>
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

2
docs/progress.html
View File

@@ -291,6 +291,6 @@
</div> </div>
</div></main> </div></main>
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

2
docs/quick_reference.html
View File

@@ -1182,6 +1182,6 @@
</div> </div>
</div></main> </div></main>
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

2
docs/tab.html
View File

@@ -355,6 +355,6 @@
</div> </div>
</div></main> </div></main>
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

2
docs/table.html
View File

@@ -555,6 +555,6 @@
</div> </div>
</div></main> </div></main>
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

2
docs/utility.html
View File

@@ -370,6 +370,6 @@
</div> </div>
</div></main> </div></main>
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

2
docs/v2/DEVLOG.md
View File

@@ -756,3 +756,5 @@
- Added `$include-footer-bottom` flag, coded the necessary parts for absolute-bottom-aligned `footer` elements. - Resolved #42 - Added `$include-footer-bottom` flag, coded the necessary parts for absolute-bottom-aligned `footer` elements. - Resolved #42
- Updated all pages to use the new `footer` absolute-alignment. Should solve some issues on different devices. - Updated all pages to use the new `footer` absolute-alignment. Should solve some issues on different devices.
- Changed the implementation of the new `footer` to `sticky`, instead of absolute.
- Rolled back all pages that were affected. Should work like a charm now!

6
docs/v2/demo.html
View File

@@ -113,7 +113,7 @@
<!-- Insert your page content here--> <!-- Insert your page content here-->
<main><div class="container"> <main><div class="container">
<div class="row cols-sm-12" style="padding-top: 20px"> <div class="row cols-sm-12" style="padding-top: 20px">
<div><h2>Quick-layout system</h2> <div><h2>Quick-layout system</h2></div>
</div> </div>
<div class="row cols-sm-12 cols-md-6 cols-lg-4"> <div class="row cols-sm-12 cols-md-6 cols-lg-4">
<div><div class="box-colored"></div></div> <div><div class="box-colored"></div></div>
@@ -124,7 +124,7 @@
<div><div class="box-colored"></div></div> <div><div class="box-colored"></div></div>
</div> </div>
<div class="row cols-sm-12"> <div class="row cols-sm-12">
<div><h2>Classic system</h2> <div><h2>Classic system</h2></div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-6 col-lg-4"><div class="box-colored"></div></div> <div class="col-sm-12 col-md-6 col-lg-4"><div class="box-colored"></div></div>
@@ -136,6 +136,6 @@
</div> </div>
</div></main> </div></main>
<!-- End of page content--> <!-- End of page content-->
<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> <footer class="sticky"><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> </body>
</html> </html>

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

@@ -198,14 +198,14 @@ $footer-font-size: 85%; // Font size for <footer>
$footer-margin: 18px 0 0; // Margin for <footer> $footer-margin: 18px 0 0; // Margin for <footer>
$footer-padding: 22px 10px 12px; // Padding for <footer> $footer-padding: 22px 10px 12px; // Padding for <footer>
$footer-link-fore-color: #039be5; // Text color for links in <footer> $footer-link-fore-color: #039be5; // Text color for links in <footer>
$include-footer-bottom: true; // Should the class that aligns <footer> elements to $include-footer-sticky: true; // Should sticky <footer> elements be
// the bottom of the page be included (`true`/`false`) [2] // included (`true`/`false`) [2]
$footer-bottom-name: 'bottom'; // Class name for <footer> element with bottom alignment [2] $footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
// Notes: // Notes:
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning // [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. // 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 // [2] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
// of <footer> elements, using the value of $footer-bottom-name for the name of the class. // of <footer> elements, using the value of $footer-sticky-name for the name of the class.
// Variables for forms and inputs // Variables for forms and inputs
$form-back-color: #eeeeee; // Background color for forms $form-back-color: #eeeeee; // Background color for forms
$form-fore-color: $fore-color; // Text color for forms $form-fore-color: $fore-color; // Text color for forms

6
src/mini/_navigation.scss
View File

@@ -118,7 +118,7 @@ nav {
} }
} }
$include-footer-bottom: false !default; // Should the class that aligns <footer> elements to the $include-footer-sticky: false !default; // Should the class that aligns <footer> elements to the
// bottom of the page be included // bottom of the page be included
// Footer styling. // Footer styling.
footer { footer {
@@ -143,8 +143,8 @@ footer {
color: $footer-link-fore-color; color: $footer-link-fore-color;
} }
} }
@if $include-footer-bottom { @if $include-footer-sticky {
footer.#{$footer-bottom-name}{ footer.#{$footer-sticky-name}{
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
bottom: 0; bottom: 0;