Introducing Header Pro and Paragraph Pro Stacks from BWD


(Andrew Tavernor) #1

Header Pro and Paragraph Pro are flexible, powerful and efficient alternatives to the built in text and header stacks.

They are designed around the idea that it is better to have an all purpose stack that simplifies edit mode, produces less code and better markup than multiple stacks nested within one another, in order to add functionality.

While tremendously powerful, they do not come with a performance cost. No extra code is added to your page unless you specifically enable a feature. Even the features that use Javascript are compartmentalised into child stacks which means that not even the shared libraries are added to your page if you do not use them. Thanks to the power of Stacks 3 child stacks, it also means that the settings are simplified as they are each in their own panel.

Both stacks are compatible with all themes but are also Foundation optimised and able to use Site Styles features. The demo projects (available for download from the the product pages) have examples and instructions in both the Tesla theme and Foundation.

You can see them in action and download the stacks for free:
Header Pro : http://demo.bigwhiteduck.com/headerpro/
Paragraph Pro : http://demo.bigwhiteduck.com/paragraphpro/

Make stunning intros like this using only Header Pro and Impact


(The only other stack used was an image stack for the logo graphics)

Key Features:
Both Stacks

  • Simple (2-way) and Advanced (4-way) responsive size control
  • Type Setting Controls
    • Character and word spacing
    • Line spacing correction for font base-line inadequacies
    • Vertical Rhythm Adjustment for page wide correction of vertical spacing
  • Font Control & Loading
    • Support for default theme fonts, Google fonts or Web Fonts. Fonts loaded by one stack can optionally be shared amongst all others on the page.
    • Google Font subsetting (only load the characters you need for special titles or logos etc)
  • Super Lightweight, using child stacks for the advanced feature control, zero javascript is added to your page if you don’t use a feature.

Header Pro

  • IMPACT Compatible
    Header Pro is the only stack that will autoscale and animate text within an Impact slide foreground content area

  • Auto Scaling
    with control of limiting minimum and maximum font sizes.

  • Animation by character, word or all at once using 38 different CSS effects
    Trigger animation on Page Load, When the header comes into view or when an Impact Slide comes into view

  • Segements
    Headers can be split in to 3 separate segments. Each can have its own styling and even font. Design great responsive logos without graphics files.

  • Badges
    Add image badges to draw attention to features, show new additions or for simple styling or embellishment.
    Badges can be turned on or off via Easy or Total CMS

  • Shadows
    Text shadowing effects designed to enhance your headers, particularly on difficult backgrounds like images. Tasteful and stylish, not retro and garish.

  • Contained Backgrounds
    Apply background colors, borders and radii to just the text area and not the full width of the stack. Ideal for transparency backgrounds over images to improve readability.

Paragraph Pro

  • Read More
    Add a readmore control to collapse a paragraph and enable a link to show and hide it. Lots of styling options and font-awesome icons.
    Option to open and close readmore from an external launcher such as a button with a simple class.
  • Drop Capitals
    Add drop capital letters to your text with one easy click. You can use a different font for the drop cap and control every aspect of its appearance, position and type face.
  • Floating Images
    Add floating images with lots of responsive control. Options to stack and re-scale for mobile. Can be controlled via Easy CMS.
  • Newspaper Columns
    Flow text over multiple columns. Lots of responsive options and layout possibilities.

Paragraph plus stack
#2

These 2 stacks are amazingly powerful yet the power can be hidden away as child stacks until you need them. Both of these stacks bring several new features previously unseen in Rapidweaver or elsewhere for that matter. Every RW Stacks user should have both of these stacks. Throw away your current header and paragraph stacks and use these. Integrates fully with Foundation and beyond with support for good things to come. Another game changer from Big White Duck.


(Brian LaPan) #3

Great work, Mr. Duck.


Creating paragraphs in a tex block (t
(Paul Russam) #4

Whilst there are many brilliant features here the most amazing one for me is Segments.
The ability to have multiple different colours/sizes/fonts in one stack will mean that I (we) can have some really stylish headers.
I’d attempted something similar in the past and had to use some convoluted (for me anyway) CSS to get a simple effect, HeaderPro is going to make what I wanted to achieve a doddle.

Thank you @tav


(Phil Bird) #5

I would like to echo @conger’s thoughts on these stacks.

Wonderful work, thank you.


(Tapio Laakkonen) #6

@tav Is there a tutorial video like BWD has made for new Blue Print stacks?


(Andrew Tavernor) #7

@TapioMichael No videos I’m afraid for HPro or PPro, The demo projects have almost every feature demonstrated but if there is anything you need clarifying just ask or fire me a support ticket.


(Tapio Laakkonen) #8

Thank you for a reply!

Could you please advise me how to get text even on each ‘news paper collum’ or is it better just use basic 3 column wrapper? (Though I do not know how to make column divider effect.)

Basically, I have used one PPro with Collum Flow set on.

Thanks!


(Andrew Tavernor) #9

CSS columns behave like that and it is the only way to get text to flow between columns as the page width changes. Using 3 separate normal columns is an option but there will be no guarantee that the text will be the same height in each at all screen sizes.

One thing I notice from your screen shot is the margins on the bottom of your list items. This will be coming from the theme and you can remove it (or make it smaller) via the following CSS which may make the appearance better.

.com_bigwhiteduck_stacks_paragraphpro_stack ul{
    margin-bottom: 0;
}