Wednesday, February 14th, 2007
___layouts: simple layout builder
<p>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.sectionwill 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.
Related Content:
3.9 rating from 22 votes
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
Hmm. Maybe you should edit the part about the designers it works with .. :) Otherwise interresting article.
Hmm… Anal designer…
I understand that Chris, my arch-nemesis, takes it up the ying-yang
Simple to use, understandable and neat :)
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…
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.
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
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 :)
@Christos: the download link in the demo is broken! :o)
Thanks Alex,
I’ve fixed that now. :)
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?
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.
Nice one Mike. I think I now know why you take such offence at that particular personality description.
Jerome, it’s called “being civil.”
But let’s not worry about it. Can I buy you a beer?
…and a round for Dion and Christos. Alex and Billy too. Cheers!
…and my apology to Dion for complaining in public instead of sending a private email.
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 :)
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…
Great, used it for my website, thanks.
__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. :)
I like it, it is very easy to use. Thanks!