Skip to content
loading...

re: Almond.CSS: a collection of class-less CSS styles VIEW POST

TOP OF THREAD FULL DISCUSSION
re: 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 ...
 

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.

 

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

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

code of conduct - report abuse