Show HN: A maximalist CSS framework for full stack developers

Be careful when using semantic elements purely for presentation purposes. For instance, the <aside> element gives the element a landmark role 'complimentary' telling assistive devices that this is not part of the main content.

That's not really true for your cards, though, they are part of the content.

Also, having multiple complimentary landmarks in the same context (main, footer) is really confusing. Having 3 <aside> elements next to each other would be like having three <header> elements next to each other.

Why is this targeting full stack developers? Seems like a quite simple CSS framework.

To be honest, it's also really quite simple. I don't have much feedback - it's basic and it works to that level - except for that "maximalist" and "for full stack developers" didn't register with me, a full stack developer, so you might want to try a different branding

Kind of expected more from "maximalist", like tons of components. It seems well-rounded though, to cover common needs.

To nitpick for feedback:

- I'd prefer more spacing for headers, labels, input fields

- The checkbox and its label might look better if they aligned perfectly with radio inputs.

- Clicking on checkbox label changes the selection, but it doesn't with radio labels.

- Clicking on range input makes the whole thing go down a pixel or two. That effect looks OK on buttons, but not for range (in my opinion).

I see that in the README, you give an example that uses `hstack` and `vstack` tags. Can you just declare you own tags that are essentially wrappers for CSS? If not, I'd love an explanation what what they do.

Is there a custom file chooser? (<input type="file">) Those are notoriously hard to style.

On this particular page, it’s been split up into two stylesheets: the base part, and a theme; and JavaScript is required to load the theme, without which it looks awful. It would be nice for that to be fixed.

My usual complaint about these things is hijacking of existing semantic elements for presentation purposes. AbsoluteDestiny has dealt with that, so I’ll lay off this time. Beyond that: you have followed one of the routes I usually suggest, which is using your own elements (e.g. <vstack>). Good! I approve! Just one thing: if you want your markup to be valid HTML, put a hyphen in your element names so that they’re proper autonomous custom elements rather than just unknown elements that could theoretically be assigned meaning in the future. <v-stack>, <r-vstack>, <ridge-vstack>, something like that.

Other matters of HTML validity, mostly pretty harmless and about the markup shown on the sample page:

• You have some stray end tags: </img>, </input>. These are empty elements, so they don’t have end tags (that is, it’s actively wrong to write them, though in practice it’s completely harmless).

• You’re not allowed to put buttons inside links, though it will probably work almost properly in all browsers. The notable interactivity problem is that the link and the button are both focusable, so it messes up keyboard navigation a little. (A related case is links inside links, which is actively forbidden in the parser, and not handled by browsers. My vague recollection is that Firefox was the only one that did what a sane person would expect in the past, and no one else wanted to implement it, so they ripped the functionality out of spec and browser, to the regret of some.)

• tab-index="1" looks like you may have meant tabindex="1", though I suspect you don’t want either.

• The radio button label for attribute is wrong. Should be something like this (or you could just drop the `for` attribute, though allegedly some few accessibility tools are stupid and wrong and make a mess of things if you omit it, even though that’s perfectly valid and has been forever):

  <label for="radio1">
    <input type="radio" name="radio" value="true" id="radio1">
    Radio 1
  </label>

There’s a lot of critical reception in this thread, mostly people complaining about bandwagoning. However, there’s a lot to be said for eliminating the unnecessary “div all the things” mindset of websites today, it makes html much easier to read and eliminates unnecessary typing. As a css framework, this is also agnostic to rendering frameworks.

I wouldn’t consider classless a trend, just another useful methodology we still should be exploring.

Also a nice looking css framework. My website [1] uses concrete [2] which I prefer for its "sharp edges".

[1] https://marvinblum.de/

[2] https://concrete.style/

Reasonably clean, attractive and maintainable, but what makes this particular framework "maximalist" and for "full-stack developers", especially in comparison with other CSS frameworks?

Couple months ago was shared a good initiative about layout primitives, I keep using it on prototyping it's perfect

https://news.ycombinator.com/item?id=20155098

The spacing seems way too small on some of these, and there's no coherent relationship between the different amounts of it. The web is basically 99% text and spacing, so it's important to get this right.

Apart from that, it's pretty clean, and I like the logo.

why css frameworks gain so much traction when there is so much out in there. what is so wrong in existing css frameworks that we cannot improve ? why would someone go to new one when they have invested heavily on some existing frameworks ?

At this point there are multiple "classless" CSS "frameworks" posted on HN daily and subsequently hitting frontpage. This fad has become quite boring, no offense to the author of this particular framework.

What's so hard about just throwing a few lines of CSS in a file and adding a link element to the <head>? You can get the same amount of mileage by spending 10 minutes writing generic rules with the benefit of knowing exactly what part of the page is affected by which rule (more valuable to me than the instant gratification of classless frameworks).