Clicky

Flexible Columns in RapidWeaver With Blueprint
My Image

All the latest RapidWeaver Stacks reviewed,
plus the most important community news …

Stay up to date with current RapidWeaver developments

Flexible Columns in RapidWeaver With Blueprint

A blueprint is a reproduction of a technical drawing, documenting an architectural or an engineering design, using a contact print process on light-sensitive sheets. The process was developed in the 19th century.
Fast-forward to 2017 and a blueprint is an extremely flexible system of columns in RapidWeaver developed by BWD.

Andrew Tavernor has done it again! If Andrew excels at one thing, it is extending the possibilities available in RapidWeaver (his support is also second to none). Blueprint is another set of stacks to prove the point.

If you need a column that has 45% page width within a Foundation project (or any other project), instead of adhering to the strict 12-column layout, Blueprint will come to your aid. Two columns with 85%, divided into 60/40% columns – no problem for Blueprint. Tired of not being able to view your SVG's in RW preview…
…read on.

Blueprint is currently a set of three stacks. ONE, Sidebar and Blueprint SVG.
ONE is a single column stack. O.K. there are dozens of those available for RapidWeaver, but it isn't until you investigate further that you realise just how incredible ONE is.
Blueprint will free you from the constraints of Foundation and Bootstrap (better known to Weavers as Foundry), by allowing you to define column widths in % instead of 1, 2, 3, etc. columns of a twelve column layout grid. But Blueprint doesn't stop there.
Let's say, you'd like to float an image caption over an image within a text block, whilst indenting the text. A simple undertaking with just three ONE stacks: Starting at the top – position your text and image within a ONE stack and go to Add Spacer in the settings panel and define the Width and Height of the space. This will move your content to the left or the right within the ONE stack, depending on the setting you chose.
Next add your image caption to a ONE stack and set the stack width to say, 10%. If your first stack contains more than a couple of lines of text and a larger image,drop the 'caption' stack into a third ONE stack (for the runaround). Just like Sections Pro, this third stack will automatically adapt to its content width.
Now go to the Overlap settings of the 'caption' stack, set it to Move Up and set the overlap in pixels.


Blueprint ONE


The Screenshot above is made entirely with the standard Stacks elements and Blueprint ONE. A setup such as the one above will, of course, require some tweaking for the mobile layout.Blueprint

Sidebar – the christening was perhaps made before the full potential of the stack was realised – is a two column stack that is, of course, ideal for sidebars, but is also flexible enough to build complex column layouts that would otherwise be impossible – especially with Foundation, or Bootstrap.


Blueprint Sidebar

The screenshot above demonstrates a possible use as the name states – a sidebar – a container for a menu. No more messing around with various column settings, trying to get approximately the width you'd like, but not quite because of those damned invisible columns in the background.
Set the Aside Position to Left. Set the Width to 5%. Define a Maximum Width and you're good to go! Take a closer look at http://bit.ly/vertitab

But Sidebar feels perfectly at home when functioning as a normal two column stack. A contact form, for instance. 70% of the page width, with 45/55% columns:

Blueprint Sidebar
Childsplay with Sidebar, but an hour's work with standard Foundation stacks – and then still not perfect. Not that I'm dissing Foundation, it's the only theme that I currently use, but with the addition of Blueprint, life suddenly gets so much easier. And – Sidebar stacks can be nested to create extremely responsive three, or four, (or five…) column stacks.

Annoyed that you can never see, or exactly position your SVG's in RW edit mode? Blueprint SVG to the rescue!
Open your SVG in a text editor, copy the content between (and including) the <svg> tags and drop the text into Blueprint SVG. The result: Not only can you suddenly see your SVG, you can also edit the stroke and fill colours from within the stack settings – apart from being able to just set the size and alignment.

A tip: if you're having problems with your SVGs, take a look at this page. You can drop in your SVG files and it will convert them to 'clean' SVGs without the added data that some illustration apps add.

I could probably write a book about Blueprint. Instead, I advise that you RTFM i.e. that you download and dismantle the demo project and take a look at the instruction videos that Andrew has kindly put online.

Blueprint is another game changing set of stacks from BWD.
Whilst the stacks are free to download, please don't forget to make a donation. Andrew spends up to 18 hours a day and more developing and supporting BWD stacks. He also pays ever rising annual fees to host them.

blog comments powered by Disqus

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

Subscribe to Ninja News
or ask a question

Hi, I’m the Ninja Bot. What’s your name?
image/svg+xml
Nice to meet you, [1-1]. Could you tell me your mail address?
image/svg+xml
[1-1], would you like to subscribe to the monthly Ninja Newsletter?

Yes, I would like to receive your monthly newsletter.

No thanks, I’m good for now. I have a different issue.

image/svg+xml
Thanks for your support, [1-1]. Is there anything else I can do for you?
image/svg+xml

[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I would like to subscribe to the Ninja Newsletter

Message

[4]
I’m sorry tohear that, [1-1]. How may I help you then today?
image/svg+xml

[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I don’t want to subscribe to the Ninja Newsletter right now.

Message

[6]

Thanks again for contacting us. Your request was successfully submitted.

If you are new to Foundation, or to BWD stacks, you might feel overwhelmed by the possibilities. If you're looking for a starting point, or have a pressing deadline, take a look at our store, you might find exactly what you're looking for:
Foundation Projects, BWD templates and freebies.

Stacks Image 76621
Stacks Image 76623
Stacks Image 76625
Stacks Image 76627
Stacks Image 76629
Stacks Image 76633

Contact Information

rjh logo

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—17

Powered by rjh-design

This website was built with loving care on a Mac using Foundation. For more information, contact me at obscure.

Don’t miss a post!

Sign up for our monthly newsletter.

A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.

View previous campaigns.

Subscribe to the Ninja Newsletter

* indicates required