CSS3 Template Layout | Hacker News Reader

CSS3 Template Layout

ejohn.org

10 pointsqhoxie9 comments

I'm sure it'll change if I actually use it, but for now, this type of syntax seems to be pointlessly obfuscating what's otherwise a simple markup scheme for creating layouts.

The author claims what he presented would be difficult with current CCS. Do you disagree? Is there a clearer way to define the layout?

This technique seems similar in spirit to how Latex defines tabular environments: http://www-h.eng.cam.ac.uk/help/tpl/textprocessing/teTeX/lat...

Disclosure: I'm not a web developer and have only done simple layouts with CSS.

I'm obviously missing something, but from studying the ascii diagram I don't see what the problem is? 3 columns with defined heights, widths, and margins. What's the thing I'm missing?

It's not a "ascii diagram", it's a new syntax for CC3 display property.

Complete example:

  <style type="text/css">
    body {
      height: 100%;
      display: "a   .   b   .   c"  /2em
               ".   .   .   .   ."  /1em
               "d   .   e   .   f"
               ".   .   .   .   ."  /1em
               "g   .   h   .   i"  /2em
               5em 1em  *  1em 10em}
    #logo {position: a}
    #motto {position: b}
    #date {position: c}
    #main {position: e}
    #adv {position: f}
    #copy {position: g}
    #about {position: h}
  </style>

So the position attribute is being used for this?

What if I wanted to associate #logo with 'a' but wanted to offset it some. Logically I would want to do something like:

#logo { location: a; position: relative; top: 5px; }

What would the proposed way of accomplishing this be?

I guess #logo {position: a; margin-top: 5px}

It's only a draft. Everything may change.

Read http://www.w3.org/TR/css3-layout/

I am not a fan.

I don't believe in monkeys? At least take the time to elaborate. That's a reddit response, not a y!hacker one.

CSS2 has it's share of problems, but is the problem in the language or in the numerous interpreters / browsers out there?

What is the purpose of this change?

Cross browser Cooperation in layout: This solution is meant to make it more standard across browsers, but it's a complete reworking of the system and it still won't guarantee cross browser functionality.

For the developer/designer: Really? I think the designers already have a pretty clear idea of how to develop with CSS. Look at the various CSS frameworks out there for column based design, that's what I think it should be based off of.

I'm not a fan.

Reply on news.ycombinator.com