BluePrint Stacks
The concept behind BluePrint is simple, they are a series of stacks that make layouts easier to achieve. The controls are familiar, the settings are simplified, the results are predictable.
The BluePrint stack download comprises of 3 stacks
BluePrint ONE
Blueprint ONE is a simple container or 1 column stack but with 3-way responsive breakpoint controlled settings.
BluePrint ONE is based on the familiar Stacks 1 column controls so there is virtually no learning curve. Just enjoy the additional features.
Everything on this page was made using BluePrint ONE. There are no other column stacks, theme or framework features used and it works in any theme.
BluePrint SideBar
Blueprint SideBar is the most flexible 2 column stack available with special sidebar menu features in addition.
SideBar has 4-Way responsive breakpoint controlled column sizing and you can add any background you like using the familiar
child stacks or ProStyles Master stacks to individual columns.
You need to see the demo to appreciate just what is possible with SideBar.
BluePrint SVG
Blueprint SVG is a stack to insert inline SVG code into your pages.
No need to warehouse a 5kB icon, you can now drop it straight into your page. There are controls for 4-way sizing, alignment and max-width settings and simple controls to re-color the strokes and fills in your SVG.
Learning BluePrint
Downloadable project files are available on the BluePrint product page as is a link to the demo site.
The demo site and project explain a lot and in addition there are several tutorial videos on home page for more information.
What is the difference between SectionsPro and BluePrint?
I was asked this question on WeaversSpace and what follows is my reply. I thought it would be a useful explanation for others who may be wondering the same thing,
BluePrint started off as a ProStyles Box - just so that people could easily add ProStyles backgrounds etc to anything in a very simple fashion.
One thing that always annoyed me when making layouts was the inability to closely control the width/max-width, padding and margins for different screen sizes. I'm thinking about text in headers and custom elements on the page. BluePrint therefore got these settings and essentially became a super-powered stacks 1-col.
The final piece in the puzzle was to be able to easily pull up content to make overlaps. While this is possible with SectionsPro, it is more confusing for users as they need to use negative margins and it only has mobile and large settings. I often found myself needing 3 overlap heights to get the layout perfect.
What BluePrint doesn't do is anything to control the height (with the exception of SideBar in full page mode) nor does it have the capability to use master layouts like SectionsPro does.
Therefore, BluePrint is much more focussed on inner content layout whereas SectionsPro is more for the large scale sectional layout of the page. I still use SectionsPro everywhere as normal but just use BluePrint ONE when I need some close control of a particular element.
The Chroma demo site is a good example. This is 90% SectionsPro but BluePrint is used to control the layouts of the text in the headers and the images. Particularly with header text, it can wrap undesirably and jump about at breakpoints when just using a 2 col alone. By controlling its width and padding more accurately you can make it look a lot better than by trying to use odd ratios of column widths.
SIdeBar is a completely different proposition. I now use this instead of a 2 column all the time when I need anything other than absolutely standard operation. The automatic equal height, the ability to style each column separately and the 4 way control is really useful. Things like footer content and menu bar content (in ButtonBar) become a lot easier to make look nice when you can instantly switch width and alignments at user defined breakpoints, even moving between proportional width and fixed widths. The other thing that I've found most useful is being able to have a proportional width column but with min and max width settings.
So in summary, BluePrint and SectionsPro are actually quite different beasts. BluePrint is certainly not SectionsPro Lite - in fact SectionsPro still produces less CSS on your page in most practical circumstances and is a lot more powerful for most things.
Think of BluePrint ONE as a wrapper that you can put difficult content inside to get that extra fine control that you need - even if that wrapper happens to be the whole page for side padding and max-width etc. SectionsPro inside a BluePrint is fine, BluePrint inside a SectionsPro is fine. Once you get used to what it will do you will see what I mean but think of it as an augmentation to your workflow not a step change of how pages are set out.