[HN Gopher] Show HN: Blunt - A CSS Layout Framework for Minimalists
___________________________________________________________________
Show HN: Blunt - A CSS Layout Framework for Minimalists
Author : max0563
Score : 89 points
Date : 2020-05-21 15:37 UTC (7 hours ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| freedomben wrote:
| 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 wrote:
| 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.
| freedomben wrote:
| Thank you! That looks like a fantastic resource, and exactly
| what I need.
| woodrowbarlow wrote:
| 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/
| chrisweekly wrote:
| 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
| zdragnar wrote:
| 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.
| DonnyV wrote:
| This is a promo for a service. You have to pay to see the
| other content.
| chrisweekly wrote:
| 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.
| mstade wrote:
| This is a great resource, thank you for sharing!
| uryga wrote:
| 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
| wilsonrocks wrote:
| http://flexboxgrid.com/
|
| Is pretty good - similar to at least one version of bootstrap's
| grid, but just does the layout
| leephillips wrote:
| I'm sure this library of classes will be useful for somebody. But
| the stylesheet weighs in at half a megabyte.
| arkanciscan wrote:
| Minimalists don't use frameworks
| butz wrote:
| Real minimalists are using only default styles provided by
| browser.
| frequentnapper wrote:
| Blunt for css, and Blazor for the rest of the front-end, and I'm
| all set.
| chadlavi wrote:
| looks like you've already got example code, you should probably
| make a very basic github pages example site for this as well.
| jakearmitage wrote:
| 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">
| mahesh_rm wrote:
| I use Tachyons (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/.
| TheGoodBarn wrote:
| 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 wrote:
| 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)
| 1ba9115454 wrote:
| 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/) and I'm happy.
| _puk wrote:
| 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.
| dancek wrote:
| 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.
| lxe wrote:
| Once 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.
| AltruisticGapHN wrote:
| 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.
| trynewideas wrote:
| > 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 wrote:
| 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.
| runarberg wrote:
| 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 wrote:
| 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)
| wwweston wrote:
| 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.
| keb_ wrote:
| Your 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.
| Ravengenocide wrote:
| Inline 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.
| dstroot wrote:
| Can someone comment on Blunt vs. Tailwind?
| lemonberry wrote:
| With 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 wrote:
| Blunt 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
| dgut wrote:
| 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...).
| leviathan wrote:
| > ... 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 wrote:
| group-hover was made specifically for this use case:
| https://tailwindcss.com/docs/pseudo-class-variants/#group-
| ho...
| welly wrote:
| 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!
___________________________________________________________________
(page generated 2020-05-21 23:00 UTC)