The tool that redesigns CSS frameworks

Trowel is a Sass toolkit that allows you to create and use CSS frameworks with the most flexible pattern ever designed.

The Trowel project is abandonned. Trowel core and the Trowel components are no more maintained or supported. More infos

Get started Checkout on github

// A trowel-variable written in scss

$btn-background-color: (
  'default': rgb(255, 255, 255),
  ':hover': rgb(225, 225, 225),
  '-primary': rgb(31, 13, 51),
);
// compiled CSS

.btn {
  background-color: rgb(255, 255, 255);
}

.btn:hover {
  background-color: rgb(225, 225, 225);
}

.btn--primary {
  background-color: rgb(31, 13, 51);
}

Discover the power of the Trowel Variables

The key feature of Trowel is its variables. The Trowel variables allow you to define several values depending of criteria like a pseudo-class, a modifier class, a responsive breakpoint, etc. This pattern allows the user to totally control the CSS output, by generating only the style required. CSS frameworks will no more be big boats, they will just fit for you website.

$button--color: rgb(0, 0, 0) !default;

$button--background-color: (
  'default': rgb(255, 255, 255),
  ':hover': rgb(225, 225, 225),
  '-primary': (
    'default': rgb(31, 13, 51),
    ':hover': rgb(21, 3, 41),
  ),
) !default;

$button--cursor: (
  '<button': default,
) !default;

$button--selector: selector(new 'btn');

@include statement($button--selector, (
  ('display', inline-block),
  ('color', $button--color),
  ('background-color', $button--background-color),
  ('cursor', $button--cursor),
  ('opacity', $button--opacity),
));
.btn {
  display: inline-block;
  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
}

.btn:hover {
  background-color: rgb(225, 225, 225);
}

.btn--primary {
  background-color: rgb(31, 13, 51);
}

.btn--primary:hover {
  background-color: rgb(21, 3, 41);
}

button.btn {
  cursor: default;
}

Friends of Trowel the official list of Trowel Components

Friends of Trowel is a github organization that gathers all the Trowel Components created and maintained by the Trowel core team.
You will find every basic component that composes a CSS framework, but with a lot of Trowel variables allowing you to customize the style like never designed before.

See the documentation Checkout on github