27
A nice CSS framework located between Pico CSS and Bootstrap? (piefed.zip)
submitted 9 months ago by to c/webdev@programming.dev
24 comments fedilink hide all child comments
 

Can you recommend a CSS framework that feels lean and modern like Pico CSS but isn’t only targeting small form sites?

you are viewing a single comment's thread
view the rest of the comments
[–] -1 points 9 months ago (13 children)

What exactly is a CSS framework? Something which supplies a bunch of CSS classes with predefined styles?

I don't really see the benefit of those so can't actually help. I guess this is a suggestion to not bother with one :P

  • permalink
  • fedilink
  • source
  • hideshow 13 child comments
    •
  • [–] 7 points 9 months ago (12 children)

    What even is a restaurant? A place with a menu? I don't understand why people go to those. I suggest cooking at home.

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 12 child comments
    •
  • [–] -2 points 9 months ago (11 children)

    I understand that restaurants allow you to eat without cooking. But what does a CSS framework save you? You still have to write stuff to get the design you want, and you still have to come up with the design. Feel free to explain rather than drop another analogy...

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 11 child comments
    •
  • [–] 3 points 9 months ago* (4 children)

    the same could be said for languages that aren’t binary: what does it save you! you still have to write stuff to get the program you want, and you still have to come up with the business rules

    almost all software engineering tools just save you keystrokes, or save you from needing the knowledge to implement repeatable things… or for having a standardised way of doing things so new people can approach your project without having to learn as many details (eg rails, django, nextjs, etc: the terminology and layout of such projects are familiar; daos/views/etc all behave the same)

    for css frameworks for example, perhaps you have a .rounded-corners class… sure you could just implement it yourself, but if you’re using a framework you save a few minutes, the outcome is likely the same, you don’t need to know about the border radius details (and likely css frameworks implement things like shims or accessibility correctly; freeing you from needing to have deep knowledge of some esoteric details), and if the framework is big (like tailwind etc) then if you employ someone new, they know exactly what .rounded-corners means

    … obviously .rounded-corners is a pretty simple example, but you can imagine when these libraries fill out with many many tools the shorthand’s get much more complex

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 4 child comments
    •
  • [–] 1 point 9 months ago (3 children)

    rounded-corners saves you time over writing border-radius: 6px? And what about rounded-md, what does that do (in tailwind)? What about text-2xl versus font-medium? And what happens when you want to have a couple of styles in common between different elements so you actually need to use classes as they were intended, so you have to know CSS and this weird version where you write all your CSS in the class attribute.

    Thanks for taking the time to write down your perspective; I still just don't get it though.

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 3 child comments
    •
  • [–] 1 point 9 months ago* (last edited 9 months ago) (2 children)

    i’m not a frontend engineer so don’t know the difference between text- and font- without looking but that’s another good example of why frameworks are great: 6px is an explicit size, where md, 2xl, etc are all relative… per project you can decide what those sizes are and everything just falls into place… you rarely really care what the size is in pixels; mostly you only care about sizes relative to other parts of the UI… so again, people joining on a project don’t need to memorise magic numbers, because they just know without needing to guess what the size suffixes are

    i’ve only recently started to use tailwind (originally i saw no point, pretty much for the reasons you’re stating: why use classes like that when you can just use styles on the element and we know that’s bad) but since i embraced it i’ve started writing quality components much much faster… especially for layout like flexbox and grid it just flows really nicely, and i really don’t find that it feels like i’m repeating myself at all (partly because “repeating yourself” should be avoided by simply using components these days: CSS is an over-complicated and ill-fitting solution to the problem of styling in modern UIs)

    (okay i looked up text- and font-: text is size, font is weight… which tracks with my understanding of the other parts of tailwind and the way type is handled in software generally… i think there are no good options here)

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 2 child comments
    •
  • [–] 1 point 9 months ago (1 child)

    per project you can decide what those sizes are and everything just falls into place… you rarely really care what the size is in pixels; mostly you only care about sizes relative to other parts of the UI… so again, people joining on a project don’t need to memorise magic numbers, because they just know without needing to guess what the size suffixes are

    You can do all that with a CSS variable though...

    I think the text- and font- prefixes are emblematic though; because you end up with this soup of classes on every single element, they have to be as short as possible, and so they can't use font-size and font-weight.

    I can imagine it working nicely for flexbox, because that is complicated, but I still suspect you're better off just using the effort you would need to learn the tailwind classes to instead learn plain flexbox.

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 1 child comment
    •
  • [–] 1 point 9 months ago*

    You can do all that with a CSS variable though...

    and then people have to learn what it all means, where those variables are, how your mess of custom CSS hangs together, and probably what overrides what in your hierarchy

    you end up with this soup of classes on every single element

    it’s either than or a soup of stuff in CSS. the difference is largely academic in modern HTML because it’s all contained in components anyway

    they have to be as short as possible, and so they can't use font-size and font-weight.

    they don’t have to be; they could easily use font size and font weight, but i much much prefer the -lg notation… it makes your flow so much quicker. it reduces cognitive load significantly

    I still suspect you're better off just using the effort you would need to learn the tailwind classes to instead learn plain flexbox.

    i know flexbox and grid plenty well, and similar applies across the board for things like tailwind: containing everything together so that you don’t have to mess around switching between different places to define things, and using classes that kinda just represent what you want in shorthand literally makes my frontend development literally 10x quicker, and just feel smoother… even when i’m just doing personal projects

    you don’t have to believe me; that’s fine… but i used to think similarly to you, had a couple of failed attempts and hated tailwind, and my most recent personal projects it just clicked and everything feels so nice. i’m a principal engineer, and have done plenty of work on all kinds of projects so it’s not like i’m inexperienced and just go with the latest fad. these small time savings really add up

  • permalink
  • fedilink
  • source
  • parent
  • [–] 3 points 9 months ago

    Some (many) people find it easier to learn a small number of predefined class names that accomplish what they want without having to know hundreds of different CSS incantations when they're just trying to make a simple site.

    Sorta like how people use a command-line instead of just writing the code themselves.

  • permalink
  • fedilink
  • source
  • parent
  • [–] 3 points 9 months ago (1 child)

    I am primarily an embedded software engineer. However every now and again I have to write small web apps, having a CSS framework allows me to style it with pre-made classes saving me a boatload of work and learning and having the result look good.

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 1 child comment
    •
  • [–] 1 point 9 months ago (2 children)

    A CSS framework allows you to not write any CSS! You just add utility classes to your html. I personally use tailwind and I guess there's some advanced stuff where you'd have to still write CSS yourself but for most use cases it's a lot easier. Flex layouts, notably, are a breeze.

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 2 child comments
    •
  • [–] 1 point 9 months ago (1 child)

    Aren't the classes pretty much a 1:1 correspondence to CSS though?

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 1 child comment
    •
  • [–] 1 point 9 months ago

    Pretty much yeah, with shortcuts for frequent sizes, colors etc (which you can theme). I guess it's mostly interesting if you use react, as you can have everything inside components and switch classes in your code. I wouldn't say it makes things categorically better but it does lighten the cognitive load somewhat and the auto complete is fire.

  • permalink
  • fedilink
  • source
  • parent