Allow font-size to be em units #6

Activity

1. tbredin commented on Mar 25, 2016

   

   tbredin

   on Mar 25, 2016

   Contributor

   More actions

   Hi green-arrow,
   I'm interested to hear more about your intention here. Are you wanting the em-scaled content to snap to a local grid, or are you just concerned about measuring from cap height when setting your spacing? (ie; are you working with $baseline-scaling on or off?)

   I think the idea of a local grid is an interesting idea but my concern is that we would need to add additional parameters to the typeset mixin so we can know the local font-size context, and tell it to output in em's.

   Another option would be to assume the rootsize as the context and rely on tweaking the sizing of your sections with the font-size of a parent element (which I assume you're doing already), which would give you a number of local grids. However we still need either a per-mixin parameter to tell it to output in rems, or perhaps a global setting might be more appropriate? That way we wouldn't clutter up the typeset mixin with too many extra parameters.
2. green-arrow commented on Mar 28, 2016

   

   green-arrow

   on Mar 28, 2016

   Author

   More actions

   Hi @tbredin

   After thinking more about this, I think what I'm interested in is a local grid.

   About the extra parameters: would it be possible to create another mixin wrapper like min-width that could be used to store information about the container font size? That way, you could always have access to the root size, kind of like you always have access now to the breakpoint via existing mixins.
3. tbredin commented on Mar 29, 2016

   

   tbredin

   on Mar 29, 2016

   Contributor

   More actions

   I like the concept. I'll have to spend a bit more time investigating whether this is viable, but something like this seems like it might work:

   .parent {
       @include with-rootsize(14px) {
           .child {
               @include typeset($sans, 16px, 2, 1, 2);
           }
       }
   }
   

   I'm thinking that this would apply the typeset mixin to .child in em so that we can then scale this locally based on the font-size we give to .parent (applied by the wrapper mixin).

   I'll try find some time soon to give this a go; I do think it would make a pretty cool feature but just so long we can figure out a way to do it that doesn't overcomplicate existing mixins or result in any unexpected behaviour in edge cases (eg: I'm not sure how far we should go to support the use case of having something on a global grid that switches to a local one at a given breakpoint..).

   👍React with 👍1Reacted by Glenn
4. green-arrow commented on Mar 29, 2016

   

   green-arrow

   on Mar 29, 2016

   Author

   More actions

   Yeah, something like that is exactly what I was thinking. It would also be awesome if the with-rootsize accepted rem as well.

   I don't think we want to overcomplicate existing mixins either, and I don't think the switching from global > local grid based on breakpoint would be necessary. I feel like exactly what you have above, a root container sized in px or rem, with all typeset mixins inside resolving to em is perfect.
5. tbredin

   added

   enhancement

   on May 10, 2016
6. thebenshaw

   added

   backlog

   on Jul 19, 2017