HeaderPlus Updates

HeaderPlus v.2.0 - 7 May 2015

Version 1.2 adds the following features

Background & Adaptive Sizing

(built in Grummaging)

Background color and opacity are now shown in edit mode.

You can now use the Adaptive Padding and Margins settings to adaptively pad Header Plus with edit mode preview.


This is like having built in Grummage features in your headers.

Great when used in front of images and blocks of color.

Add proportional top and bottom padding to center headers ivertically

Add blocks of opacity color begin headers

Use adaptive margins to restrict the background color spread

Proportional Rounding

You can now apply either pixel or proportional rounding to the adaptive background.

...this means Efficiency!

These changes all improve efficiency and reduce the size of your sites. Below you will see a GrummagePlus containing 3 HeaderPlus stacks - no other stacks at all. So what you have is a Foundation column and 3 Foundation Headers with a few lines of BWD CSS to bring it all to life.

BigWhiteDuck is all about doing things with the minimum amount of extra overhead. Simple Foundation columns and headers really can do this......

Adaptive Sizing & Positioning

Header Plus Less Stacks More Efficiency

Adaptive Rounding

Collapse Top & Bottom Margins

There is now a Collapse Margins Setting in that removes the default top and bottom margins.

This means that if you are using coloured backgrounds or transparency backgroundsthere will be no space between adjacent HeaderPlus or other stacks

Auto Scale Imporovements

My Image

Min and Max Font Size

By popular request, you can now specify a minimum and maximum font size.

Autoscaled text will never get smaller than the minimum font size and never larger than the maximum



Text Animatons

My Image

Animate On Entry

There is now a start setting. This allows control of when the animation starts.
The choices are:

  • When In View

  • On Page Load


      • All existing animated headers will adopt the new default setting of When In View. The animation will start as the header enters the browser window.

      The repeat setting is unaffected by this change. You may therefore wish to turn off repeat for animations further down the page.



Delay and Delay Scale

Improvements have been made to the functionality of these settings.

When you are animating by words or letters, the delay scale applies a multiplier to the delay setting as the animation continues through the individual elements.


SSL for Google Fonts

Google fonts will now work correctly if you are using an https address and SSL

HeaderPlus v.1.1

Version 1.1 adds the following features

Header Text transparency

The text settings section now includes an opacity setting.

This is ideally used when placing header plus in front of images and other background stacks.

Try 80% opacity it looks great with images behind.

Custom Color Only

In the 'Style' setting there is now a "custom color only" option.

If you find you just need to change a header color but don't want to have reset the the sizing etc this setting is ideal.

Everything else, except the color will be left as set in Foundation Site Styles


Transparency Backgrounds

We've increasingly noticed headerPlus being used in front of Joe's amazing Jack stack and Foundation cover images.

The text opacity setting improves text against image and transparency backgrounds but if you really want to make the text pop, then you need a subtle background behind the header.

My Image

Proportional Padding and Margins

These settings are for use primarily with Transparency Backgrounds in order to control the size.

It does however mean that you can now apply all your favourite Grummage techniques right in the Foundation Header itself as well.


Animated Hover Effect

After a user request I decided to add a little bonus to this update of simple animated hover underline effects.

You will find these settings at the bottom of the Animation section

My Image

Custom Class

In the Header Plus - Advanced group at the bottom of the settings you can now add a custom class to control individual styles of any or all of your headerPlus instances.

Examples

This, is just a headerPlus with a tiled image in the main stack background and a transparency color for the headPlus text.

Look how proportional the borders stay at all screen sizes.

Transparency Text

An 80% Opacity HeaderPlus
Full width background

An 80% Opacity HeaderPlus
% Margin and Padding Control

With animation effects

Hover Animated Underlines

Hover over me

Elliptical Underline

Fade In

Perspective