CSS-Tokens is a curated collection of reusable CSS variables

After realizing I was repeatedly setting up and employing the same variables across numerous projects, I had the idea to create this collection of CSS variables. It enhances efficiency, improves coherency, and elevates the overall developer experience when working on projects with custom css.

Getting started with CSS-Tokens is straightforward:

1. Use npm:

npm install css-tokens-variables

2. Use a CDN

<link rel="stylesheet" href="https://unpkg.com/css-tokens/dist/css-tokens-variables.css">

3. If you prefer manual integration, copy the variables from our GitHub repository and integrate them into your stylesheet.

Integrating CSS-Tokens into your project is simple:

1.1 In your CSS, import the CSS Tokens by including:

@import 'css-tokens-variables';

1.2 or add a link in your html with

<link rel="stylesheet" href="https://unpkg.com/css-tokens/dist/css-tokens-variables.css">

2. Utilize Variables: Harness the power of these variables by referencing them in your styles. For example, color: var(--color-primary);.

CSS Tokens encourages flexibility. Should you wish to personalize the variables, simply overwrite any variable with your desired value.

:root {
    --space-base: 14px;
}

Your insights, ideas and contributions are invaluable. If you encounter issues or have suggestions, please participate by opening issues on our GitHub repository. Your involvement drives the growth of this resourceful tool. 😊

If you find CSS Tokens valuable for your projects, I'd love to hear about it! I'm excited to showcase a list of projects where CSS Tokens is making a difference...