10 ms·
Show HN: Blunt – A CSS Layout Framework for Minimalists
- dstroot 6y agoCan someone comment on Blunt vs. Tailwind?
- lemonberry 6y agoWith a quick glance it looks like Blunt has fewer classes. It seems to be more of a utility + whatever-css-method you choose, e.g.BEM. Blunt has utilities for margin, padding, height, width, font size, line height, grid and classes for row, column and some text alignment utilities. Tailwind includes border, font color, transitions, background color, etc. I'm using Tailwind on a project right now. My first one. I like it. But the big appeal to me is using the same classes on all of my projects. It's less cognitive overhead than coming up with names, dealing with scope creep on classes, etc. That said, a buddy of mine that is a much better web developer than I uses Sass to make base utility classes and a BEM like approach for the rest.
- Brajeshwar 6y agoBlunt looks like a simpler defined framework for styles. Tailwind is a utility framework for your styles. With Tailwind, I can do pretty much everything withotu having to write the "default" styles which I already know but don't want to. Depending on my needs, team-size and flexibility, I can set Tailwind to be used without ever writing a single line of CSS or use it to define my custom classes. E.g. of a recent project https://github.com/sagri/sagri.co https://github.com/sagri/sagri.co
- dgut 6y agoTailwind 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-apply https://tailwindcss.com/course/composing-utilities-with-appl...).
- leviathan 6y ago> ... 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.
- simplify 6y agogroup-hover was made specifically for this use case: https://tailwindcss.com/docs/pseudo-class-variants/#group-hover https://tailwindcss.com/docs/pseudo-class-variants/#group-ho...
- welly 6y agoGoing 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 6y agohttps://www.tailwindtoolbox.com/ https://www.tailwindtoolbox.com/ https://github.com/creativetimofficial/tailwind-starter-kit https://github.com/creativetimofficial/tailwind-starter-kit
- welly 6y agoAnd thank you too!
- hit8run 6y agoThat's the official starter kit: https://github.com/tailwindcss/playground https://github.com/tailwindcss/playground
- welly 6y agoThank you!
- freedomben 6y agoI 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 6y agoUnlearning 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.
- woodrowbarlow 6y agowow, 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/ https://css-tricks.com/snippets/css/complete-guide-grid/
- chrisweekly 6y agoI 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
- mahesh_rm 6y agoI 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 6y agoI 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 6y agoI 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)
- trynewideas 6y ago> 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 6y agoThis 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.
- runarberg 6y agoSorry 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.
- Ravengenocide 6y agoInline styles can't include media queries so if you want your styling to be responsive (which you probably want) you are going to need to write some CSS in a file and not have it inline.
- keb_ 6y agoYour critique applies to all of these modern "atomic CSS" frameworks, including Tailwind, Tachyons, and BassCSS. As another user pointed out, inline style attributes lack several of the features allowed by regular stylesheets.
- wwweston 6y agoOn 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.
- majewsky 6y agoOn 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)
- chadlavi 6y agolooks like you've already got example code, you should probably make a very basic github pages example site for this as well.
- 1ba9115454 6y agoPersonally 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.
- _puk 6y agoThanks 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.
- dancek 6y agoI find https://rscss.io/ 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.
- brailsafe 6y agoYou don't need to drop IE11. IE ws the first browser to implement any kind of grid feature, but even still you can just feature query for support
- lxe 6y agoOnce I discovered utility classes, I found it so much better than BEM or any derivatives of such. I don't want my styles to know what my components are, I want my components to use predefined styles.
- notJim 6y agoI feel like utility classes and BEM go well together, though. BEM for sort of atoms/molecules (to use the lingo from the linked css-tricks page), and then utility classes to tweak the components, and to make components play nicely together (Fixing up margins, etc so things flow right and are the right size.)
- leephillips 6y agoI’m sure this library of classes will be useful for somebody. But the stylesheet weighs in at half a megabyte.
- quickthrower2 6y agoFirst 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 6y agoYes. 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 6y agohttps://purgecss.com/ https://purgecss.com/
- leephillips 6y agoThanks. I assumed someone somewhere had solved this problem.
- quickthrower2 6y agoThis 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.
- 6y ago
- AltruisticGapHN 6y agoSounds 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.
- butz 6y agoReal minimalists are using only default styles provided by browser.
- frequentnapper 6y agoBlunt for css, and Blazor for the rest of the front-end, and I'm all set.
- arkanciscan 6y agoMinimalists don't use frameworks
- jakearmitage 6y agoSimple 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 6y agoi-lv-it, rlly cncise nd easy-t-ndrstnd.
- quickthrower2 6y agoBut not very semantic, but that's probably OK if you are hacking on a small site.
- deleted 6y ago[deleted]
- keyle 6y agoWow. 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.
- perilunar 6y agoMinimalist? It's 17609 lines and 553 KB. The 'simple' responsive card example uses 9 divs and 33 classes. This is madness.
- classified 6y agoIf they can call any dumb statistics accumulator an "AI", then this certainly qualifies as "minimalist". Don't believe everything you read on the internet.
- colourgarden 6y ago... .sm-pxh-676 { height: 676px; } .sm-pxh-677 { height: 677px; } .sm-pxh-678 { height: 678px; } .sm-pxh-679 { height: 679px; } ... Yea no thanks.