REMux 2.0: proportional scaling continued

Introduction

When Chris published my article on CSS-Tricks I was totally overwhelmed by the resonance it received. Some of you thought it was a good idea to simplify the transfer from Photoshop to HTML, some found it bizarre (hint @brad_frost - I did see that *g) and some actively took part in making it better which was one of my personal goals for this publicly available experiment.

Most of you were totally right when you argued that most of what REMux achieved could have been done in CSS only. I admit having perhaps been a bit too excited and focussed to do everything regarding font-size/layout switching in JavaScript and so I decided to refactor REMux. Thanks again to all of you, but especially Nick Williams and Ryan Wheale for their very constructive thoughts and comments on CSS-Tricks.

Today I am very happy to present you the next iteration: REMux 2.01!

Well, tell me what has changed...

The original concept for REMux had two parts about which you can either read on CSS-Tricks or here directly:

  1. LESS mixins that deal with px values we normally have spread all over our CSS
  2. A JS part that deals with viewport detection and font-size/layout switching

REMux 2.0 adds a part inbetween which effectively makes the JS part optional, media queries. So there is a minor shift in the responsibilities:

  1. LESS mixins that deal with px values we normally have spread all over our CSS
  2. Media queries that deal with font-size/layout switching
  3. A JS part that allows you to react on font-size/layout switches if you need to

Okay, are there any advantages?

Oh yes, there are! That was the main reason why I started revamping REMux. Just to give you a brief list of things that improved:

  • JS part is now optional (only required if you need to react on layout changes)
  • JS part is only approx. 3.5KB minified and gzipped in contrast to approx. 4KB before
  • Problems with browser zoom should be eliminated once and for all
  • Initialization of JS part does not need to happen in the body
  • Complete set of LESS mixins included

And how do I use it now?

Include remux.less from the assets directory of the repository linked below into your projects LESS directory structure and change the two variables at the top according to your project needs. Next change your projects CSS/LESS to use the mixins provided whereever you have static "px" properties. Just a short example:

font-size: 16px;                   // instead of writing
.remux(font-size, ~"16px");        // you now use

border: 7px solid #000;            // instead of writing
.remux(border, ~"7px solid #000"); // you now use

After having switched all your CSS from using px to rem define your breakpoints via media queries in one of three ways (examples taken from this site) according to your project needs:

1. Pure CSS wihtout layout IDs

/* mobile */
@media screen and (min-width: 300px) { html { font-size: 10px; } }
@media screen and (min-width: 330px) { html { font-size: 11px; } }
@media screen and (min-width: 360px) { html { font-size: 12px; } }
@media screen and (min-width: 390px) { html { font-size: 13px; } }
@media screen and (min-width: 420px) { html { font-size: 14px; } }
@media screen and (min-width: 450px) { html { font-size: 15px; } }
@media screen and (min-width: 480px) { html { font-size: 16px; } }
@media screen and (min-width: 510px) { html { font-size: 17px; } }
@media screen and (min-width: 540px) { html { font-size: 18px; } }
@media screen and (min-width: 570px) { html { font-size: 19px; } }
@media screen and (min-width: 600px) { html { font-size: 20px; } }
@media screen and (min-width: 630px) { html { font-size: 21px; } }
@media screen and (min-width: 660px) { html { font-size: 22px; } }
@media screen and (min-width: 690px) { html { font-size: 23px; } }

/* desktop */
@media screen and (min-width: 700px) { html { font-size: 10px; } }
@media screen and (min-width: 770px) { html { font-size: 11px; } }
@media screen and (min-width: 840px) { html { font-size: 12px; } }
@media screen and (min-width: 910px) { html { font-size: 13px; } }
@media screen and (min-width: 980px) { html { font-size: 14px; } }
@media screen and (min-width: 1050px) { html { font-size: 15px; } }
@media screen and (min-width: 1120px) { html { font-size: 16px; } }
@media screen and (min-width: 1190px) { html { font-size: 17px; } }
@media screen and (min-width: 1260px) { html { font-size: 18px; } }

2. Pure CSS including layout IDs

/* layout IDs */
@media screen and (min-width: 300px) { html:after { content: "mobile"; display: none; } }
@media screen and (min-width: 700px) { html:after { content: "desktop"; display: none; } }

/* copy & paste everything from variant 1 here! */

3. Via JS part of REMux 2.0 (anywhere after script inclusion)

window.qoopido.modules['component/remux']
    .addLayout({
        mobile:  { width: 420, min: 10, max: 23 },
        desktop: { width: 980, min: 10, max: 18 }
    });

The JS variant will automatically generate and inject a stylesheet which is more or less identical to the previous pure CSS variant and is much shorter.

And how do I listen for font-size/layout changes?

You will, of course, need the JS part of REMux 2.0. If you require to react on font-size/layout changes (for e.g. responsive images) you can simply register an event listener which will receive the current state as its first and only argument:

// recurring event listener
    window.qoopido.modules['component/remux']
        .on('statechange', function(state) {
            console.log(state);
        });

// once only listener is possible as well
    window.qoopido.modules['component/remux']
        .one('statechange', function(state) {
            console.log(state);
        });

Feel free to download and use REMux 2.0 in your projects but remember to give feedback and report bugs so I can make it even better!