Overview #

Cleacss is inspired by some of the most amazing css frameworks out there. A huge inspiration was spectre.css as well as bulma.io. You should check them out, if you need a more complex css framework or pre made components.

Cleacss aims to give you a solid and versatile foundation for modern websites and webapplications without building too much of a boilerplate and limiting your own css skills.

Beta #

This framework is currently in open beta. Feel free to check it out and contribute feedback. Since the base work is done, I don't expect to introduce breaking changes anymore, but nevertheless you should be aware: Use in production at your own risk.

Installation #

Install via npm #

Use your prefered packagemanager to install the cleacss package from npmjs.

  pnpm add cleacss

  yarn add cleacss

  npm install cleacss

Usage #

Import in js #

// Import the scss version
import "cleacss";
// Or import css version
import "cleacss/css";

Import in scss #

// Optionally import global scss methods (e.g. mixins) to use in your code
@import "cleacss/global";

// Import main scss file
@import "cleacss";

Concepts #

Variables #

Although cleacss uses sass itself, you can customize most parts using css variables. All variables are prefixed with clea to avoid conflicts with your codebase. Using these variables, you can easily override properties on an element basis, too.

Find out more

<style>
  .is-secondary {
    --clea-base-color: hotpink;
  }
</style>
<button class="button is-secondary">Find out more</button>

Breakpoints #

To handle responsiveness, cleacss has 5 breakpoints built-in. If your using the sass version in your project, there are handy @mixins for you to use. Each mixin is named as referenced in the following table.

@include desktop {
  width: 5rem;
}