Home - Particles CSS

About

Particles CSS is utility-first CSS library focused on a few things:

Semantic

Class names follow a very close naming convention to the CSS spec. Learn Particles, and you learn CSS. Know CSS, then you know Particles.

Intuitive

Class names should be easy to understand, learn, and even guess. There's no arbitrary names, units, or scales to learn.

Efficient

It should take away as much energy and time spent thinking about options. Other libraries are not flexible enough, and custom CSS is too flexible.

Customizable

The library should be customizable to your brand. It uses SCSS variables and CSS custom properties (variables).

Getting Started

Installation

Install the project with:

npm install prtcls

Import the library into one of you SCSS files:

// main.scss
@import "~prtcls";

Customization

You can customize Particles' SCSS variables above the import statement.

// main.scss
// customize variables here
@import "~prtcls";

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;
}

Optimize for production with PurgeCSS

You will most likely want to remove unused CSS with something like PurgeCSS. 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.

Default Styles

There is a very conservative style reset that affects a few base HTML elements:

Everything uses box-sizing: border-box;
Default margin is removed from <body>
The default top and bottom margins are removed. Top margin is added to sibling selectors such as p + p
Any <ul> or <ol> element with a class defined gets the padding and disc-style-type removed
Buttons inherit font attributes

Prefixes

Responsive

Add these prefixes to any Particles CSS class to apply the rules only at certain the respective breakpoints.

Prefix	Breakpoint
bp1	40rem (640px)
bp2	48rem (768px)
bp3	64rem (1024px)
bp4	80rem (1280px)

Pseudo-Classes

Add these prefixes to any Particles CSS class to apply the rules only for the respective pseudo-classes.

Prefix	Pseudo-class
hover	:hover
focus	:focus
within	:focus-within
first	:first-child
last	:last-child
even	:nth-child(even)
odd	:nth-child(odd)
active	:active
visited	:visited
required	:required
invalid	:invalid
empty	:empty

For more general information on what pseudo-classes are and how to use them, please see the MDN article about them.

Sign up for the newsletter to get the latest updates.