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

Show HN: Blunt – A CSS Layout Framework for Minimalists

github.com

Post reply on HN
Print view View original

71–76 of 76 posts

Re: Show HN: Blunt – A CSS Layout Framework for Minimalists

#71

Post by EnigmaCurry »

quickthrower2 wrote: post #56
leephillips wrote: post #26

I’m sure this library of classes will be useful for somebody. But the stylesheet weighs in at half a megabyte.

First thought: WTF! I had to take a look. It's a case of combinatorial explosion, e.g. there is a style for every integer up to some max I didn't care to find out, for the height: .pxh-558 { height: 558px; } So it's 500kb of unrolled syntax sugar.

Use purgecss - https://purgecss.com/, its the same strategy employed by tailwindcss. It will filter out all the classes you don't actually use. Tailwind is over 2MB before its purged, and only a few KB afterward.

Re: Show HN: Blunt – A CSS Layout Framework for Minimalists

#72

Post by EnigmaCurry »

leephillips wrote: post #70
quickthrower2 wrote: post #56

Earlier quoted context omitted.

First thought: WTF! I had to take a look. It's a case of combinatorial explosion, e.g. there is a style for every integer up to some max I didn't care to find out, for the height: .pxh-558 { height: 558px; } So it's 500kb of unrolled syntax sugar.

Yes. I assume he generated the stylesheet programmatically. I guess the intelligent way to use this would be to write some code that detects which classes are actually being used and only include those in a smaller stylesheet.

https://purgecss.com/

Re: Show HN: Blunt – A CSS Layout Framework for Minimalists

#73

Post by leephillips »

EnigmaCurry wrote: post #72
leephillips wrote: post #70

Earlier quoted context omitted.

Yes. I assume he generated the stylesheet programmatically. I guess the intelligent way to use this would be to write some code that detects which classes are actually being used and only include those in a smaller stylesheet.

https://purgecss.com/

Thanks. I assumed someone somewhere had solved this problem.

Re: Show HN: Blunt – A CSS Layout Framework for Minimalists

#74

Post by chrisweekly »

zdragnar wrote: post #39
chrisweekly wrote: post #6

Earlier quoted context omitted.

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.

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

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.

Re: Show HN: Blunt – A CSS Layout Framework for Minimalists

#75

Post by quickthrower2 »

leephillips wrote: post #73
EnigmaCurry wrote: post #72

Earlier quoted context omitted.

https://purgecss.com/

Thanks. I assumed someone somewhere had solved this problem.

This all feels weird to me. Sort of like anti-compiling! But I guess it works.

I do like to avoid JS toolchains if I can though. Even though I am a webpack aficionado. But if you are going to have a css class for every possible style you might want to use, there is probably no other way.

Re: Show HN: Blunt – A CSS Layout Framework for Minimalists

#76

Post by leephillips »

quickthrower2 wrote: post #75
leephillips wrote: post #73

Earlier quoted context omitted.

Thanks. I assumed someone somewhere had solved this problem.

This all feels weird to me. Sort of like anti-compiling! But I guess it works. I do like to avoid JS toolchains if I can though. Even though I am a webpack aficionado. But if you are going to have a css class for every possible style you might want to use, there is probably no other way.

I was thinking that this should go in reverse: since the class names follow a pattern, you should just be able to make up classes to do what you want, and code should generate the CSS file based on his pattern. That would be offline, and could be in any language
Post reply on HN