Sugar Sugar


Sugar gives you a lot of cool stuff to enhance your codebase. It basically does nothing by default but let you grab what you want from it. It can be the colors management feature, as well as the spaces management, helper classes, etc...

We like to think about this toolkit as

A little (but powerful) sugar in your codebase

Table of content

  1. Goals
  2. Install
  3. Quick start
  4. Sass features
  5. JS features
  6. What sugar does not
  7. Other tools integration
  8. Some components demos
  9. Contribute
  10. Browsers support
  11. License
  12. Who are Coffeekraken


The primary goal of this toolkit is to cover these needs:

  1. Give you a way to organize your codebase (colors, fonts, etc...)
    • Sugar does not tells you how your folders need to be layed out
    • Help you to stay organized inside your code
    • Help a lot when you need to work in team
  2. Give you access to a large number of useful mixins like:
  3. Give you access to some cool effects that you can tweak like:
  4. Provide some useful daily use javascript functions like:
  5. Provide some powerful javascript classes like:
    • SWebComponent : Base class to create webcomponent based on react methods naming (componentWillMount, componentMount, etc...)
    • SBinder : Allows you to bind object properties to another object
    • SWatcher : Allows you to monitor object properties
    • STimer : Nice little class to handle timers (start, stop, pause, onTick, etc...)
    • And many more...
  6. Plenty web components based on the SWebComponent class
    • These web components are separated into outside repositories
    • Official sugar web components are published on the Coffeekraken github organisation
    • Well tested components
    • Open source so don't be afraid to contribute!


npm install git+ssh:// --save

Release the kraken !!! 🦑

Quick start

Here's how to get started quickly:

SASS (scss)

// import sugar
@import 'node_modules/coffeekraken-sugar/index';

// configure your sugar
@include s-setup((
    // configuration here...

// init (required to be just after s-setup calls)
@include s-init();

// generate the classes if you want
@include s-classes();


In javascript, you just need to import what you want from the toolkit like so:

import STimer from 'coffeekraken-sugar/js/classes/STimer';
// etc...

Sass features

Here's a list of features that the toolkit will offer you. Don't worry, it seems like a lot, but you don't need to use all of them to start. Just pick what you need and let the rest aside...

  • Colors : Manage, organize and use colors easily
    • Named colors
    • Easy modifiers
    • Helper classes (optional)
    • And more...
  • Fonts : Keep your fonts really organized
    • Names fonts
    • Helper mixins
    • Helper classes (optional)
    • And more...
  • Typography : Full stack typography management
    • Optional default styles
    • Helper mixins
    • Helper classes (optional) (lowercase, uppercase, aligns, etc...)
    • And more...
  • Components : Full stack optional components
    • Divided in four parts
      1. The bare part that gives you only the structure of the component (sizes, paddings, etc...)
        • Some components does not support this part...
      2. The style part that gives you a pre-build style if you don't want to make your own
        • Some components does not support this part...
      3. The classes-bare part that create default classes with only the bare part
      4. The classes-style part that apply to default classes the style part
    • Buttons
    • Forms (input, select, group, addons, etc...)
    • Tables
    • And more...
  • Sizes : Manage sizes ratios to keep consistent margins, etc...
    • Named sizes (smaller, small, default, etc...)
    • Fully customizable
    • Ratio based
    • And more...
  • Spaces : Full stack spaces management
    • Named spaces (share sizes names)
    • Helper classes (optional)
      • .m-b-small : Margin bottom small
      • .m-t-big : Margin top big
      • .p-l : Padding left (default)
      • Etc...
    • Helper mixins
    • And more...
  • Look and feel : Handle how your components (atoms) looks across your site
    • em unit based
    • Helper mixins
    • Ensure a consistent feel across your website
    • And more...
  • Filters : Manage and keep your filters organized
    • Named filters
    • Helper mixins
    • Helper classes (optional)
    • And more...
  • Transitions : Manage and keep your transitions organized
    • Named transitions
    • Helper mixins
    • Helper classes (optional)
    • And more...
  • And many more cool stuffs like:
    • A bunch of cool mixins to discover
    • Utils functions like :
      • s-convert : Convert from a unit to another
      • s-is : Easily advanced variables type checking
      • And more...
    • We let you discover the rest by yourself...

JS features

Sugar provide a lot of cool functions and classes that you can use inside your project. The main goal sugar try to achieve is to give you some cool tools that you can or not use. It's your choice and sugar will never force you in any way.

All the javascript capabilities of sugar are well structured and splited inside the repository so you will be able to grab only what you want from it. Here's some examples of functions and classes you might load in your project:

import whenAttribute from 'coffeekraken-sugar/js/dom/whenAttribute'
import closest from 'coffeekraken-sugar/js/dom/closest'
import whenInViewport from 'coffeekraken-sugar/js/dom/whenInViewport'
import whenAttribute from 'coffeekraken-sugar/js/dom/whenAttribute'
import closestNotVisible from 'coffeekraken-sugar/js/dom/closestNotVisible'
import SColor from 'coffeekraken-sugar/js/classes/SColor'
import STimer from 'coffeekraken-sugar/js/classes/STimer'
import SWebComponent from 'coffeekraken-sugar/js/core/SWebComponent'
// etc...

Other tools integration

Sugar is also focused on being a good friend with other tools. Here's some tools that you can use with:

  1. Carpenter : Styleguide and documentation aggregator interface for your projects
    • Generate styleguide from your css codebase
    • Aggregate documentations from used modules inside 1 interface
    • Freaking cool to work in team
    • And more...
  2. Docblock parser : Parse docblocks to JSON
    • Sugar is all documented with clean docblocks inside source files
  3. Webpack : Build final package JS file from ES6 modules codebase
  4. Let us know if you have other cool ideas around some Sugar integrations...

What Sugar does not

Sugar has some goals it try to achieve, and have also some things that it does intentionally not like:

  1. Vendor prefixing your CSS
  2. Implement polyfills like webcomponent.js, etc...
    • You will need to integrate them yourself when you need to...
  3. Force you to use his features
    • Grab what you want from the toolkit, keep the rest aside...


Sugar is an open source project and will ever be! You are more that welcomed to contribute to his development and make it more awesome every day. To do so, you have several possibilities:

  1. Share the love ❤️
  2. Declare issues
  3. Fix issues
  4. Add features
  5. Build web component

Browsers support

IE / Edge
IE / Edge
IE11+ last 2 versions last 2 versions last 2 versions

As browsers are automatically updated, we will keep as reference the last two versions of each but this component can work on older ones as well.


The code is available under the MIT license. This mean that you can use, modify, or do whatever you want with it. This mean also that it is shipped to you for free, so don't be a hater and if you find some issues, etc... feel free to contribute instead of sharing your frustrations on social networks like an asshole...

Who are Coffeekraken

We try to be some cool guys that build some cool tools to make our (and yours hopefully) every day life better.

More on who we are