CSS Grid changes everything [video] • Hacker News Board

Re: CSS Grid changes everything [video]

#21

Post by vanderZwan » Fri, Feb 02, 2018, 6:08 PM UTC

munificent wrote: post #5

I giggle a little bit inside when web designers say "We shouldn't use meaningless tags that exist only for layout. We should use semantic ones, like and !". Except that, uh, "header" and "footer" themselves are layout terms. They're just a metaphor for a document as a body (" ") with the head at the top and the feet at the bottom. It's not like the contents of a tag have anything to do with feet. We call it "semantic…

I do not see how the etymology of these words being a layout-metaphor argues against them having more semantic value now? The way you describe a footer makes it sound like the last block of text of any article (being at the bottom) is by definition the footer. Which is of course not the case: it is used for certain types of content.

Your own book uses very heavily[0]. They are not just literally aside the regular flow of the document (actually, about that, see the next paragraph), the type of content in them is different - it is reserved for tangential stuff like jokes or deeper information that would interrupt the pacing of the main narrative.

Aside about asides in your book: I bought the epub version when it came out, and although it was a symbolic purchase (I had read the whole thing already as you wrote it), I somewhat regret the format choice due to the sorry state of epub readers. Not all of them even support the aside tag. The one that does (the Firefox Epubreader extension) does not keep a margin for the aside but inlines them. This really disrupts the flow of the text. In traditional book layouts that use the full margin for the text, these asides would be printed as a smaller footnote at the bottom of the page. Surely with the right bit of code one could generate such a layout, based on the semantic meaning of . But like I said: epub readers are in a pretty sorry state. Should have gotten the pdf instead[1].

[0] http://gameprogrammingpatterns.com/introduction.html

[1] http://gameprogrammingpatterns.com/sample.pdf

Re: CSS Grid changes everything [video]

#22

Post by ronnier » Fri, Feb 02, 2018, 6:19 PM UTC

Is there a good pollyfill for older browsers?

Re: CSS Grid changes everything [video]

#23

Post by gkilmain » Fri, Feb 02, 2018, 6:30 PM UTC

ronnier wrote: post #22

Is there a good pollyfill for older browsers?

The speaker suggests serving up mobile layout for older browsers and this is the pattern we are following at my company.

Re: CSS Grid changes everything [video]

#24

Post by kybradeck » Fri, Feb 02, 2018, 6:58 PM UTC

ravenstine wrote: post #16

pg_bot wrote: post #8

As someone who recently converted to using CSS grid for my company, I can't imagine going back. It really reduces the mental overhead when building complex layouts and has made my code shorter and easier to understand.

Who is the target audience of your company? The reason I ask is that I highly doubt I could use CSS grid at my company(news outlet) without breaking the site for many of the users.

The video mentions that CSS Grids are used in the production site for the NYTimes. See https://open.nytimes.com/bootstrap-to-css-grid-87b3f5f830e4.

Re: CSS Grid changes everything [video]

#25

Post by eyesee » Fri, Feb 02, 2018, 6:59 PM UTC

gmiller123456 wrote: post #20

I wonder if I'm alone in the opinion that whatever method is used to create a complex layout, the method needs to be Turing Complete. I can understand the appeal of being able to create some tags and not having to worry about what happens after that, but you really only end up with a good design if you're just trying to do something simple. We often see people so devoted to the idea of CSS they end up with something…

I disagree. It is possible to generate a wide variety of layouts using this and other purely declarative approaches. If producing a layout requires the use of "Turing-complete" semantics, then JavaScript is available for the purpose. I would argue if your layout becomes that complex you might consider simplifying.

There is a long-standing trend of adding scripting into declarative environments to allow greater capability. More often than not this becomes yet another avenue for exploitation by bad actors. As an industry we should learn from our mistakes and resist the use of executable code into static documents.

Re: CSS Grid changes everything [video]

#26

Post by codemati » Fri, Feb 02, 2018, 6:59 PM UTC

yawgmoth wrote: post #13

Dangeranger wrote: post #3

Jen Simmons and Rachel Andrew have done really great work on making CSS Grid sensible to comprehend. I cannot recommend their resources enough. - http://labs.jensimmons.com/ - https://gridbyexample.com/

I personally benefited from http://cssgridgarden.com/

Just went through this - intuitive and helpful. I'll also add http://flexboxfroggy.com/

Re: CSS Grid changes everything [video]

#27

Post by pg_bot » Fri, Feb 02, 2018, 7:00 PM UTC

ravenstine wrote: post #16

pg_bot wrote: post #8

As someone who recently converted to using CSS grid for my company, I can't imagine going back. It really reduces the mental overhead when building complex layouts and has made my code shorter and easier to understand.

Who is the target audience of your company? The reason I ask is that I highly doubt I could use CSS grid at my company(news outlet) without breaking the site for many of the users.

Medical practice management software. (we run the medical practices as well) If we made software that was accessible to the general public I would hesitate to only use CSS grid.

Re: CSS Grid changes everything [video]

#28

Post by joshfarrant » Fri, Feb 02, 2018, 7:06 PM UTC

ruairidhwm wrote: post #7

The Wes Bos course on CSS Grid is free and excellent. Check it out: https://cssgrid.io/

Was going to say the same thing. It's a great resource for getting to grips with Grid.

Re: CSS Grid changes everything [video]

#29

Post by tmalsburg2 » Fri, Feb 02, 2018, 7:07 PM UTC

gmiller123456 wrote: post #20

I wonder if I'm alone in the opinion that whatever method is used to create a complex layout, the method needs to be Turing Complete. I can understand the appeal of being able to create some tags and not having to worry about what happens after that, but you really only end up with a good design if you're just trying to do something simple. We often see people so devoted to the idea of CSS they end up with something…

It's "Turing complete", named after the mathematician and computer scientist Alan Turing.

https://en.wikipedia.org/wiki/Alan_Turing

Re: CSS Grid changes everything [video]

#30

Post by shripadk » Fri, Feb 02, 2018, 7:11 PM UTC

munificent wrote: post #5

I giggle a little bit inside when web designers say "We shouldn't use meaningless tags that exist only for layout. We should use semantic ones, like and !". Except that, uh, "header" and "footer" themselves are layout terms. They're just a metaphor for a document as a body (" ") with the head at the top and the feet at the bottom. It's not like the contents of a tag have anything to do with feet. We call it "semantic…

Semantic tags are required from an accessibility point of view. If not, there wouldn't even be a need for a tag. Might as well just use with display:table. Actually you could just about use for everything! But by doing so, you are alienating those who use screen readers to browse your site.