Installing Carrot CSS

We recommend using a package manager like yarn or npm and keep it updated, but you can also use our CDN.

Using a package manager

Install carrot-css using a package manager:

// using yarn
yarn add carrot-css

// using npm
npm install carrot-css

Then you can import it in your SASS files:

// Depending on your stack, one of these lines will work
@import 'node_modules/carrot-css/dist/carrot.css'
@import 'carrot-css/dist/carrot.css'
@import url("~carrot-css");

Or import it in your JS file:

import "carrot-css"

Using a CDN

You can also use a CDN and get the last version:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/carrot-css/dist/carrot.min.css">

Be sure to import or load carrot css before any of your CSS! It should be loaded before any CSS

You want to be able to overwrite values without artificially bumping the selector specificity. In CSS, if the specificity is the same, the last declared rule is applied so you can just declare CSS variable to overwrite default.

What to do now?

You should probably overwrite some CSS variables to make it your own and you should be good to go.See more on our Getting Started guide, check the Documentation or just start coding 😀