2 col stack center vertically Foundation


(Lisa Sandler) #1

@joeworkman or @zeebe
Does the 2 col stack have the ability to vertically center what’s in col 1 on col 2? I’m trying to stick to only Foundation stacks if I can… I read where equalize does not center text, just the background. I’m using Match Height in other stacks… would I need to do something like that with this?

I want the 1 col with text on the left to vertically center on the image on the right.

thanks



(Joe Workman) #2

It does not auto-center content. You could use Target to center it.


(Lisa Sandler) #3

ok, thanks. Will take a stab at it tomorrow.


(Rob Beattie) #4

I know you mentioned wanting to use Foundation stacks only but BWD’s Grummage 2Col stack does this easily. There’s just a single button ‘Vertical Centre’.


(Barrie McDermid) #5

Is there really any benefit to using Foundation stacks exclusively? I thought that the BWD stacks were written for Foundation anyway so it shouldn’t really matter?


(Doug Bennett) #6

Exclusively maybe not…
but the reason frameworks like Bootstrap(Twitter) or Foundation(Zurb) have been developed and became so popular is having all the common components that a web developer uses to build a site are built in.

Each component has been thoroughly tested, so you can be confident that they work as tens of thousands of developers use them.

You know they’re compatible with one another as they’ve been designed to work together.

All the muscle that make the magic work like JavaScript, CSS and supporting libraries are loaded once and cached so subsequent pages load much faster.

So in the case of foundation you’re loading all the code to do all these powerful functions on each page just waiting for you to execute.
Things like:

  • Accordion
  • Dropdown
  • Reveal
  • Off-canvas
  • Orbit
  • Menu’s
  • Top bar
  • Magellan
  • Breadcrumbs
  • Buttons
  • Slider
    So you load them on each page , they work in harmony together so it’s best if they do what you want to use them.

(Andrew Tavernor) #7

The Grummage stacks are Foundation columns - they use the framework just like the RW Foundation column stacks do.


(Lisa Sandler) #8

I love love love Andrew’s stacks, but when I decided to trim down my website to using only Foundation for Header, Paragraph and Columns (I had BWD previously), it cut down to almost 1/3 of the size. As my site is very photo heavy already, this makes a huge difference.


(Andrew Tavernor) #9

Here are the actual measured sizes of 2 pages:

Site Styles + 10 x Foundation 2 col

Site Styles + 10 x Grummage 2 col

I added 10 of each so that it would amplify any variation if present.

As you can see, they are identical in total. Grummage has 1kB less CSS and 1kB more HTML


(system) #10

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.