what it new?

The code is now for Mootools 1.2. If you need it for Mootools 1.1 you can still find it from the original post. Be warned again, switch version 1 will overwrite any class you have on the body, all the time, no questions asked.

Which brings up the only actual “improvement” over version 1; switch version 1.2 will never touch any of your body classes¹.

what it is?

A 320 byte², Mootool’d version of the Switchy McLayout technique by Marc van den Dobbelsteen. Essentially it provides a simple javascript function that calculates the width of the available browser space and, more importantly, provides a styling hook based on the space available. The sizes are based on the defaults in Mint which seemed standardish enough for me.

what it do?

The only thing switch does is manage a class on the body element. If you need to know how it works, look at the code, it’s as simple as could I could think to make it.

The class name options are:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
• xxx-large

You’ll want to add at least:

window.addEvent('domready', function() {
  swhich();
});

and/or:

window.addEvent('load', function() {
  swhich();
});

and possibly:

window.addEvent('resize', function() {
  swhich();
});

somewhere in your javascript. After that you can easily style any element at any window size using something like:

body.xx-small div#superfluous_content { display: none }

The level of complexity you add or remove from the different sizes is optional.

where it at?

• full source
• compressed

¹ Unless of course you decide to use xx-small, x-small, small, medium, large, x-large, xx-large or xxx-large as class names on body for something else, in which case things should collide spectacularly. So don’t do that.

² 320b after packer compression and gzipping, 1790b uncompressed