DEV Community

loading...

Discussion on: Almond.CSS: a collection of class-less CSS styles

Collapse
yuanhao profile image
YuanHao Chiang

Looks great! I really like the idea of keeping it simple. Excuse my ignorance, but I haven't really tried CSS variables yet. Where do you add them and how do you change them?

Also, what do you think about using margin: { 2rem 0 1rem } for headings and 1.8rem lineheight for paragraphs? I feel it's more readable as a default style for HTML documents.

Of course, just my personal opinion :) (also with a small fix on the blockquote)

Here's how it would look:

headings

Collapse
alvaromontoro profile image
Alvaro Montoro Author

I like the ideas (especially the line-height on paragraphs). That will be a change that I'll add soon :D

You can add a variable in CSS by defining it like this inside a rule: --variableName: value;. Then that variable will be available by doing var(--variableName) within the scope of the rule (e.g. if you define a variable in a ul, it will be available in the ul and the descendant lis but not outside of it). The cascading applies to them too: if you define them at the html, body, or :root level, then they will apply to the whole page; and if you redefine them somewhere in the document, the new redefined value will apply to that scope. (sorry if it's too much, I tried to concentrate the most important info in just a paragraph).

The library uses CSS variables at the :root level, they have some default values, but users can easily overwrite them in their own stylesheet, that will need to be loaded after the almond.css file.

Collapse
yuanhao profile image
YuanHao Chiang

I see, started tweaking some variables to see how easy it was to do a mockup dark mode, and it worked well, almost everything looked perfect 💯.

First time I use HSL on CSS, and it's incredibly versatile, never though of it before!

darkmode

Thread Thread
alvaromontoro profile image
Alvaro Montoro Author

By the way, I added the line-height changes into the library (giving you credit for the suggestion), and made it into a variable too, so users can change it easily (it will apply to paragraphs and lists).

...Looking into the heading margins now :)