I've been having a play around using em's/rem's today on a new site and have several things i'd like to discuss/ask on here.
For many years I have been totally a pixel based person with a few percentages thrown in when required.
I keep reading that em's and rem's are "the way" the web should be. Fair Enough which is why I gave it a go today.
So, first things first. Are the point of using em's/rem's for dimensions literally just for changing the dimensions of things relative to the main font size?
If so, then for what situation would you change the main font size? I have always set mine to be 16px and worked with it.
I located a Sass mixin that allows me to specify in pixels my dimensions for any property and it outputs it with rem and a pixel based fallback. I tweaked it to my liking first though.
So I then started building the site using the rem mixin for all my dimensions (margin, padding and a few heights). Yes everything scales when I alter the main font size but again, same question as number 2 here.
I used Compass Susy to set my grid up and used em's to specify it's settings, (I normally would have chosen pixels). I set the grid style within Susy to be the magic-grid which makes the grid static when the browser is wider than the grid but entirely flexible on the inside.
Surely everything that I have read about the benefits of using em's can be done using media queries? What do you guys do and most importantly what do the mainstream sites use?
Right, the next two questions are to do with images. I came across two situations today where using em's/rem's with an image somewhere in the equation resulted in a problem.
5a. I had an h2 set to inline block and added padding around and then the rem equivalent of 45px padding on the right. I set the line-height to a unitless value of 1.3. I then set an image to be the background of the h2 to appear over to the right to appear in the padding-right. At the standard base font size of 16px all is fine. However I increase or decrease that font size and the top and bottom of the image crop off. So question 2 again. I see why the image is getting cropped but it's how to deal with the relationship between em's/rem's and images that is bugging me.
5b. I had a div with a height set at the rem equivalent of 200px in height. I then added an image into there which had a height of 200px. The width of the image was set using the susy mixin span-columns to a specific column width and the height was set to auto. When the font size was altered I either ended up with an image too tall or too short. What is the best thing to do in this situation?
I was looking through some of the compass mixins available and for example this one:
@mixin pretty-bullets($bullet-icon, $width: image-width($bullet-icon), $height: image-height($bullet-icon), $line-height: 18px, $padding: 14px) {
margin-left: 0;
li {
padding-left: $padding;
background: image-url($bullet-icon) no-repeat ($padding - $width) / 2 ($line-height - $height) / 2;
list-style-type: none;
}
}
I can't add in all my em/rem stuff in there?
I think the over arching questions are:
Why are em's/rem's required in the first place? How do you work with them in relation to images? Any thoughts guys?
Ems/rems are used to make the site adaptive to different settings on the client end. My browser settings can increase or decrease the font size on your site, and using em/rem allows you to adapt to my settings. It's a trade off - as with everything else in web design - between your pixel-exact control and your willingness to design around change and user control. There is no right answer - but I like to remind myself that the entire technology of the web is weighted towards user control, and any attempt for me to be pixel-anal is fighting against the core technologies.
Ems/rems can be used in media-queries to set breakpoint widths, but they solve a different part of the adaptability formula - font size, rather than screen size. Your Susy grid can now adapt to both at once!
Images are a pain for any kind of responsive/adaptive design work. The same solutions you might use for a fluid layout will help with an em-based layout. Common solutions involve the background-size property (Compass has a mixin for it) and setting html images to a max-width of 100%. See CSS-Tricks Rundown of Handling Flexible Media. I have use this fluid-media mixin to handle the "intrinsic ratios" approach for background images and the like.
But, more often than not, I find a way to design with fewer images. I like that the technology pushes me towards simplicity in that area - so it doesn't bother me.