sticky footer docs and example.

This commit is contained in:
Chris Eppstein 2010-03-29 18:13:22 -07:00
parent 17469410b6
commit fbeaa1fdff
5 changed files with 52 additions and 5 deletions

View File

@ -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"

View File

@ -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.

View File

@ -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

View File

@ -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.

View File

@ -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