Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Learn CSS layout the pedantic way (2015)

book.mixu.net

Post reply on HN
Print view View original

51–60 of 106 posts

Re: Learn CSS layout the pedantic way (2015)

#51

Post by yojo »

danielvaughn wrote: post #46
cantSpellSober wrote: post #19

> 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.

It is, after all, HyperText Markup Language. The modern app-based web is incredibly far out of scope of the initial vision of “text documents that link to other text documents.”

CSS and HTML are loaded with legacy warts that can never be removed without breaking backward compatibility.

Re: Learn CSS layout the pedantic way (2015)

#52

Post by moi2388 »

shubhamjain wrote: post #27

I find articles like this daunting, even when it predates CSS Grid which has made CSS Layouting even more complex. I have been a web developer for 10 years, and I still feel out of depth about CSS. How it all works, obscure edge cases, internals, and the sheer number of features in there. I wrote about it recently [1] > I hadn’t even completely caught up with the intricacies of Grid Layouting, when subgrid and contai…

Same. I just start using grids everywhere and that works.

But then again I just write plain css and generally don’t have global stylesheets, which helps a lot

Re: Learn CSS layout the pedantic way (2015)

#53

Post by rzmmm »

temporallobe wrote: post #50

I 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 d…

Newer CSS features like flexbox, grid and media queries were added to reduce the need for frameworks like bootstrap.

Re: Learn CSS layout the pedantic way (2015)

#54

Post by chiefalchemist »

rzmmm wrote: post #53
temporallobe wrote: post #50

I 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 d…

Newer CSS features like flexbox, grid and media queries were added to reduce the need for frameworks like bootstrap.

Yes and no. The key selling point of Bootstrap (and similar) was that a design-blind (so to speak) backend dev/eng could use it and would have to work very hard to "design" something that was ugly, hard to look at, hard to use, etc.

Sure there are a bunch of helper classes, and such, but the key is an end product that does look like a backend dev/eng built it.

Re: Learn CSS layout the pedantic way (2015)

#55

Post by chatmasta »

cantSpellSober wrote: post #42
sesm wrote: post #25

The 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...

That's a useful MDN page, and it's even the third page of the "CSS Layout" section of "Learn Web Development."

And yet, how many people reading these comments have ever seen that page? I'll admit that I hadn't seen it!

Sometimes it's nice to read the docs of your tools from the top down, rather than relying on whatever local section of documentation Google sends you when you're solving a specific problem. There are a lot of great docs! (If you use Git every day, when was the last time you browsed the Git manual? How about JavaScript? CSS?)

Re: Learn CSS layout the pedantic way (2015)

#56

Post by [deleted] »

jonahx wrote: post #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: 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/

[deleted]

Re: Learn CSS layout the pedantic way (2015)

#57

Post by [deleted] »

msoad wrote: post #48

Kind 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...

[deleted]

Re: Learn CSS layout the pedantic way (2015)

#58

Post by Julesman »

msoad wrote: post #48

Kind 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...

To me, CSS frameworks break the whole point of CSS, generally add a lot of bloat, and aren't useful except in some instances where rapid prototyping is needed.

Tailwind exists largely because programmers don't like CSS. We no longer need frameworks for compatibility. The era of browser testing is over. And we don't need them to do things CSS can't do, as in the past couple of years nearly all browsers are handling the newer features.

My big gripe is simply that it makes a lot of sense to keep your structure, styles, and scripts separated. If something looks off I don't want to have to wonder whether it's classes, CSS, or scripts.

And ultimately, I don't think Tailwind does make things faster. I could come up with custom CSS helper classes AS NEEDED, and avoid all the problems I mentioned above. And the one I didn't mention is that this makes your code look like incomprehensible garbage. Tailwind HTML files using BEM are just not OK.

Keeping my html and CSS separate make everything I do faster and lighter. Most importantly, CSS is now mature and finally does all the things for all the browser that make the frameworks just enough less useful that they become bloat.

My two cents. I'm sure Tailwind is helpful for many. But I gotta preach the basics.

Re: Learn CSS layout the pedantic way (2015)

#59

Post by velcrovan »

cantSpellSober wrote: post #19

> 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…

I'm not sure how I’d position, say, sidenotes/marginal notes without using floats. Particularly when the note must align with a reference in the middle of a paragraph.

Re: Learn CSS layout the pedantic way (2015)

#60

Post by stevenicr »

msoad wrote: post #48

Kind 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...

Appreciate the suggestion, got to the 7th paragraph and re-read it- and started to question why learning from the mdn docs is not as easy as w3schools (I know much of hn has hate for that, and for some legit reasons but that's not the point) -

While thinking about actually understanding how this works and why it's good or not good compared to other non-sub-grid things, I decided to see if youtube kevin css guy had done an explainer, found https://www.youtube.com/@KevinPowell/search?query=sub-grid

So I will be diving into those.

Started a new website project just writing css / html last week, so I'm one of the 10.. I've done a couple projects with tailwind, it's fine, but it's not perfect.. I can see why/how it's kind of the new bootstrap for people who don't want to learn css.. If I had to use a pre-canned thing today it would be Bulma or Skeleton maybe.. I was poking about the search engines a couple weeks ago to look for any new 'lightest weight css frameworks' / minimal resets..

The search engine results for these are meh for me, it's like finding a bunch of recipe sites.

A nice grid chart showing the names, dates and mb/kb and pageload / time to interaction delay / JS required or not for base things - would be nice, but rather than wasting too much time searching I just started building from scratch with no package needed, just html and grid css.

Seems to me that more / better css grid template examples would be nice, maybe they exist but my ggl / ddg just keeps finding that same old stuff that is meh.

Post reply on HN