Henri’s, the Sass toolbelt which helps you do the fun things yourself again.

But what does it actually do?

Well a lot, it gives you a shitload of functions, mixins and other tools, to speed up your styling. But also keeps it fun to actually style the things you want.

It doesn’t have any out put by default, so its very lightweight, but give you full control over what to output and how much. So the default is 0kb.

0kb

So it includes a lot of things..

Some of the things you will find in the documentation and will help you enjoy coding again :)

Grid

Colors

Animation

Utilities

Responsive

Basics

Grid

The grid is one of the most important things in a website or app, to use it fully there is a full set of functions and mixins to create and use the grid.

If you know foundation, you know Henri’s. Just go a long, check the examples and bootstrap your project within a few minutes.

Colors

The grid is one of the most important things in a website or app, to use it fully there is a full set of functions and mixins to create and use the grid.

If you know foundation, you know Henri’s. Just go a long, check the examples and bootstrap your project within a few minutes.

Animations

The grid is one of the most important things in a website or app, to use it fully there is a full set of functions and mixins to create and use the grid.

If you know foundation, you know Henri’s. Just go a long, check the examples and bootstrap your project within a few minutes.

Work with everything because it doesn’t do stuff you don’t need.

Wow, that sounds vague! But it’s not. Many Sass frameworks give you also a lot of javascript to make stuff work. Henri’s doesn’t. Which makes it possible to use Henri’s in every kind of project. The only dependency is Sass. Either Node Sass, Sass or Ruby Sass.

It doesn’t have any out put by default, so its very lightweight, but give you full control over what to output and how much. So the default is 0kb.

A few examples

Just a few, there is way more ofcourse in the documentation. But to give you an idea of what you can do and what Henri’s will help you do.

Exampleee Grid

Menu

Almost every website or app has this thing, that little hamburger menu thingy. There are many ways to make these. You You could put an SVG image, just another image, or you can make it with a little bit of code.

That makes it a little easier to have control over every element and to animate it.

You can find more information about the hamburger menu mixins in the docs:menu


@include menu();
						
@include menu(5rem, 1rem, 0.5rem, Lime, 0.5rem);
						
@include menu(5rem, 1rem, 0.5rem, Lime, 0.5rem);
@include menu-close; 

Exampleee Colors

Exampleee Animation

Exampleee BEM

Exampleee Gradients

Exampleee Sizing

Exampleee Typography