There is usually no one way of doing something in css (hell, often there isn't even an ideal way of doing something). This section was brought to life to go over some known (and lesser known) css techniques while exploring the pros and cons of each technique.

Future-Proof Mixins

December 11, 2014

People love to complain about the mess that is css and javascript, but sometimes true beauty and elegance can be found within. In this particular case, I'll be talking less (not exactly core css of course, but something I assume most people are familiar with by now).

The biggest challenge in web design is building something that can stand the test of time. And by that I don't mean building a site that's so exquisitely beautiful and user-friendly that people won't need to touch it for the coming years, I'm talking about building a site that is so robust that future changes are easy to implement. A site that supports changes on page level as well as section level as well as site level. A site that remains slick and beautiful, even after 5 revisions and 3 redesigns.

A while ago I came across a nice construction in less that fortifies such a desire. It's a little trick that many of you will probably already know, still I feel confident that it's worth revisiting if only for the cheer beauty of the solution. Now, imagine you need to write a mixin for a button style. Typical stuff, some rounded corners, maybe a little gradient, a box shadow if it's an older design ... but it's the same button style that needs to be applied throughout the entire site. Your mixin will probably look something like this:

/* less */ .button {... padding:0.75em 1em; font-size:18px; ....}

This will need some extra work if it has to be applied to <a> as well as <button> and <input> elements but that's not really the point. The thing that will happen is that at one point, that one button isn't going to be good enough any more. Suddenly you'll want a button that looks exactly the same, only BIGGER. A real call to action.

Now, this wouldn't have been much of a problem if you'd known this from the start, you could have ended up with something like this:

/* less */ .button {... padding:0.75em 1em; ....} .buttonNormal {.button; font-size:18px;} .buttonBig {.button; font-size:24px;}

It's a decent enough solution, but not something you'd want to use midway a project as you'd have to run through your entire css code all over again in order to replace every instance of the .button mixin.

/* less */ .button {... padding:0.75em 1em; font-size:18px; ....} .buttonBig {.button; font-size:24px;}

This works too. Just make a new mixin for the cta button, this way you won't have to touch your existing code, but it's still an extra mixin that is sure to make things more confusing along the way (read: in three years time). Luckily, less can also do this:

/* less */ .button(@fSize:18px) {... padding:0.75em 1em; font-size:@fSize; ....}

Just promote the property you want to change to a variable with a default value (= the value you've been using all along). You won't need to change anything to your existing code, there's no need for extra mixins and you can start using the same mixin you've been using all along, only with an extra parameter if need be. You made something extremely flexible from something extremely rigid without breaking anything.

If only css and javascript had more mechanisms like this, our jobs would be a lot easier.

proportional responsive

October 10, 2013

Earlier this year I wrote a post on proportional responsive css, detailing two techniques in order to create proportionally responsive elements. The third option I'll be detailing here is little more than an expansion on the padding solution, but one that will save you the need for an extra structural wrapper at the cost of out of the box browser compatibility.

The padding technique is based on the fact that top/bottom padding is relative to the width of its parent. Exploiting this behavior, you can easily create a rectangle that grows and shrinks proportionally. Once you have the proportional box you can span (position:absolute and all sides set to 0) a deeper nested box across the parent box. For this technique you need two extra wrappers though. One to set the padding (as it only works on the width of its parent), one to span the content across the box.

/* html */ <section class="list"> <div class="atom"> <div class="content"> ... </div> </div> <div class="atom">...</div> </section>

The .atom elements are our proportional blocks, the .content elements are the spanned elements that contain the actual content of the block. Now for the css:

/* css */ .list {overflow:hidden;} .atom {width:25%; float:left; position:relative;} .atom:before {content:""; display:block; padding-top:100%;} .atom .content {position:absolute; left:0; right:0; top:0; bottom:0;}

The trick is actually pretty simple. We simply use a pseudo-element to trigger the padding magic, which means we don't need the extra structural wrapper in the html. The pseudo-element is set to display:block so it acts like a regular structural element, then it's given a padding depending on the ratio you want to support (100% makes a square).

The problem with pseudo-elements is that they are not supported in IE7. Javascript fallbacks are easy to do (just insert a div with js and apply the exact same styling), but ideal it is not. Then again, if you don't need to support IE7 this third technique makes things a lot easier.