looks like you've already got example code, you should probably make a very basic github pages example site for this as well.
Show HN: Blunt – A CSS Layout Framework for Minimalists
21–30 of 76 posts
Re: Show HN: Blunt – A CSS Layout Framework for Minimalists
#22Personally I prefer to write the CSS (well Sass really). I've mainly used Bootstrap in the past.
I've moved on though, I learned flexbox and css grid and some atomic design principals as well as ABEM (https://css-tricks.com/abem-useful-adaptation-bem/) and I'm happy.
Re: Show HN: Blunt – A CSS Layout Framework for Minimalists
#23Earlier quoted context omitted.
Tailwind has a class for almost everything, which makes it quite heavy: 1600kb minified. In my experience you end up with ≤ 15kb of minified CSS after running PurgeCSS anyway, so this is not an issue. Personally I prefer Tailwind because you practically don't have to write any CSS. With something like Blunt expect finding many edge cases where you will have to write custom CSS. I do write custom classes that wrap Tai…
> ... Tailwind because you practically don't have to write any CSS. Only until you want to apply a hover style change on a child element (ie: make that svg icon change color when you hover on the a tag that wraps it) and you discover that you need to write that css yourself.
group-hover was made specifically for this use case: https://tailwindcss.com/docs/pseudo-class-variants/#group-ho...
Re: Show HN: Blunt – A CSS Layout Framework for Minimalists
#24Sorry if I sound snarky, but why use this if you can just write: Center It looks like these are just single rule classes. In my opinion, If you are going to write one class for each style rule, you might as well use the style property.
On top of the strangeness of collapsing distinction between loading up markup with single-use classes and single-use style rules.... in the era of CSS mixins, it seems like it'd be easier than ever to come up with one or two class names that encapsulate the key document semantics (either semantics for presentational abstractions, or data semantics), and then if you really need a quiver full of fine-grained presentation-detail bundles, mix them in.
But instead it's really common to do what you've pointed out: something that's effectively inline styles in spirit.
The benefits of the semantic approach in terms of flexibility and abstraction seems really high. The only downside I can see is a bit of one common complaint about OOP, "everything happens somewhere else," requiring a context switch to figure out how markup is being told to present. But that seems like a problem better dealt with via tooling.
Re: Show HN: Blunt – A CSS Layout Framework for Minimalists
#25Personally I prefer to write the CSS (well Sass really). I've mainly used Bootstrap in the past. I've moved on though, I learned flexbox and css grid and some atomic design principals as well as ABEM ( https://css-tricks.com/abem-useful-adaptation-bem/ ) and I'm happy.
Thanks for the link. ABEM makes a lot of sense the way it's presented.
Out of interest, that article goes out of its way to argue that the whole BEM format is changed to CamelCase, so that the atomic modifier can use "-".
Why wouldn't you just use the existing BEM component separator "__", and then nothing else need change.
The CamelCase version is prettier granted, but rather than an extra bit of information, it's a completely new format.
Re: Show HN: Blunt – A CSS Layout Framework for Minimalists
#26I’m sure this library of classes will be useful for somebody. But the stylesheet weighs in at half a megabyte.
Re: Show HN: Blunt – A CSS Layout Framework for Minimalists
#27I 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.…
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.
This is a promo for a service. You have to pay to see the other content.
Re: Show HN: Blunt – A CSS Layout Framework for Minimalists
#28Earlier 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.
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.
Re: Show HN: Blunt – A CSS Layout Framework for Minimalists
#29Sounds like using a subset of tailwind classes, focusing on positioning. This is what I’m doing on a nuxt project. I also use Sass for the visuals within each component.
That said I never found utility classes enough to handle breakpoints, it’s hard to read and understand when using only classes in the html. There is no space anywhere to document what the breakpoints achieve.
As usual, using multiple approaches is the best way to solve a problem rather than stubbornly sticking to some ideal like doing everything in tailwind, or using BEM naming religiously.
Also BEM syntax sucks. It’s really long and unsightly. SuitCSS is much nicer, plus it has a linter.
Re: Show HN: Blunt – A CSS Layout Framework for Minimalists
#30Personally I prefer to write the CSS (well Sass really). I've mainly used Bootstrap in the past. I've moved on though, I learned flexbox and css grid and some atomic design principals as well as ABEM ( https://css-tricks.com/abem-useful-adaptation-bem/ ) and I'm happy.
I find https://rscss.io/ to be a really nice design philosophy that takes the best parts from BEM.
And agreed: it's easiest to just work directly with flexbox (and grid if you can drop IE11), and a set of design principles is really valuable to avoid spaghetti.