Writing with px only, post-processing to px + rems

[joaocunha]

I personally prefer to write plain vanilla px units and have the build process to convert them to rem. I've been using node-px2rem for that and it works great, but it's far from a popular tool (I'm the only one to star it so far).

I wonder if this is something you have on the roadmap, or maybe I'm just stupid enough and was not able to do this with pixrem :)

[mmikkel]

@joaocunha You might want to check out gulp-pxtorem.

[iamvdo]

@joaocunha Not in the roadmap, but I hear about this approach. You're not alone. :) I think it's better to have 2 modules, but what is your thought ? A switch ? Something like:

pixrem.process(css, {mode: 'pxtorem'})
pixrem.postcss(css, {mode: 'remtopx'})

[joaocunha]

@iamvdo in a perfect world, it would work automagically for both cases - px to rem and rem to px. Then, a flag could be set on config to disable one of the two.

How do you feel about it?

[robwierzbowski]

Can you tell me what the benefit of pix to rem is? Why not author in rem and use this module for its intended purpose?

I had this request a couple of times, but couldn't find a valid use case.

On Friday, March 27, 2015, João Cunha notifications@github.com wrote:

@iamvdo https://github.com/iamvdo in a perfect world, it would work automagically for both cases - px to rem and rem to px. Then, a flag could be set on config to disable one of the two.

How do you feel about it?

— Reply to this email directly or view it on GitHub https://github.com/robwierzbowski/node-pixrem/issues/31#issuecomment-87109381 .

Rob Wierzbowski @robwierzbowski http://twitter.com/#!/robwierzbowski http://github.com/robwierzbowski http://robwierzbowski.com

[joaocunha]

@robwierzbowski writing in px is easier, fool-proof, requires absolutely no math, and "it just works". In fact, people have been writing in px from way before the advent of CSS. Alternative units started being use due to the zoom issue on IE.

To easily write in rem, one needs to set a base font-size of 10px (or the equivalent percentage) on html, otherwise a math calculation is needed (simple, but still).

If a spec says something should be 120px wide, I don't want to do 120 / 16 = 7.5 rem, I just want to add width: 120px and rem'ify it automatically.

[robwierzbowski]

I guess we'll agree to disagree. Rems are a type-proportional unit, whereas px are fixed. I use rems when something should be proportionally scaled to type, and px when something should be scaled to a raster graphic. That the comp handed from the design team is in px isn't an issue for me -- we don't work with static comps anymore, but instead build with web prototypes. But I understand that some people do still use a traditional hand off of static comps.

The thing I don't understand is the final benefit. For me, rem are a more understandable, chunky unit of measurement. We size almost everything in .25 increments of rem, which is a development benefit. Rem resize if you change the root font size, which is a design/ux and development benefit, but only when applied carefully -- we usually want to size the font up, but the containers down. Resizing everything would not give us any benefit (at least the way we think about responsive design).

So, if it's easier to design for you in px, and if you're not counting on the selective proportional resizing of type, what benefit does turning px to rem give you over leaving the design in px?

On Friday, March 27, 2015, João Cunha notifications@github.com wrote:

@robwierzbowski https://github.com/robwierzbowski writing in px is easier, fool-proof, requires absolutely no math, and "it just works". In fact, people have been writing in px from way before the advent of CSS.

To easily write in rem, one needs to set a base font-size of 10px (or the equivalent percentage) on html, otherwise a math calculation is needed (simple, but still).

If a spec says something should be 120px wide, I don't want to do 120 / 16 = 7.5 rem, I just want to add width: 120px and rem'ify it automatically.

— Reply to this email directly or view it on GitHub https://github.com/robwierzbowski/node-pixrem/issues/31#issuecomment-87113776 .

Rob Wierzbowski @robwierzbowski http://twitter.com/#!/robwierzbowski http://github.com/robwierzbowski http://robwierzbowski.com

[robwierzbowski]

And by "we size almost everything in .25 increments of rem" I mean almost everything we choose to size in rem. We use percent and px in many situations too, depending on the desired effect :)

On Friday, March 27, 2015, Rob Wierzbowski rob.wierzbowski@gmail.com wrote:

I guess we'll agree to disagree. Rems are a type-proportional unit, whereas px are fixed. I use rems when something should be proportionally scaled to type, and px when something should be scaled to a raster graphic. That the comp handed from the design team is in px isn't an issue for me -- we don't work with static comps anymore, but instead build with web prototypes. But I understand that some people do still use a traditional hand off of static comps.

The thing I don't understand is the final benefit. For me, rem are a more understandable, chunky unit of measurement. We size almost everything in .25 increments of rem, which is a development benefit. Rem resize if you change the root font size, which is a design/ux and development benefit, but only when applied carefully -- we usually want to size the font up, but the containers down. Resizing everything would not give us any benefit (at least the way we think about responsive design).

So, if it's easier to design for you in px, and if you're not counting on the selective proportional resizing of type, what benefit does turning px to rem give you over leaving the design in px?

On Friday, March 27, 2015, João Cunha <notifications@github.com javascript:_e(%7B%7D,'cvml','notifications@github.com');> wrote:

@robwierzbowski https://github.com/robwierzbowski writing in px is easier, fool-proof, requires absolutely no math, and "it just works". In fact, people have been writing in px from way before the advent of CSS.

To easily write in rem, one needs to set a base font-size of 10px (or the equivalent percentage) on html, otherwise a math calculation is needed (simple, but still).

If a spec says something should be 120px wide, I don't want to do 120 / 16 = 7.5 rem, I just want to add width: 120px and rem'ify it automatically.

— Reply to this email directly or view it on GitHub https://github.com/robwierzbowski/node-pixrem/issues/31#issuecomment-87113776 .

Rob Wierzbowski @robwierzbowski http://twitter.com/#!/robwierzbowski http://github.com/robwierzbowski http://robwierzbowski.com

Rob Wierzbowski @robwierzbowski http://twitter.com/#!/robwierzbowski http://github.com/robwierzbowski http://robwierzbowski.com