Show HN: Blunt – A CSS Layout Framework for Minimalists • Hacker News Board

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

#61

Post by runarberg » Fri, May 22, 2020, 6:28 AM UTC

desert_boi wrote: post #52

runarberg wrote: post #48

Earlier quoted context omitted.

Vanilla CSS has custom properties[1] (which are more powerful then SASS variables) and there is a proposal for the `&` nested selector[2] which you can get with PostCSS[3]. All you are missing are mixins, but there is a PostCSS plugin for that[4]. [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/--* [2]: https://drafts.csswg.org/css-nesting-1/ [3]: https://postcss.org/ [4]: https://github.com/postcss/postcss-mix…

Who's to say you can't use Sass variables _and_ CSS variables? My current shop is moving to switch our sass color function `color.get()` to either dump hardcoded hex or a css variable usage based on a param. It currently just does hex.

Well, it was a response to the parents claim that “[w]riting actual CSS is the waste of time”.

You might be happy to learn that CSS color module 4[1] will add `lab()` and `lch()` color definitions and CSS color module 5[2] will add the `color-adjust` function as well as other goodies.

1: https://www.w3.org/TR/css-color-4/

1: https://www.w3.org/TR/css-color-5/

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

#62

Post by runarberg » Fri, May 22, 2020, 6:37 AM UTC

runawaybottle wrote: post #51

runarberg wrote: post #12

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

How often are you planning on doing that? A little here, a little there, and suddenly your code is littered with inline styles, scoped JS styles, probably a style sheet for fun as well.

As often as you’d write `` using atomic frameworks.

If you have one rule classes, you’ve really just shifted the problem away from the style attribute to the class attribute. The only benefit of atomic frameworks is fewer keystrokes for the developer. But those would be reduced even further if they would style semantically using proper CSS.

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

#63

Post by classified » Fri, May 22, 2020, 6:59 AM UTC

perilunar wrote: post #60

Minimalist? It's 17609 lines and 553 KB. The 'simple' responsive card example uses 9 divs and 33 classes. This is madness.

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.

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

#64

Post by runawaybottle » Fri, May 22, 2020, 7:03 AM UTC

runarberg wrote: post #62

runawaybottle wrote: post #51

Earlier quoted context omitted.

How often are you planning on doing that? A little here, a little there, and suddenly your code is littered with inline styles, scoped JS styles, probably a style sheet for fun as well.

As often as you’d write ` ` using atomic frameworks. If you have one rule classes, you’ve really just shifted the problem away from the style attribute to the class attribute. The only benefit of atomic frameworks is fewer keystrokes for the developer. But those would be reduced even further if they would style semantically using proper CSS.

Classes can take advantage of cascading. So, I might decide the parent element class of ‘less-padding’ could affect all child ‘auto-center’ elements ‘.less-padding .auto-center { padding: 0 }’

Edit: removing my snarkiness.

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

#65

Post by andrei_says_ » Fri, May 22, 2020, 7:33 AM UTC

notJim wrote: post #42

1ba9115454 wrote: post #22

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.

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

BEM is awesome and simple mapped values in SCSS + functions let me do things like:

padding: p(‘s’) p(‘m’);

For that 8-px magic.

c for colors, bp for breakpoints, f for fonts etc.

This solves all the inconsistencies addressed by css frameworks and gives me slightly larger LEGO blocks.

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

#66

Post by welly » Fri, May 22, 2020, 8:54 AM UTC

hit8run wrote: post #54

welly wrote: post #40

Earlier quoted context omitted.

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!

That's the official starter kit: https://github.com/tailwindcss/playground

Thank you!

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

#67

Post by welly » Fri, May 22, 2020, 8:54 AM UTC

type0 wrote: post #45

welly wrote: post #40

Earlier quoted context omitted.

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!

https://www.tailwindtoolbox.com/ https://github.com/creativetimofficial/tailwind-starter-kit

And thank you too!

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

#68

Post by colourgarden » Fri, May 22, 2020, 9:30 AM UTC

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

Yea no thanks.

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

#69

Post by darekkay » Fri, May 22, 2020, 3:36 PM UTC

majewsky wrote: post #34

runarberg wrote: post #12

Sorry 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 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 )

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://archive.is/20150708191322/http://i8jesus.com/?p=10

- https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Sc...

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

#70

Post by leephillips » Fri, May 22, 2020, 4:10 PM UTC

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.

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.