diff --git a/doc-src/content/examples/compass/layout/sticky-footer.haml b/doc-src/content/examples/compass/layout/sticky-footer.haml new file mode 100644 index 00000000..9b2fa441 --- /dev/null +++ b/doc-src/content/examples/compass/layout/sticky-footer.haml @@ -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" diff --git a/doc-src/content/examples/compass/layout/sticky-footer/markup.haml b/doc-src/content/examples/compass/layout/sticky-footer/markup.haml new file mode 100644 index 00000000..0a593f13 --- /dev/null +++ b/doc-src/content/examples/compass/layout/sticky-footer/markup.haml @@ -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. diff --git a/doc-src/content/examples/compass/layout/sticky-footer/stylesheet.sass b/doc-src/content/examples/compass/layout/sticky-footer/stylesheet.sass new file mode 100644 index 00000000..ee0b4a6e --- /dev/null +++ b/doc-src/content/examples/compass/layout/sticky-footer/stylesheet.sass @@ -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 diff --git a/doc-src/content/reference/compass/layout/sticky_footer.haml b/doc-src/content/reference/compass/layout/sticky_footer.haml index f72b589f..d247f3e6 100644 --- a/doc-src/content/reference/compass/layout/sticky_footer.haml +++ b/doc-src/content/reference/compass/layout/sticky_footer.haml @@ -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. diff --git a/frameworks/compass/stylesheets/compass/layout/_sticky_footer.sass b/frameworks/compass/stylesheets/compass/layout/_sticky_footer.sass index f6dd573f..9a67cdae 100644 --- a/frameworks/compass/stylesheets/compass/layout/_sticky_footer.sass +++ b/frameworks/compass/stylesheets/compass/layout/_sticky_footer.sass @@ -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