Particles CSS

A customizable SCSS library for utility-first CSS

Getting Started

Install the project with npm install prtcls.

Create a SCSS file. For example, main.scss.

In that SCSS file, import the library:

// main.scss

// Customize options here

@import "~prtcls";

// Add more styles here

(You can customize Particles' SCSS variables above the import.)

If you want to use Particles to extend your own styles, you can use SCSS's @extend feature:

code,
pre {
  @extend .py-1, .px-2, .radius-2, .color-gray-1, .bg-gray-8;
}

Finally, you will most likely want to implement something like PurgeCSS to remove unused CSS. If you're using Webpack, it might look like this:

// webpack.config.js
const glob = require("glob");
const PurgecssPlugin = require("purgecss-webpack-plugin");

const purgecss = new PurgecssPlugin({
  paths: glob.sync(`./src/**/*.html`)
});

module.exports = {
  plugins: [
    ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
  ]
};

Be sure to npm install purgecss-webpack-plugin first.

Base Styles

There are very few styles affecting base HTML elements:

Theme

Colors

red
orange
yellow
green
cyan
blue
purple
pink
gray

Customization:

VariableDefault Value
$saturation70%
$colors('red', 0[, $saturation]), ('orange', 25[, $saturation]), ('yellow', 55[, $saturation]), ('green', 110[, $saturation]), ('cyan', 170[, $saturation]), ('blue', 210[, $saturation]), ('purple', 270[, $saturation]), ('pink', 300[, $saturation])

Colors use HSL values to dynamically generate variants based on their lightness. To accomplish this, you must provide a list of colors. Each item in the list must be itself, a lit with the name you want to give the color, and it's hue. Optionally, you may provide a third value to the color list for it's saturation.

To find the right hue from a different color format, try this tool.