
Show HN: Blunt – A CSS Layout Framework for Minimalists - max0563
https://github.com/f-prime/Blunt
======
jakearmitage
Simple responsive card:

    
    
        <div class="container auto-center h-100 row v-center h-center">
          <div class="card lg-w-30 md-w-40 sm-w-90 pt-2 pb-2 pl-2 pr-2">
            <div class="sm-col md-row lg-row md-v-center lg-v-center">

~~~
seumars
i-lv-it, rlly cncise nd easy-t-ndrstnd.

~~~
quickthrower2
But not very semantic, but that's probably OK if you are hacking on a small
site.

------
1ba9115454
Personally 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/](https://css-tricks.com/abem-useful-adaptation-bem/)) and I'm happy.

~~~
notJim
I don't mind hand-writing CSS for a small project, but I feel like once you've
got a decent team, it ends up being duplicative and wasting a lot of time. How
many times do you really need to style button/link and write out your 8px
margins (or is it 6?) Sass solves this too, but simply applying classes is
even easier and faster for me at least. I thought BEM was horrible when I
first saw it, but once I used it, the productivity just feels like magic.

~~~
runarberg
> How many times do you really need to style button/link and write out your
> 8px margins.

Either 0 or 1 times. Use semantic classes `<a href="/path/to/create-stuff"
class="button">` and use custom properties or the cascade from there:

    
    
        :root {
          --button-margin-block: 1ex;
          --button-margin-inline: 1em;
        }
    
        dialog {
          /*
           * Modals buttons need more block space and
           * less inline space.
           */
          --button-margin-block: 1em;
          --button-margin-inline: 1ex;
        }
    
        button,
        .button {
          margin-block: var(--button-margin-block);
          margin-inline: var(--button-margin-inline);
        }

~~~
notJim
Yup, classes are the way to go.

------
runarberg
Sorry if I sound snarky, but why use this if you can just write:

    
    
        <div style="margin-inline:auto">Center</div>
    

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.

~~~
majewsky
On top of what others are saying, on modern websites, inline CSS is usually
forbidden by the Content-Security-Policy, to provide defense in depth against
CSS injection.

(This SO answer summarizes why CSS injection is something to care about:
[https://stackoverflow.com/a/718614](https://stackoverflow.com/a/718614))

~~~
darekkay
Because an 11-year-old answer was just deleted by the SO "not an answer"
hammer, here are the links from the SO post you mentioned:

\- [http://www.thespanner.co.uk/2007/11/26/ultimate-xss-css-
inje...](http://www.thespanner.co.uk/2007/11/26/ultimate-xss-css-injection/)

\-
[http://archive.is/20150708191322/http://i8jesus.com/?p=10](http://archive.is/20150708191322/http://i8jesus.com/?p=10)

\-
[https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Sc...](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)

------
perilunar
Minimalist? It's 17609 lines and 553 KB.

The 'simple' responsive card example uses 9 divs and 33 classes.

This is madness.

~~~
classified
If they can call any dumb statistics accumulator an "AI", then this certainly
qualifies as "minimalist". Don't believe everything you read on the internet.

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

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

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

~~~
EnigmaCurry
[https://purgecss.com/](https://purgecss.com/)

~~~
leephillips
Thanks. I assumed someone somewhere had solved this problem.

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

~~~
leephillips
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

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

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

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

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

------
butz
Real minimalists are using only default styles provided by browser.

------
colourgarden

      ...
      .sm-pxh-676 { height: 676px; }
      .sm-pxh-677 { height: 677px; }
      .sm-pxh-678 { height: 678px; }
      .sm-pxh-679 { height: 679px; }
      ...
    

Yea no thanks.

------
keyle
Wow. Hell no.

And if you're truly minimalist,

A- you don't need a framework

B- you don't pollute every html tags with tons of classes.

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

------
mahesh_rm
I use Tachyons ([https://tachyons.io/](https://tachyons.io/)) whenever I can,
for achieving this purpose. It seems the scope is overlapping, and tachyons is
a little more mature: [https://tachyons-tldr.now.sh/](https://tachyons-
tldr.now.sh/).

~~~
TheGoodBarn
I love Tachyons, it was the first CSS library/tool that helped me feel
comfortable tackling designing good looking pages.

I think its a great tool for someone not comfortable in the space. As you use
it more and more you get a good understanding of what the properties are
(using margins, paddings, headers, centering text, etc) + couple that with the
VSCode plugin, it gives you the real css snippets for what the properties
mean. Then over time you start to understand what properties make your html
look that way, and then get comfortable writing css from scratch.

+1 Tachyons

~~~
subpixel
I love Tachyons as well, and am happy to see the project hasn't been abandoned
in favor of far more complicated things (I mistakenly thought that was the
case)

------
arkanciscan
Minimalists don't use frameworks

------
frequentnapper
Blunt for css, and Blazor for the rest of the front-end, and I'm all set.

------
dstroot
Can someone comment on Blunt vs. Tailwind?

~~~
dgut
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 Tailwind classes using the @apply method.. e.g
.card and .btn are typical examples (see
[https://tailwindcss.com/course/composing-utilities-with-
appl...](https://tailwindcss.com/course/composing-utilities-with-apply)).

~~~
welly
Going slightly off topic but I wonder if anyone can point me to a tailwind
"starter kit" \- ie. a project with everything in place to get going with
tailwind, postcss etc.

Thanks!

~~~
type0
[https://www.tailwindtoolbox.com/](https://www.tailwindtoolbox.com/)

[https://github.com/creativetimofficial/tailwind-starter-
kit](https://github.com/creativetimofficial/tailwind-starter-kit)

~~~
welly
And thank you too!

------
chadlavi
looks like you've already got example code, you should probably make a very
basic github pages example site for this as well.

------
trynewideas
> There seem to be hundreds of these things out there. So why bother with
> another one? Well, I was sick of fighting with the other options. Most are
> overly opinionated and result in spending time fighting the framework
> instead of it boosting productivity. I have tried so many different ones.
> Some do too much, others do too little. I needed some middle ground that
> worked for specifically what I wanted.

It genuinely doesn't feel like this boilerplate sentiment is ever necessary,
but it seems to wind up in so many of these types of projects.

We get it, nobody who writes a CSS framework likes any other CSS framework
enough to use it. If they did, this new framework wouldn't exist.

But it's a bad first impression to put an aimless rant the top of the readme
of a project you're showing off, instead of talking about what makes this
project unique, because there _never_ seems to be a good-enough reason to take
a swipe at other people's work — especially when someone will inevitably start
writing a CSS framework after liking 90% of Blunt but bouncing off one or two
things Blunt intentionally does or doesn't do.

I can imagine maybe thinking it's relatable in some way, but to me, every time
and without fail, it just poisons my sentiment before I've even looked at the
implementation.

~~~
lucideer
This seems to be highly subjective as I'm the exact opposite.

I guess perhaps I have an overly critical mindset, but when I see this, my
feeling is more of relief that this is someone who considers the purpose and
need of their projects carefully before starting, and is reluctant to "create
more stuff" for the sake of it rather than leveraging idiomatic approaches.

There's also the added confirmation bias of reading a rant of frustrations you
share.

NOTE:

This is a comment on the sentiment of your comment, not on the original
article, the author of which I must say seems to be experiencing frustrations
I do not share.

