Carrot CSS is a CSS Starter or micro-framework, it is not a framework as it does and assume way less, but this is more than a reset, as it give you a sane boilerplate for you to write your own CSS code.
If you want to write your CSS but you are tired of writing the same starter code on every projects, Carrot CSS is for you!
If you want to write clean CSS that actually scales and you want to be sure to get of on the right foot with your CSS, Carrot CSS is for you!
Carrot CSS is a stable foundation for your projects, it is lightweight and CSS only. It use CSS variables and have built-in theme support, and the whole thing is understandable and easily customizable.
And also, Carrot CSS don't go too far, it only weight 4.2kB gzipped and does just what you need, no more.
This library should be used by people that actually intend to write CSS, as it is not a component library, does not offers much styling and is not an utility library.
This is not meant to stops you from writing CSS, but to start your CSS from a right basis.
Carrot CSS code can be sorted into three main components:
Just the minimum needed to have decent readability and nice contrast between title sizes and paragraphs.
These helps you going faster. Great layout utilities from Every Layout will help reduce these display: flex and keep the layout DRYer. Some form fields and buttons classes to get you going and few utilities.
We use CSS Variables to store palette color from tailwind, because they are nice.
But we love how the design tokens gives you flexibility so we are not using these palette colors directly in the CSS, but rather from the Design Tokens defined in the theme file.
A theme is a group of CSS variables that defines colors for the application.
The tokens that are not related to colors exists also as CSS variables.
To configure the tokens, you can use our Variables template that you can use to overwrite variables.
...And not one line of JavaScript!