sticky footer docs and example.
This commit is contained in:
parent
17469410b6
commit
fbeaa1fdff
@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Compass Sticky Footer Example
|
||||
description: How to use the sticky footer mixin.
|
||||
framework: compass
|
||||
stylesheet: compass/layout/_sticky_footer.sass
|
||||
example: true
|
||||
---
|
||||
= render "partials/example"
|
@ -0,0 +1,16 @@
|
||||
.example
|
||||
#layout
|
||||
#header
|
||||
%h1 Sticky Footer Example
|
||||
|
||||
%p
|
||||
This is the main content area.
|
||||
%p
|
||||
In this example you should pretend that the red box
|
||||
is actually the browser window.
|
||||
%p
|
||||
Because, being a contrived example, it's not actually sticking
|
||||
to the bottom of the page.
|
||||
#layout_footer
|
||||
#footer
|
||||
This is the footer area.
|
@ -0,0 +1,18 @@
|
||||
@import compass/reset.sass
|
||||
@import compass/layout.sass
|
||||
|
||||
+sticky-footer(72px, "#layout", "#layout_footer", "#footer")
|
||||
|
||||
#header
|
||||
:background #999
|
||||
:height 72px
|
||||
|
||||
#footer
|
||||
:background #ccc
|
||||
|
||||
.example
|
||||
height: 500px
|
||||
border: 3px solid red
|
||||
|
||||
p
|
||||
margin: 1em 0.5em
|
@ -8,4 +8,5 @@ classnames:
|
||||
---
|
||||
- render 'reference' do
|
||||
%p
|
||||
Lorem ipsum dolor sit amet.
|
||||
This module provides tools needed to lay out your footer such
|
||||
that it sticks to the bottom of the page.
|
||||
|
@ -1,7 +1,11 @@
|
||||
// Based on http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
|
||||
// Mix into the top level.
|
||||
// Footer element must be outside of root wrapper element.
|
||||
// Footer must be a fixed height.
|
||||
//
|
||||
Based on a [blog post by Ryan Fait](http://ryanfait.com/resources/footer-stick-to-bottom-of-page/).
|
||||
|
||||
Must be mixed into the top level of your stylesheet.
|
||||
|
||||
Footer element must be outside of root wrapper element.
|
||||
|
||||
Footer must be a fixed height.
|
||||
|
||||
=sticky-footer(!footer_height, !root_selector = "#root", !root_footer_selector = "#root_footer", !footer_selector = "#footer")
|
||||
html, body
|
||||
|
Loading…
Reference in New Issue
Block a user