Wednesday, February 14th, 2007

___layouts: simple layout builder

Category: CSS, Utility

Christos Constandinou wanted to take YUI Grids and make something that was easy to use and would work with anal designers who want to achieve pixel perfect layouts.

He came up with ___layouts:

The foundational ___layouts file offers five preset page widths, the option to have a fixed width or a text “zoom” style scaling effect and two core templates which give you the ability to nest subdivided regions of one to four columns.

  • Supports fluid-width (100%) layouts.
  • Supports preset fixed-width layouts at:
    • 640px
    • 760px
    • 900px
    • 1000px
  • Supports easy customization of the width for fixed-width layouts.
  • Option to make layout flexible in response to user initiated font-size adjustments
  • Self-clearing sections. No matter which column is longer, each div.section will clear correctly.
  • Option to center within the viewport pages less than 100%.
  • Supports easy to over-write CSS classes for people who require “pixel perfect” layouts
  • font.css based on YUI fonts.css though changed slightly to rid you of having to look up calculations for different font-sizes (so now: 1em = 10px, 1.3em = 13px, etc…).

A builder application (FF only) gives a designer view on the layout.

Layout Builder

Posted by Dion Almaer at 7:47 am
22 Comments

+++--
3.7 rating from 27 votes

22 Comments »

Comments feed TrackBack URI

Nice work that is a really nice piece of kit, i cant wait to see later releases, i was going to do something similar for a project i had in mind for project but never got round to it……

Keep up the good work

/jester

Comment by Jester — February 14, 2007

Hmm. Maybe you should edit the part about the designers it works with .. :) Otherwise interresting article.

Comment by Peter Svensson — February 14, 2007

Hmm… Anal designer…

Comment by Piotr Usewicz — February 14, 2007

I understand that Chris, my arch-nemesis, takes it up the ying-yang

Comment by Chris the Gimp — February 14, 2007

Simple to use, understandable and neat :)

Comment by Alex93053 — February 14, 2007

I’ve started re-developing the builder so you can input your pixel perfect widths into each column and it will write your CSS for you, though really busy at work so it may take a a few weeks. :)

re: Designers, my exact words were “Working as a contractor for corporate sites, and (some print) designers who are precious about their babies, there is a requirement to be able to achieve pixel perfect layouts for all components of a web page.” I never said anal, so apologies, however I’ve worked with many designers…

Comment by Christos — February 14, 2007

Dion, if you want to use profanity on your site, that is your privilege. But putting it in other people’s mouths is really tacky.

Comment by Michael Geary — February 14, 2007

What’s he put in someone else’s mouth? Maybe you’re not aware of non-‘profane’ use of the word. See (2) here: http://dictionary.reference.com/browse/anal

Comment by Jerome — February 14, 2007

Hmm, actually maybe this’ll help you better: http://www.answers.com/topic/anal-personality

Never thought I’d be posting about this on a forum :)

Comment by Jerome — February 14, 2007

@Christos: the download link in the demo is broken! :o)

Comment by Alex — February 14, 2007

Thanks Alex,
I’ve fixed that now. :)

Comment by christos — February 14, 2007

Jerome, thank you for the references, but I am already familiar with the word and phrase.

You asked, “What’s he put in someone else’s mouth?”

Well, read the post: “Christos Constandinou wanted to take YUI Grids and make something that was easy to use and would work with anal designers…” and Christos’ response: “I never said anal, so apologies…”

Why did Christos feel the need to apologize for something that somebody else wrote?

Comment by Michael Geary — February 14, 2007

That is a pretty nifty tool, but I think this guy did it first.

http://blog.davglass.com/files/yui/grids

His also works in more browsers.

Comment by Billy D — February 15, 2007

Nice one Mike. I think I now know why you take such offence at that particular personality description.

Comment by Jerome — February 15, 2007

Jerome, it’s called “being civil.”

But let’s not worry about it. Can I buy you a beer?

Comment by Michael Geary — February 15, 2007

…and a round for Dion and Christos. Alex and Billy too. Cheers!

Comment by Michael Geary — February 15, 2007

…and my apology to Dion for complaining in public instead of sending a private email.

Comment by Michael Geary — February 15, 2007

Ah, I am shamed, my karma has taken a bit of a hit. Sorry Mike, I sincerely salute your graciousness before crawling off into a small hole :)

Comment by Jerome — February 16, 2007

Think nothing of it, Jerome. I was rude to Dion. You called me on it. We’re all better off. And I still have a couple of bottles of Anderson Valley Hop Ottin IPA! See you in that hole…

Comment by Michael Geary — February 16, 2007

Great, used it for my website, thanks.

Comment by Kyle — July 27, 2007

__layouts is excelent. I’ve been using it for several months now, and it is very easy to work with: the names are intuitive and after you’ve built one grid, you know how to build them all.

I’ve worked with YUI Grids before , but moved to ___layouts because it requires a much cleaner markup while providing the same power & flexibility (well, I still haven’t found a layout scheme that you *can’t* build using ___layouts). Anyway, YUI Grids is also a good option for modular layouts – just not so easy, clean and intuitive. :)

Christos, great work. I really appreciate ___layouts. :)

Comment by rodrigo moraes — September 15, 2007

I like it, it is very easy to use. Thanks!

Comment by Michael — October 19, 2007

Leave a comment

You must be logged in to post a comment.