-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Compass Core: Layout Module
The Layout Module provides helpers for general layout solutions that aren’t specifically provided by one of the framework modules. Include the layout module with:
@import compass/layout.sassThe layout module does not generate any CSS, it only provides mixins.
This will pin your layout’s footer to the bottom of the screen when page content is too short. The footer will scroll normally when the page content fills the height of the window.
- A fixed footer height (px)
- A container element for the page content, with a “clearing element” as its last child.
- A footer element as a direct child of <body>.
Mix into the top level:
+sticky-footer( 180px, "#root", "#root_footer", "#footer" )You can specify the selectors for the three required elements. The default selectors are as shown above, but they can be changed using the last three optional parameters. The height is the only required parameter.
The markup for this simple example follows this structure:
body
#root
Page content goes here.
#root_footer
#footer
Footer content goes here.
Of course the page content can contain further definition with divs. Just be sure the “#root_footer” empty div is the last div contained in the “#root” div. For instance the following structure might be a bit more useful:
body
#root
#header
Header content goes here.
#page-content
Page content goes here.
#root_footer
#footer
Footer content goes here.
Usage with the Blueprint module:
Sticky footers can also be used within a grid framework, such as Blueprint.
You’ll need to include Blueprint:
@import blueprint.sassMix into the top level:
+sticky-footer( 180px, "#root", "#root_footer", "#footer" )
.container
+container
The markup with Blueprint columns follows this structure:
body
#root
.container
Page columns go here.
#root_footer
#footer
.container
Footer columns go here.