(2015)
Learn CSS layout the pedantic way (2015)
41–50 of 106 posts
Re: Learn CSS layout the pedantic way (2015)
#42The first thing that should be explained about CSS layout, is that it has 4 different layout systems: - table, the oldest one, still used for email - float, for articles with inline images - flexbox, most used one today - grid, modern alternative to table There is also absolute and fixed positioning as a hack to bypass layout.
The first 2 are ersatz "layout systems" that were practiced before flexbox and grid. s and the float property can be used alongside Grid.
The easiest (and default) layout system (flow) is never mentioned
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
Re: Learn CSS layout the pedantic way (2015)
#43Earlier quoted context omitted.
I feel like this type of thinking is why 99% of people don't understands css though, when you are just building things you make up rules that don't exist and ignore the ones that do. And its not as straight forward as programming languages are so its very hard to tell when something is "wrong".
Yeah, maybe my suggestion could've been better stated. I'm not suggesting that you can ignore documentation and other forms of writing that explore paradigms and methodologies. I meant there's only so much you can read before actually writing CSS and practicing making layouts becomes a necessary part of learning CSS in depth. And, to play devil's advocate a little: You can't make up a rule that doesn't exist. Either…
> You can't make up a rule that doesn't exist. Either your CSS will work or it won't. And if it works it's not wrong.
So much this. Over the course of years, I've gone from writing my CV in Word, TeX, and (finally) straight HTML. Word processors are fairly straightforward -- and yet -- for more complex layouts you will eventually encounter internal sizing constraints that require messing with the global template.
This reality - combined with the fact that MS Office is a gigantic monster which is barely tolerable on macOS, led me to TeX. Plaintext -- more or less -- and good support for integrating with version control systems made it an easy choice.
Fast forward a few years and I'm all HTML + a handful of CSS rules w/ @print at this point. Cryptic error messages and the care and feeding of a BasicTex install just became too much work to bother with. At least in HTML, save for a showstopping error, your document will render something and the errors are usually pretty obvious.
Not so much in TeX...
Modern layout also meant I could ditch floats for nearly everything - flexbox will create reasonable page headers with much less gnashing of teeth.
Re: Learn CSS layout the pedantic way (2015)
#44(not affiliated, just a happy user)
It's paid, but if you want to deeply learn CSS interactively, I can't recommend this course enough:
Not just the best CSS resource I've encountered, but one of the best examples of interactive pedagogy period I've encountered.
The author also has lots of free resources if you want to get a flavor of the style:
Re: Learn CSS layout the pedantic way (2015)
#45(not affiliated, just a happy user) It's paid, but if you want to deeply learn CSS interactively, I can't recommend this course enough: https://css-for-js.dev/ Not just the best CSS resource I've encountered, but one of the best examples of interactive pedagogy period I've encountered. The author also has lots of free resources if you want to get a flavor of the style: https://www.joshwcomeau.com/tutorials/css/
Wish it went on sale more often
Re: Learn CSS layout the pedantic way (2015)
#46> Floats can be used to position boxes to the left and right edges of their container box No, that's not exactly what float means! Yes you can accomplish this using floats, but we haven't since flexbox and grid landed. The element is taken out of the normal flow, and this is a confusing way to build layouts for those studying CSS. `float` is more of a typographic tool. If this article calls itself pedantic, it needs…
Any introduction to HTML/CSS really should explain the fact that when these technologies were created, they were solely meant to render documents online. It was basically created to be like a Microsoft Word but for files on another person's computer. So most of the early properties (like float) were for typographic layout.
Re: Learn CSS layout the pedantic way (2015)
#47The first thing that should be explained about CSS layout, is that it has 4 different layout systems: - table, the oldest one, still used for email - float, for articles with inline images - flexbox, most used one today - grid, modern alternative to table There is also absolute and fixed positioning as a hack to bypass layout.
> There is also absolute and fixed positioning as a hack to bypass layout.
They're not hacks, and they don't "bypass" layout. `absolute` and `fixed` are two of five options for positioning that dictate how an element is placed and behaves in the flow of the document, or within a specific container. https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
Re: Learn CSS layout the pedantic way (2015)
#48Kind of unrelated but if you want to build nice modern layouts and if you are one the 10 people in the planet that doesn't use Tailwind take a look at sub grids. It's really underrated given how well supported and nice to work with it is.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
Re: Learn CSS layout the pedantic way (2015)
#49Earlier quoted context omitted.
Yeah they removed it sometime ago https://firefox-source-docs.mozilla.org/devtools-user/3d_vie...
This is cool! I understand why they removed it, but is there a browser extension that retains this functionality on modern versions of FF?
I've heard Edge of all browsers has this now.
Disclaimer: I haven't looked myself.
Re: Learn CSS layout the pedantic way (2015)
#50I develop a lot UI apps (mostly Angular) and these days I just use a framework like Bootstrap or Foundation. The myriad of layout options in pure CSS is overwhelming and mind boggling, especially when it comes to responsive design. I have tried using pure CSS but find myself writing lots of boilerplate code and coming up with amounts to a mini framework. Unless you’re designing a custom bespoke designer web site, I don’t personally see the need for constantly reinventing the wheel.