Hi @BinaryMoon. I think you could remove gulp from the build process and instead use sass and lightningcss to do everything gulp is doing. This would reduce your dev dependencies and may be faster to run dev/build.

Also, you could change from using @import to load the scss modules and instead use @use and @forward.

What do you think? I'm happy to send you a pull request if you wish.

Use the following for radio button styles (and maybe checkboxes?)

https://moderncss.dev/pure-css-custom-styled-radio-buttons/

Add support for the new 'accent-color' property

https://www.smashingmagazine.com/2021/09/simplifying-form-styles-accent-color/

Hi Ben

Just received the "MasterWP" newsletter and saw the link to the CSS library you are working on. Really great idea/approach. Was tooling around a bit on the temp site you created and was just a little confused as to how to install the package of CSS files on my site. I'm not a full on dev so just need a bit more detail to understand how to implement this on my WP site.

• When you send folks here on Github, there is no "DOWNLOAD" button. When I go here on Github, there are several additional files that are downloaded with the CSS files/package. Which is the right set of code to include on my WP site? How do I handle that on my server?
• You note 3 files on the site yet there are 6 (understood the additional ones are compressed versions of the base 3 files) in the above GitHub link. Should I include all 6 on my server?
• Assuming I can just take the 3 (or 6) CSS files, put them in a folder titled "elementalcss" on my server, and then @import them into my main CSS file that my Wordpress site uses?
• Is it possible/acceptable to simply @import the 'raw' CSS files directly into my WP CSS file so that way whenever you make updates to the base code, it will be updated automatically on my site?

Thanks
Stephen

Here: https://elementalcss.com/

Hi, this looks like a really nice headless css library.

I was reading through the dist css and noticed you have two utility classes for flex-direction that do the same job:

.flex-row {
	flex-direction: row;
}
.flex-col {
	flex-direction: column;
}
.flex-d-c {
	flex-direction: column;
}
.flex-d-r {
	flex-direction: row;
}

I wasn’t sure if this was an error or intentional when looking at the _flex.scss?

Otherwise, on first read it looks great 👍. I really like the clear and concise utility class names.

Inspiration from here:
https://css-tricks.com/a-handy-little-system-for-animated-entrances-in-css/
https://animista.net/
https://easings.net/
https://animate.style/

Simple subtle animations only. Keep it to four or five of them. Including modifiers for animation delay