rem font sizing mixin

[David Oliver]

Hi,

I've written what I think is a useful little mixin that allows for
defining font-size using rem ( http://snook.ca/archives/html_and_css/font-size-with-rem
) that provides for browsers not supporting rems by also outputting a
px size first.

Variable and Mixin:
$px-base-font-size: 16px
=font-size-rem($rem, $px-base-font-size: 16px)
font-size: floor($px-base-font-size * $rem)
font-size: #{$rem}rem

($px-base-font-size can be set as the html font size, which is
necessary if it's going to be something other than 16px which tends to
be the default)

Sass:
+font-size-rem(1.9)

CSS:
font-size: 30px;
font-size: 1.9rem;

Two questions:

1. Is it worth me making a pull request to have it added to Compass?

2. If so, could you please advise me on conventions: where to put it
and how to handle the variable. I still don't feel I'm familiar with
the proper way of doing things.

Thanks.

[Eric Meyer]

It's an interesting approach. I'd like to see some thought on how it fits with the other font-size and rhythm mixins we already have in place. For example, we already have a variable called $base-font-size that takes px units.

Take a look at the vertical-rhythms module we already have in place, and see how this might fit in. I think that is where it would belong.

[Chris Eppstein]

I think you should be able to set $relative-font-sizing to false and $font-unit to 1rem.

At least that what how I wanted it to work :)

chris

On Mon, Sep 26, 2011 at 3:09 PM, Eric Meyer <erii...@gmail.com> wrote:

It's an interesting approach. I'd like to see some thought on how it fits with the other font-size and rhythm mixins we already have in place. For example, we already have a variable called $base-font-size that takes px units.

Take a look at the vertical-rhythms module we already have in place, and see how this might fit in. I think that is where it would belong.

--
You received this message because you are subscribed to the Google Groups "Compass" group.

To view this discussion on the web visit https://groups.google.com/d/msg/compass-users/-/btwHJNOARcYJ.

To post to this group, send email to compas...@googlegroups.com.
To unsubscribe from this group, send email to compass-user...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/compass-users?hl=en.

[Ryan Frederick]

Wondering if any additional though has gone into this? I'm considering attempting an experimental form of the vertical rhythm module that supports rem as the $font-unit. The goal would be to make usage and results more consistent by dropping the need for the $cotext size in mixing. I believe that's always last in the arguments list, so the API might need no changes. Your input is welcome.

[Chris Eppstein]

I'm pretty sure rem is already supported as an input font unit but if it's not, it certainly should be. I think the module will support it thru careful setting of the vertical rhythm variables. If you wrote a blog post on this, that would be great. Please note that the vertical rhythm module got some enhancements in 0.12, so do use the preview release if you're tinkering with it.

As far as output units go, I suggest pixels unless your website is going to have a text-resizing feature. The case for using ems or percents was based largely on IE6's zoom behavior. Using rem as an output unit is a bad idea if you have to support IE8 or below: http://caniuse.com/#search=rem

Chris

On Sat, Feb 11, 2012 at 11:17 AM, Ryan Frederick <ry...@ryanfrederick.com> wrote:

Wondering if any additional though has gone into this? I'm considering attempting an experimental form of the vertical rhythm module that supports rem as the $font-unit. The goal would be to make usage and results more consistent by dropping the need for the $cotext size in mixing. I believe that's always last in the arguments list, so the API might need no changes. Your input is welcome.

--
You received this message because you are subscribed to the Google Groups "Compass" group.

To view this discussion on the web visit https://groups.google.com/d/msg/compass-users/-/wf01JBXLpCoJ.

[Ryan Frederick]

Thanks Chris. I’ll have to dive in and play with it. The idea was to provide pixel fallbacks as long as $legacy-support… was on for  < IE9. That would require a rem mixin (which itself wouldn't belong here). So, I'll give it a try, and will bring it back to the community if I end up with something of value.