trowel / trowel

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

Trowel

The most evolving way to write scss code

Download

# 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.

Contribution

A contribution guide is coming soon

trowel's Issues

Make possible through the config to set up default values to selectors options

We could be allowed to set the default setup for selectors separators or prefixes

Add summary in Doc

Setting up visual constants shared to all trowel components

In order to provide by default, a coherent and consistent UI through all the friends of trowel components or even the non-official components. We need to set up inside trowel-core library some constants that will be common and not overwritten like

• font-sizes
• colors
• font-family
• spacings

Provide them as answer to this issue.

Once those constants setted up by the @Trowel/design-team , we will materialize them into code that will be easily used and overwritten through configuration.

Forbid some flags to a variable

Add the possibility to add a new param to the declaration mixin, that will not allow the usage of some setted flags for the variable associated to the mixin

add new flag type for attributes

Better config pattern

Make possible to overwrite a config map that contains all relatives config params (selector basic options or media-queries)

Better support of pseudo-class

Make some declaration required

Add the possibility to add a new param to the declaration mixin, that will be a bool describing if the variable passed can be null or not.