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