Much more than just a side bar,
this is the most responsive 2 column layout stack as well.
Blueprint SideBar is a specialist 2 column stack designed to make many different sidebar configurations.
SideBar handles layouts from full page sidebars for menus (like the one on the left - or above on mobile) to in page sidebars for responsive layouts like columns and blogs.
SideBar is fully responsive. For smaller screens, you can choose to display the sidebar above or below the main content or to hide it completely.
Simple, clean
and easy
The sidebar area width can be proportional in size, or a flixed repsonsive width with 4 breakpoint controlled sizes.
In addition there are minimum and maximum width controls to limit the extent of the side bar area when in proportional mode.
A flexible
two column
4-Way responsive breakpoint controlled column sizing.
Add any background you like using the familiar
child stacks or ProStyles Master stacks.
SideBar can be used as a 2 column with automatic CSS equal height columns. There is no equalisation required,
Stacking order for mobile is totally flexible and columns can be percentage widths with optional limits.
Backgrounds are simple using the familiar BWD child stacks. Your columns can have colours, gradients, images, CMS images and blend modes.
Finally you can align content in either column just as you want, quickly and simply.
BluePrint's Auto Vertical Align function does it all automatically in pure CSS that works everywhere.
Watch the SideBar video to see how it works and you will be amazed at how simple an reliable it is compared to other methods.
Nesting &
Stacking Order
Resize your browser to see the orange column stack first at 800px.
Then at 640px the other two columns will stack.
SideBar can be placed inside other SideBars to create nested layouts.
Just use it like you would use any other stack. The widths remain fluid and controllable at all times.
With Gutters
& Borders
Gutters can be in pixels or as a percentage.
Vertical gutters can optionally be applied when stacked.
Borders and round corners on columns... you can with SideBar.
SideBar can be placed inside other SideBars to create nested layouts.
Just use it like you would use any other stack. The widths remain fluid and controllable at all times.
Get Social with
Big White Duck
BigWhiteDuck