
Show HN: A maximalist CSS framework for full stack developers - swlkr
https://ridgecss.com
======
AbsoluteDestiny
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.

~~~
pmiller2
IMO, this is the most interesting comment here so far (the second most
interesting one being the rant saying "don't use CSS frameworks").

What other potentially unexpected consequences are there for using semantic
markup? I would definitely not want to use the <aside> element if it makes my
site less accessible to the visually impaired. Are there any other potential
traps lurking here?

~~~
FreezeBurn
Visually impaired people aren't wasting their time on a CSS framework website.

~~~
pmiller2
I'm not sure precisely what you mean, but, given the number of sites that use
Bootstrap alone, I suspect many visually impaired people are, indeed, browsing
sites made with CSS frameworks.

------
nawgszy
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

~~~
swlkr
Hmm that’s a good point, I changed this last minute (just like my other reply)

The original branding ended with "for making web apps fast"

~~~
tobr
Making them fast? Do you mean making them quickly?

~~~
swlkr
I do mean quickly, but I like the colloquial "fast"

~~~
mixedCase
"fast" can (and I would say "will be") often associated with runtime
performance. "Quickly" instead is less confusing to know it's about
development speed.

------
lioeters
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).

~~~
tootie
Yeah, I'd expect maximalist to be heavyweight and complex. It seems to be an
unsatisfied niche with so many minimalist systems out there. There's loads of
applications out there for which there's a captive audience of enterprise
users who don't mind waiting an extra 3-4s to load scripts if they'll provide
better function.

~~~
lioeters
What comes to mind as an example of "maximalist" approach is Ant Design.

[https://ant.design/components/overview/](https://ant.design/components/overview/)

Very impressive framework, lots of well-made components, totally ready for
enterprise use.

When I experimented with it briefly, though, it seemed pretty heavy, and I
wasn't able to just use a small part of it without bringing in a whole jungle.

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

~~~
swlkr
It's not super obvious from the README, but I did throw a few examples
together here:

[https://ridgecss.com/examples.html](https://ridgecss.com/examples.html)

There's also the original inspiration for them here:

[https://almonk.github.io/pylon/](https://almonk.github.io/pylon/)

They are essentially swiftui-ish helpers to lay things out with even spacing
vertically (vstack) or horizontally (hstack)

~~~
hanniabu
It appears that menus aren't visible on mobile. Any reason for that?

~~~
swlkr
Hmm it's probably my media queries, the menu should show up at the bottom of
the screen at 507px

[https://github.com/swlkr/ridgecss/blob/master/ridge.css#L970](https://github.com/swlkr/ridgecss/blob/master/ridge.css#L970)

but since they aren't for you, it's the first bug!

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

~~~
swlkr
Oh that would come in really handy!

There isn't one, but I will definitely add it!

------
chrismorgan
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>

~~~
swlkr
I actually like <v-stack> although it could be confusing coming from vue.js,
but that's something I can live with.

Thanks for pointing out everything, it should all be fixed if you take a
second look, except for the button in a link thing, that's going to take a
little bit.

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

~~~
swlkr
Hey, thanks for that.

Yeah the classless thing AND atomic css both struck a chord with me, so I
wanted to try and make something that combines the best of both worlds.

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

[1] [https://marvinblum.de/](https://marvinblum.de/)

[2] [https://concrete.style/](https://concrete.style/)

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

~~~
swlkr
It's maximalist unlike most other classless css frameworks, because it also
includes a bit of atomic css and alpine.js tags on the examples page.

It really is meant to be used kind of like a bootstrap substitute with less
!important and more reactivity coming from alpine.

Full stack developers used to mean "render html on the server and spruce it up
with javascript" so that's kind of where I was going with it.

~~~
webmaven
That definition of "maximalist" doesn't make a lot of sense to me, but okay.

Your "full-stack" definition is... more or less in the right ballpark, I
suppose, but doesn't that imply that Ridge actually integrates an HTML
templating language as well?

------
jslakro
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](https://news.ycombinator.com/item?id=20155098)

~~~
swlkr
Yep! I borrowed the vstack, hstack and spacer elements from that library, they
work great!

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

~~~
swlkr
Hey! Yeah the spacing is kind of small, I changed it up last minute and now
regret it

Luckily it’s easy to change on future themes and even the default one with a
few css variables

[https://github.com/swlkr/ridgecss/blob/master/ridge-
dark.css...](https://github.com/swlkr/ridgecss/blob/master/ridge-dark.css#L29)

------
rammy1234
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 ?

~~~
swlkr
I think css frameworks are one of those things where it’s not one size fits
all

Languages are another one where you can stop making new ones, but why would
you?

------
trashburger
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).

~~~
swlkr
It's not difficult at all, you're right.

This particular framework is kind of a shortcut if you don't want to start
from a blank css file and want to throw a web app together quickly.

Also, there are differences here from most other classless css frameworks
because this mixes classless, atomic css and some swiftui like helpers for
maximum html impact

~~~
thomasahle
> this mixes classless, atomic css and some swiftui like helpers

Do you have a one paragraph summary of what those are and why they are good?

~~~
swlkr
Classless css helps you get going quickly with just html, think a <form> with
<input> and <label> and everything looks decent. You haven't written any
custom css.

Atomic css helps you add some customization, things like padding, margin,
colors, borders as classes, again without writing any custom css, you are
still in the same html file.

Swiftui helpers are <vstack>, <hstack> and <spacer />. you don't have to mess
with bootstrap grids or custom css grids, just slap your elements in an hstack
and they are now laid out horizontally as one example.

To sum it up, I would say the mix of these different approaches to css help
you ultimately write no custom css yourself, you can focus on writing html, a
few classes and that's it.

Edit: capitalization

