Hacker News Reader

Comment by freedomben | Hacker News Reader

I did tons of web pre-CSS days (all my layouts were tables :-D) and have (clearly) been out of the scene for a long time other than the occasional CSS hacking when there wasn't enough backend/infrastructure work to fill the sprint.

I understand the theory behind CSS, but suck at the practice (for now). I've figured out how to do simple layout with divs, but I still suck at making it responsive to screen size changes.

Is something like Blunt for me? Or should I invest in something heavier like Bootstrap? I don't want my page to look like "just another bootstrap page" but I also won't be able to make it look good unless I have training wheels on. I revere the "Arch way" but recognize it won't always yield the best fruit if the farmer doesn't know what they are doing. I tend to value elegance/simplicity over speed.

View on HN

Unlearning is harder than learning; highest possible recommendation to start here: https://every-layout.dev and get it right. You'll leapfrog 98% of FE "specialists" and 99.999% of "full-stack" devs.

wow, that resource looks really fantastic.

also want to add: a good CSS thing to learn right now is the CSS grid. you can hammer out the blocking layout of your pages so quickly with a grid.

https://css-tricks.com/snippets/css/complete-guide-grid/

I have some misgivings about css grid (vs doing everything w flexbox), in part bc it encourages designing to a (particular) grid configuration, whereas my responsive ideal is to build up from content first, w the design following somewhat organically from it, and the layout remaining as fluid as possible, according to the viewing context in which it's rendered.

This relates to similar thoughts about breakpoints being a sometimes-helpful crutch of sorts, vs their typical adoption as a "standard" set of predefined viewport dimensions designers should target. Because it ignores users who config their browsers to use larger fonts (a larger demographic than all IE users).

/$.02

This is a great resource, thank you for sharing!

Thank you! That looks like a fantastic resource, and exactly what I need.

This is a promo for a service. You have to pay to see the other content.

I'm not affiliated in any way. I found the free content on every-layout.dev to be extraordinarily helpful and useful. I was glad to pay for the "book" with the non-free portions of their work. YMMV.

That does look nice, though the price is pretty off putting. Maybe there'll be more content, maybe there won't be... I wish I was in a position to be able to support projects I wish to see come to fruition at that level, but personally I am not, especially for how little css I write.

I do hope it has or gets enough support to keep adding content though, as the level of quality is definitely a step above most free tutorials.

If I did have a complaint, it would be that i am unconvinced that using custom elements for layout is a great idea. It might work really well for apps, but isn't what I would think of as terribly semantic.

I can vouch for the paid content (and I paid the pre-pandemic price).

As for the implementation, it's possible to apply the axiomatic styles to standard HTML (directly, or via React, Vue etc). The examples happen to use web components (custom elements) bc of author preference, I think. I prefer React bc it has a better SSR story and doesn't require JS to be enabled.

As for semantic markup per se (a tangent, given my explanation above), your a11y efforts are waay better spent elsewhere.

from a quick look, Blunt is mostly a (big) bunch of helpers for commonly used stuff like "lay the children out horizontally". i'm not sure if it'll be helpful if you're not very familiar with CSS – it seems to be aimed towards people who know what to write, but just don't feel like typing "margin-left: auto; margin-right: auto;" a zillionth time :)

if you're not interested in designing your whole site's look & feel from the ground up, sth like Bootstrap or some minimal theme (bunch of those on HN recently) would probably be better. using a simple theme as a starting point and tweaking it to your liking might be the way to go

http://flexboxgrid.com/

Is pretty good - similar to at least one version of bootstrap's grid, but just does the layout

Reply on news.ycombinator.com