4 ms·

I laugh every time I see the culmination of CSS has resulted in grid based layout. You mean, like tables?

RobertRoberts 9y ago
Yes, but grid/css is _designed_ for layout. Tables was a bastardization of markup designed for data display. (ie, a table of data, like in a spreadsheet) Unless you have truly dug into how awesome grid is, you can't really understand what it's done for the future of web design. I will look up a short tutorial I ran into that really showed me the power/value of grid. (fyi, I use CSS daily in my work) Edit: Here's one example. You could use tables, but this is incredibly flexible and with media queries you can completely manipulate the layout and position of the design based on the screen size. And the markup is incredibly light, it's fabulous for those of us who want more control and less work to do, _and_ less debugging of browser quirks. https://bitsofco.de/github-contribution-graph-css-grid/ https://bitsofco.de/github-contribution-graph-css-grid/
- taeric 9y ago
  Of course, the argument can also take it that HTML was designed to markup textual documents. Such that getting HTML to do what an SVG could easily have accomplished is a touch excessive. :) I suspect there is a middle ground here. But I can't shake the feeling that as soon as you had to add all of the elements of the chart with javascript, the options were already high that you could have used another method just as easily. As an example, this would not have been difficult with absolute positioning. See a crummy Rubik's cube I built using absolute positioning in [1]. I could have generated more of the styles using a loop construct in a programming language, so there is room for help, but we already had javascript for that. [1] http://taeric.github.io/cube-permutations-1.html http://taeric.github.io/cube-permutations-1.html
  - RobertRoberts 9y ago
    That's a neat example there. But with the grid example, it was more a technology demonstration to show the power of a css tool so new most people don't even know what it's capable of. (at least I didn't fully know) So it inspires me to study more into grid. I avoid hacks like the plague, and it's saved me tons of effort, time and money, and even emotional stress. Grid is not a hack, but a full fledged solution to layout. It's how it should have been done to begin with, if we could have condensed 20 years of global css/html experience into an instant. :P HTML is just a markup language, not a display language. Even an H1 element has styles set by the browser, without that, it wouldn't look any different than an H2.
pjmlp 9y ago
And the inspiration was the grid model of WPF, initially available on IE, a native apps feature.

Yes, but grid/css is _designed_ for layout. Tables was a bastardization of markup designed for data display. (ie, a table of data, like in a spreadsheet) Unless you have truly dug into how awesome grid is, you can't really understand what it's done for the future of web design. I will look up a short tutorial I ran into that really showed me the power/value of grid. (fyi, I use CSS daily in my work) Edit: Here's one example. You could use tables, but this is incredibly flexible and with media queries you can completely manipulate the layout and position of the design based on the screen size. And the markup is incredibly light, it's fabulous for those of us who want more control and less work to do, _and_ less debugging of browser quirks. https://bitsofco.de/github-contribution-graph-css-grid/ https://bitsofco.de/github-contribution-graph-css-grid/

taeric 9y ago
Of course, the argument can also take it that HTML was designed to markup textual documents. Such that getting HTML to do what an SVG could easily have accomplished is a touch excessive. :) I suspect there is a middle ground here. But I can't shake the feeling that as soon as you had to add all of the elements of the chart with javascript, the options were already high that you could have used another method just as easily. As an example, this would not have been difficult with absolute positioning. See a crummy Rubik's cube I built using absolute positioning in [1]. I could have generated more of the styles using a loop construct in a programming language, so there is room for help, but we already had javascript for that. [1] http://taeric.github.io/cube-permutations-1.html http://taeric.github.io/cube-permutations-1.html
- RobertRoberts 9y ago
  That's a neat example there. But with the grid example, it was more a technology demonstration to show the power of a css tool so new most people don't even know what it's capable of. (at least I didn't fully know) So it inspires me to study more into grid. I avoid hacks like the plague, and it's saved me tons of effort, time and money, and even emotional stress. Grid is not a hack, but a full fledged solution to layout. It's how it should have been done to begin with, if we could have condensed 20 years of global css/html experience into an instant. :P HTML is just a markup language, not a display language. Even an H1 element has styles set by the browser, without that, it wouldn't look any different than an H2.

pjmlp 9y ago

And the inspiration was the grid model of WPF, initially available on IE, a native apps feature.