5 ms·

Am I the only one who clicked the link expecting to see the Tetris in pure CSS? AskHN: is there a good online resource that actually explains the layout mechan

by kika 13y ago

Am I the only one who clicked the link expecting to see the Tetris in pure CSS? AskHN: is there a good online resource that actually explains the layout mechanics of the modern browser? Not a comprehensive CSS reference (there're lots of them) but fundamental principles? lmgtfy's welcome.

chadwickthebold 13y ago
Is something like (https://developer.mozilla.org/en-US/docs/Introduction_to_Layout_in_Mozilla https://developer.mozilla.org/en-US/docs/Introduction_to_Lay...) what you were looking for? Or Were you looking more for how the browser reads CSS and sticks that into a formatting context? For the latter, I would suggest visiting https://developer.mozilla.org/en-US/docs/Web/CSS https://developer.mozilla.org/en-US/docs/Web/CSS and poking around the key concepts a bit
sriharis 13y ago
Here you go: http://learnlayout.com/ http://learnlayout.com/
xerophtye 13y ago
So did i. You are not alone. Heck even OP knows people would come for that. But still, pretty cool post. My CSS-writing colleague asked me this the other day, wrote the mathematical part of the code for him. though i used the n%3 == 1 method. Though know that i think of it, i think he ended up using JS for this :/
jasallen 13y ago
Not sure if it's what you had in mind, but I found both his advanced and basic tutorials to be really good (different audiences though, there is no "medium" tutorial to bridge it :-) ) http://learn.shayhowe.com/advanced-html-css/ http://learn.shayhowe.com/advanced-html-css/
Semaphor 13y ago
I expected it, which is why it took me a while to actually click it. To quote the author > Did you think I was actually going to recreate Tetris in CSS? Sorry, no. Nobody needs to do that. I mean that stuff is usually pretty awesome, but we've had more than enough playful experiements and this was far more valuable and the title is imo a disservice to this.

by kika 13y ago

chadwickthebold 13y ago

Is something like (https://developer.mozilla.org/en-US/docs/Introduction_to_Layout_in_Mozilla https://developer.mozilla.org/en-US/docs/Introduction_to_Lay...) what you were looking for? Or Were you looking more for how the browser reads CSS and sticks that into a formatting context? For the latter, I would suggest visiting https://developer.mozilla.org/en-US/docs/Web/CSS https://developer.mozilla.org/en-US/docs/Web/CSS and poking around the key concepts a bit

sriharis 13y ago

Here you go: http://learnlayout.com/ http://learnlayout.com/

xerophtye 13y ago

So did i. You are not alone. Heck even OP knows people would come for that. But still, pretty cool post. My CSS-writing colleague asked me this the other day, wrote the mathematical part of the code for him. though i used the n%3 == 1 method. Though know that i think of it, i think he ended up using JS for this :/

jasallen 13y ago

Not sure if it's what you had in mind, but I found both his advanced and basic tutorials to be really good (different audiences though, there is no "medium" tutorial to bridge it :-) ) http://learn.shayhowe.com/advanced-html-css/ http://learn.shayhowe.com/advanced-html-css/

Semaphor 13y ago

I expected it, which is why it took me a while to actually click it. To quote the author > Did you think I was actually going to recreate Tetris in CSS? Sorry, no. Nobody needs to do that. I mean that stuff is usually pretty awesome, but we've had more than enough playful experiements and this was far more valuable and the title is imo a disservice to this.