search

foundation / foundation-sites

The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.
https://get.foundation
MIT License
29.65k stars 5.48k forks source link

How is vertical rhythm handled? #947

Closed chrisnicola closed 12 years ago

chrisnicola commented 12 years ago

From what I can tell there is no baseline or vertical rhythm unit. Just the modular scale, which defines the scale of the fonts, but the baseline is different for each size.

I'd be happy to work on applying the Compass vertical rhythm mixin to fix this.

hatefulcrawdad commented 12 years ago

The rhythm is defined by the modular scale as well sort of. We'd definitely be interested in seeing how you incorporate the compass mixin because we found it kind of hard to use.

chrisnicola commented 12 years ago

heh, yes it is very hard to use. I can post a gist of what I did. I actually just ended up relying on px instead because ems (the default in compass) creates a whole bunch of problems for setting margins, padding, etc. So I suppose it isn't a big deal and doesn't necessarily need to be built in but it might be good to set as the initial defaults or perhaps a setting.

Compas is rewriting the VR mixin to use rems with a fallback to px which will be much better so when that happens I'll probably switch back.

By itself though, modular scale does not define a baseline rhythm, just relative font sizes. Vertical rhythm requires all line-heights and margin/padding to add up to a multiple of the base line height. These rules are made to be broken but are really good to apply in most places.

hatefulcrawdad commented 12 years ago

Closing this as an issue for now since the PR will do enough to remind me to include this soon! I haven't gotten in there to test it out yet, but I'll try to do that next week so that we can include this ASAP.

rawtaz commented 11 years ago

What's the status of this stuff? Did anything for vertical rhythm get included in F4?