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.66k stars 5.49k forks source link

Vertical rhythm in Foundation 6 #8164

Closed karland closed 6 years ago

karland commented 8 years ago

@gakimball @rafibomb A lot of people love vertical rhythms in their sites, me included. There are external tools to achieve this, but I think it would be nice if F6 would make it a little easier to actually make the appropriate settings in _settings.scss without external dependencies.

The basic idea for achieving vertical rhythm in F6 would be to have all all top/bottom margins and paddings and all line-heights to be a multiple of the $global-lineheight. This is almost already possible now, but here are some necessary changes:

I am happy to make a PR, but before I would like to check with ZURB if this is actually desired.

The old default values for the current line-height-settings and margins or paddings would remain.

karland commented 7 years ago

@brettsmason Thanks. I understood the logic of the unitless-calc(), however, I struggled with the concept of how to apply it. This is why I believe we need the common test environment. Please let me know, if you get it to run.

My understanding of vertical-rhythm is that line-heights are always an integer multiple of a base-line-height across all elements. So an elements line-height does not depend on the elements font-size. As a result line-heights usually get an absolute number (with 'rem's or 'px's). At least, this is also how gridlover and others (e.g. knife) are implementing it.

I changed your unitless-calc() accordingly, however, now the name does not fit any longer, since it returns a 'rem'-value. Have a look at my PR and tell me what you think. If you want we can move the more code oriented discussion into the thread of my PR.

brettsmason commented 7 years ago

@karland Sorry I'm struggling for time as I'm going away for 3 days after today. However I'd still love to get this moving along and included in 6.3, though the deadline is next Thursday so we are pushing it a bit! Do you have the available time to spend on it to get it into a good place? I can merge your PR into the vertical-rhythm branch if that will help the process.

I'm not sold on having line heights with values yet, as everything I'm used to and have read suggests unitless is the best way to go. I probably need some more info on why we can't use unitless I guess...

Maybe @andycochran you could chime in with your opinion too?

andycochran commented 7 years ago

I'd stick with unitless line heights because of unforeseen inheritance issues. For now, we're just talking about adding line-height and margin to certain elements, we're not setting pixel-perfect vertical rhythm on every element. Right? I don't want to set the precedent of units on line heights. Child elements should compute their line heights based on their font size, as inherited values from parents are more likely to need overriding. If we introduce units to line heights, we'll have to set line height on every single element (yuck).

karland commented 7 years ago

@brettsmason I am not sure about unitless-lineheights in the context of vertical-ryhthms. Maybe it just has not yet crossed my path. I have to think this over and play around with it.

In any case, I think we have made some good progress moving from $header-sizes to $header-styles and keeping the line-heights relative for the moment is good enough for me. In this case you can forget about my PR on your unitless-calc() function.

I can see the point of @andycochran. In any way, I am not suggesting to introduce fixed line-heights to every element. On the other hand, the settings.scss should eventually and in the future allow the users to style all elements such that they adhere to a pixel-perfect vertical ryhthm.

I am happy to work on this a bit, but I cannot promise to have a working solution by Thursday. One open question is still how to depreciate $header-sizes. I have thought about different solutions, but in the end I believe a boolean variable is unavoidable. In this case you need to give some guidance on a variable name. Or maybe you have an idea for an alternative solution. Cheers.

karland commented 7 years ago

@brettmason @andycochran I have played around with unitless lineheights and I am happy with this approach. I closed my previous PR and worked out an according PR #9397.

While I was working on this PR #9397, I discovered some other issues that I have also put in separate PRs: PR #9396 and PR #9395

stereobooster commented 7 years ago

There is related work on typographic baseline https://github.com/michaeltaranto/basekick, maybe it will be helpful

brettsmason commented 6 years ago

This is something I would personally very much like to include in V7 but we aren't adding any new features for V6 going forward. @karland Thanks again for your input on this - I'm hoping we can do a lot more with V7 on this 👍

Anke commented 6 years ago

I haven't been satisfied with foundations's vertical rhythm either, and I've implemented this example of Mike's: https://codepen.io/MadeByMike/pen/bEEGvv?editors%3D0100. See his matching article here: https://www.smashingmagazine.com/2016/05/fluid-typography/. Ideally you could mix his appriach of fluid typography and vertical rhythm, however this approch seems to take up a lot of calculating power.