Foundation needs better vertical rhythm

[ghaida]

This applies to both typography and components in general. Vertical spacing should be based on a single variable, and consistent fractions/multiples of that variable.

[ghost]

I'm currently using Compass's Vertical Rhythm module with Foundation, it works quite well. But I'd love to see a global default for margin bottom, as opposed to the current rem-calc(20) that is repeated quite a lot.

[erredeco]

Just as a note: as far as I can remember Foundation and Compass use the same name for two variables: $base-font-size and $base-line-height and this could lead to some confusion :)

[ghost]

That just makes integration easier as the Foundation variables override the Compass ones, for example

$base-font-size: $rem-base;
$base-line-height: floor( $base-font-size * 1.62 );

You can use all the Compass mixins (like trailer()) & functions (like rhythm()), and even add rem support:

$rhythm-unit: 'rem';
$font-unit: 1rem;

So for example

$alert-bottom-margin: rhythm(1);

Will scale better than the current rem-calc(20). I even take it a step further and use it for my grid gutters like so:

$column-gutter: rhythm(1);

This is why I'd like to see some kind of base spacing variables to Foundation, for example:

$base-spacing: rem-calc(20);
$base-spacing-half: $base-spacing / 2;
$base-spacing-double: $base-spacing * 2;
$base-spacing-quarter: $base-spacing / 4;

[zurbrandon]

I like it! We'll add it to the list of priorities for now, but i'm down if you'd like to do a PR on that @andy-saint

[erredeco]

suggestion: why not use a font-size resizable accordingly to the screen resolution as in cardinal.css?

[gakimball]

Closing this and adding it to our Foundation 6 wishlist: #4710

[stereobooster]

It doesn't seems to be implemented, but all tickets for Vertical Rhythm is closed. Or I'm wrong?

I want try to use http://matejlatin.github.io/Gutenberg/. Not sure if Gutenberg and Foundation will make good friends.

[stereobooster]

For future googlers: open ticket for Vertical Rhythm is #8164

[andycochran]

Also, see #8507, where I mention how vertical rhythm is important, but following it to the pixel isn’t.

[stereobooster]

@andycochran is link to tweet suppose to make your argument stronger?

[andycochran]

@stereobooster Sorry if I sounded argumentative; I didn't mean to be. I agree we should clean up the messy vertical rhythm of Foundation. Just wanted to point out that pixel perfection isn't something we should be striving for. We should instead be structuring the components to account for consistent, flexible, responsive vertical relationships.