Closes #9871: Flex Topbar

[IamManchanda]

This closes #9871.
The new docs codepen example already fixes this.

This just adds

• Titlebar tweaks to make it look similar to float one
• Add a test case for new docs example!
• Docs update with new codepen example

Here is the flex version codepen (with titlebar tweaks) => https://codepen.io/IamManchanda/pen/OmBVZE?editors=1100

[IamManchanda]

@kball ,,,, i think the docs update should go in master (live) also!

[kball]

@rafibomb can you take a look at this?

[rafibomb]

I don't see why this should be start (left align)

By default I think it should be space-between is you had 2 sides like:
http://foundation.zurb.com/sites/docs/off-canvas.html#combining-with-title-bar

[rafibomb]

Interestingly, this component can be manipulated with the flex helper classes. I think title bar should get it's own docs page.

[rafibomb]

Ok I see when you dont use title bar left or right then flex start makes sense. I've added to your test case to demonstrate.

[IamManchanda]

So shall we insert this in a variable ?
@rafibomb?
and keep flex start?
And some docs about it?

[IamManchanda]

On title bar docs, yes I agree infact having same discussion about it at #9991

[IamManchanda]

@rafibomb @kball Awaiting reply for above
Can we close this before 6.4 RC?

[rafibomb]

I don't know how I feel about removing the all in one responsive toggle docs example - it's nice to have but I get it needs work for flex version

[rafibomb]

It looks good from a bug fix perspective - merging!

What I'd like to see in the future:

• title-bar has it's own docs page within navigation
• title-bar inherits top-bar styles (height, color, background)
• or eliminate the thing altogether and use top-bar on mobile and larger

Thoughts? @IamManchanda @kball @brettsmason @andycochran @colin-marshall