diff --git a/Manifest b/Manifest index 44a9f396..884364f7 100644 --- a/Manifest +++ b/Manifest @@ -38,8 +38,10 @@ examples/blueprint_semantic/stylesheets/liquid.sass examples/blueprint_semantic/stylesheets/print.sass examples/blueprint_semantic/stylesheets/screen.sass examples/compass/compass.html +examples/compass/sticky_footer.html.haml examples/compass/stylesheets/compass.sass examples/compass/stylesheets/images/blue_arrow.gif +examples/compass/stylesheets/sticky_footer.sass examples/compass/stylesheets/utilities.sass examples/compass/utilities.html.haml examples/yui/divisions.html.haml @@ -70,8 +72,10 @@ frameworks/blueprint/templates/project/ie.sass frameworks/blueprint/templates/project/print.sass frameworks/blueprint/templates/project/screen.sass frameworks/compass/stylesheets/_compass.sass +frameworks/compass/stylesheets/compass/_layout.sass frameworks/compass/stylesheets/compass/_reset.sass frameworks/compass/stylesheets/compass/_utilities.sass +frameworks/compass/stylesheets/compass/layout/_sticky_footer.sass frameworks/compass/stylesheets/compass/utilities/_general.sass frameworks/compass/stylesheets/compass/utilities/_links.sass frameworks/compass/stylesheets/compass/utilities/_lists.sass diff --git a/examples/compass/sticky_footer.html.haml b/examples/compass/sticky_footer.html.haml new file mode 100644 index 00000000..495ed779 --- /dev/null +++ b/examples/compass/sticky_footer.html.haml @@ -0,0 +1,14 @@ +!!! Transitional +%html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"} + %head + %meta{'http-equiv' => "content-type", :content => "text/html;charset=UTF-8"} + %title Compass Sticky Footer Example + %link{:rel=>"stylesheet", :href=>"stylesheets/sticky_footer.css", :type=>"text/css", :media=>"screen, projection"} + %body + #layout + #header + %h1 Sticky Footer Example + This is the main content area. + #layout_footer + #footer + This is the footer area. \ No newline at end of file diff --git a/examples/compass/stylesheets/sticky_footer.sass b/examples/compass/stylesheets/sticky_footer.sass new file mode 100644 index 00000000..e9d6ec93 --- /dev/null +++ b/examples/compass/stylesheets/sticky_footer.sass @@ -0,0 +1,12 @@ +@import compass/reset.sass +@import compass/layout.sass + ++global-reset ++sticky-footer(72px, "#layout", "#layout_footer", "#footer") + +#header + :background #999 + :height 72px + +#footer + :background #ccc diff --git a/frameworks/compass/stylesheets/compass/_layout.sass b/frameworks/compass/stylesheets/compass/_layout.sass new file mode 100644 index 00000000..dc745fa8 --- /dev/null +++ b/frameworks/compass/stylesheets/compass/_layout.sass @@ -0,0 +1 @@ +@import layout/sticky_footer.sass \ No newline at end of file diff --git a/frameworks/compass/stylesheets/compass/layout/_sticky_footer.sass b/frameworks/compass/stylesheets/compass/layout/_sticky_footer.sass new file mode 100644 index 00000000..8b8c4b04 --- /dev/null +++ b/frameworks/compass/stylesheets/compass/layout/_sticky_footer.sass @@ -0,0 +1,17 @@ +// 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. + +=sticky-footer(!footer_height, !root_selector = "#root", !root_footer_selector = "#root_footer", !footer_selector = "#footer") + html, body + :height 100% + #{!root_selector} + :min-height 100% + :margin-bottom= -!footer_height + #{!root_footer_selector} + :height= !footer_height + #{!footer_selector} + :clear both + :position relative + :height= !footer_height