Wednesday, April 15th, 2009

FluidLayout; Having fun with ’em

Category: CSS

Yusuf Akyol has created a simple fluid design library inspired by emastic that puts power into the em.

Check out the test page and resize the browser to see the layout and font size change before your eyes.

You use the framework via a little CSS and:

  1. <script type="text/javascript">
  2.   fluidLayoutinit(yourFontSize, yourScreenSize);
  3.    // yourFontSize is a hundred percent value at yourScreenSize
  4.    // yourScreenSize is a pixel value for yourFontSize
  5. </script>

The work is done by:

javascript

  1. var fluidLayout = {
  2.  
  3.    myFontSize: 100,
  4.  
  5.    getBrowserWidth: function() {
  6.       if (document.documentElement && document.documentElement.clientWidth != 0) {
  7.          return document.documentElement.clientWidth;
  8.       } else if (document.body) {
  9.          return document.body.clientWidth;
  10.       }    
  11.       return 0;
  12.    },
  13.  
  14.    dynamicLayout: function () {
  15.       var defaultFontSize = fluidLayout.myFontSize * 100;
  16.       var browserWidth = fluidLayout.getBrowserWidth();
  17.       document.body.style.fontSize = (defaultFontSize * browserWidth / 100000) + "%";
  18.    },
  19.  
  20.    addEvent: function (obj, type, fn) {
  21.       if (obj.addEventListener) {
  22.          obj.addEventListener( type, fn, false );
  23.       } else if (obj.attachEvent) {
  24.          obj["e"+type+fn] = fn;
  25.          obj[type+fn] = function(){ obj["e"+type+fn]( window.event ); }
  26.          obj.attachEvent( "on"+type, obj[type+fn] );
  27.       }
  28.    },
  29.  
  30.    init: function(fontSize) {
  31.       this.myFontSize = fontSize;
  32.       this.addEvent(window, 'load', this.dynamicLayout);
  33.       this.addEvent(window, 'resize', this.dynamicLayout);
  34.    }
  35. }

Posted by Dion Almaer at 4:08 am
13 Comments

++---
2.3 rating from 41 votes

13 Comments »

Comments feed TrackBack URI

It seems to break all usability / accessibilty features of my browser (Firefox 3). Try CTRL + to zoom in (or CTRL – to zoom out) and you’ll see that ‘fluid layout’ breaks the feature.

Comment by gaalan — April 15, 2009

Hi,
Yes you’re right but it’s not a bug… It’s working like this. When you change font-size my codes rechange it for display whole window.

Comment by yusufakyol — April 15, 2009

It would be good if the line-height property was fluid too – or are they static by design?

Comment by bogphanny — April 15, 2009

It’s good idea but I don’t need to do anything. You may set line-height in css.

Comment by yusufakyol — April 15, 2009

I changed function calling like this at last version:

fluidLayout.init(yourFontSize);

as a sample:
fluidLayout.init(85); // 85%

Comment by yusufakyol — April 15, 2009

What is the point of this?

It is the job of the user to pick the font size that works for their resolution.

Comment by Darkimmortal — April 15, 2009

Not working on Chrome 2 beta

Comment by wilq32 — April 15, 2009

The image resize part of the library is cool. I would rather let users set their own font size though.

@wilq32 – the demo works for me in Chrome 2.0.169.1

Comment by WillPeavy — April 15, 2009

First of all thanks for all remarks.

To Darkimmortal:
Just you set, only once, desired font size for your design. For example if you work 1024 px resolution, developed your site 1024px and set desired font site as a percent value. If a user has 1280px resolution, your site will be displayed at 1280px full window size or if a user use 800px resolution, your site will be displayed at 800 px full window size. If you change window size by draging from corners or change “Display Settings”, site will be displayed at full window without horizontal scroll bar.

To Wilq32:
It works at Chrome 2 too. My solution is for displayed any site at full window as explain above. Normally, when changed font-size with browser menu options, my solution reset it to suitable font-size for display at full window. But this is not working only Chrome 2 Beta and Lunascape 5 Beta. Everything is normal at other browsers.

Comment by yusufakyol — April 15, 2009

This is a neat proof of concept, but it’s also a usability nightmare. Please don’t do this to your users.

Comment by eyelidlessness — April 15, 2009

I guess you have never tried iPhone and Android WebKit based mobile browsers …

Comment by WebReflection — April 16, 2009

I’m a bit late to the party but I just had to comment on this…

Font size changes based on a window size via javascript is a huge no-no as far as I’m concerned. For one, it results in a jarring repositioning of text when the code resizes the font. More importantly, as people pointed out, it breaks usability. If you wish to give people control over font-size through your site (instead of browser controls) then just use the standard “increase/decrease font” buttons.

What’s more, this works against the idea of liquid (or fluid, or flexible, or what have you) layout. The way I see it, liquid layout is about using all the available space to show as much content as possible without scrolling, and while maintaining good, readable design. If you’re gonna increase font size with window you won’t be able to show more content.

Comment by iliad — April 19, 2009

Looks like your whole site is using only italics for text.
And lots of mystery meat nav and other bad usability stuff too.

Comment by MatsSvensson — April 20, 2009

Leave a comment

You must be logged in to post a comment.