2 col stack center vertically Foundation

Classic Stacks
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

54%20PM
54%20PM1002×433 281 KB

40%20PM
40%20PM1180×475 413 KB

2

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

1 Like
3

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

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’.

screenshot_190
screenshot_190848×350 48.9 KB

2 Likes
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?

1 Like
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.
2 Likes
7

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

3 Likes
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.

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

25
25822×400 40.1 KB

4 Likes
10

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