Skip to content
⚠️ DEPRECATED. Trowel is a Sass toolkit that allows you to create and use CSS frameworks with the most flexible pattern ever designed.
Branch: master
Clone or download
Loïc Goyet
Loïc Goyet 4.0.4
Latest commit 36c40b1 Jun 20, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
doc fix mispelling of the word `syntax` Mar 18, 2017
src change border-width for trwl-theme Jun 20, 2017
tests re-add prefixing in visual-test style and remove some not tested style Mar 18, 2017
.scss-lint.yml init architecture Aug 31, 2016
bower.json rearchitecture visual and unit tests files Mar 15, 2017



CircleCI Bower npm

The most evolving way to write scss code


# with bower
bower install trowel-core --save

# with npm
npm install trowel-core --save

# with yarn
yarn add trowel-core

What is Trowel ?

Trowel is made for helping you to create and customize visual components.

The frameworks state of play

CSS frameworks like Bootstrap or Foundation are great to start projets because they provide solid bases to your front-end design. Sass and less versions of thoses librairies are even better because they allow you to customize the UI through variables like below :

// typical way to customize a framework with scss variables.
$button-primary-bg: rgb(31, 13, 51) !default;
$button-success-bg: rgb(55, 211, 189) !default;
$button-warning-bg: rgb(255, 176, 0) !default;
$button-danger-bg: rgb(253, 65, 100) !default;

But maybe you just need two themes for you button component or maybe you need to create a fith theme. Today you cannot do this easily and quickly with variables and it makes framework painful to use when you need deep changes from your design.

The Trowel way

Trowel is a Sass extension designed to create framework easier and quicker to customize. The key feature provided by Trowel is a new way to write scss variables : we will defined into a single variable all the variants for a property.

If we translate in Trowel variable the previous example we will need a single variable :

// the trowel variable for button backgrounds
$button-bg: (
  '-primary': rgb(31, 13, 51),
  '-success': rgb(55, 211, 189),
  '-warning': rgb(255, 176, 0),
  '-danger': rgb(253, 65, 100),
) !default;

Then Trowel will loop over the map $button-bg and generate css declaration for each button variant.

You don't need .btn--danger button variant ? Just redefine the $button-bg variable without the '-danger' and you won't find it into your style.

You want to add an 'info' variant for your button component ? Rewrite the $button-bg map by adding a new entry with '-info'' as entry and the color you want as value.

Learn Trowel

If you want to learn how to use a Trowel component and create your own, check out our getting started tutorial.


A contribution guide is coming soon

You can’t perform that action at this time.