4 ms·

CSS3 Template Layout

10 points by qhoxie 18y ago

iamdave 18y ago
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.
- scott_s 18y ago
  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/latex/latex2e-html/ltx-68.html 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.
trickjarrett 18y ago
I am not a fan.
- bprater 18y ago
  I don't believe in monkeys? At least take the time to elaborate. That's a reddit response, not a y!hacker one.
  - trickjarrett 18y ago
    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.
geuis 18y ago
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?
- ii 18y ago
  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>
  - JoelSutherland 18y ago
    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?
    - ii 18y ago
      I guess #logo {position: a; margin-top: 5px} It's only a draft. Everything may change. Read http://www.w3.org/TR/css3-layout/ http://www.w3.org/TR/css3-layout/

10 points by qhoxie 18y ago

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.

scott_s 18y ago
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/latex/latex2e-html/ltx-68.html 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.

trickjarrett 18y ago

I am not a fan.

bprater 18y ago
I don't believe in monkeys? At least take the time to elaborate. That's a reddit response, not a y!hacker one.
- trickjarrett 18y ago
  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.

geuis 18y ago

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?

ii 18y ago
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>
- JoelSutherland 18y ago
  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?
  - ii 18y ago
    I guess #logo {position: a; margin-top: 5px} It's only a draft. Everything may change. Read http://www.w3.org/TR/css3-layout/ http://www.w3.org/TR/css3-layout/