Sugarcss NPM | npm.io

Sugar (v1.0.3)

The goal of Sugar is certainly not to tells you how to organize your project. It's just like a sugar in the coffee, you choose the coffee, Sugar enhance it with a nice touch!

Visit Website for full documentation

Write less, do more!

Sugar has a lots of cool mixins to help you write cleaner scss:

.my-cool-element {
    @include s-font(12px helvetica bold underline uppercase nowrap right);
}

This will give:

.my-cool-element {
    font-size : 12px;
    font-family : helvetica;
    font-weight : bold;
    text-decoration : underline;
    text-transform : uppercase;
    white-space : nowrap;
    text-align : right;
}

Quick start

Importing sugar

@import "sugar/sugar"

Configure your sugar :

@include sugar((
	typo : (
		font-size : 13px
		// etc...
	),
	colors : (
		orange : #f2bc2b
		// your colors here...
	),
	transition : (
		// your transitions settings here...
	)
	// and many more settings by packages
	// like font-awesome, modular-scale,
	// animate.css, BEM, etc...
));

Helper classes (if wanted) :

@include sugar(classes);

.pull-left, .pull-right
.m-t-{size}, .m-b-{size}, .m-l-{size}, .m-r-{size}, .m-s-{size}
.p-t-{size}, .p-b-{size}, .p-l-{size}, .p-r-{size}, .p-s-{size}
.text-left, .text-right, .text-center, .text-justify, .text-uppercase, .text-lowercase, .text-capitalize
.c-{color}, .bkg-{color}
// and many more

Take advantage of all the powerful sugar mixins, functions, etc...

.h1 {
    @include s-vertical-rhythme((
        s-font : 30px helvetica uppercase,
        margin-botton : 20px
    ));
}
.my-font-element {
    @include s-font(12px s-color(orange, light) uppercase underline nowrap);
}
.popover {
    // an orange bubble with an arrow top 20px
    @include s-bubble(top s-color(orange) 20px);
}
// and many more mixins and functions...

Cool packages out of the box

Sugar comes with some nice packages like font-awesome, animate.css, etc... out of the box. These packages are optimized to generate only the css you need!