Coffeekraken Kraken

made right!

Working smoothly in team is as hard as working alone on a big project.
We think that the right tool at the right place can solve this once and for all...

Who is Coffeekraken

We are a young collective of front-end creative developers with one goal in mind. Build tools to make every team working day life better. This is our first and only concern. All our tools are build around that purpose.
All what we provide are some cool tools that you can use the way you want. These tools features cover a large scope of the front-end workflow (styleguide generation, colors/fonts management, etc...). You can use only the parts that you need and let the rest aside...

Discover more on Coffeekraken and how to join us
Who are Coffeekraken

Our tools

Webcomponents illustration


Building blocks

Coffeekraken provide a bunch of webcomponents that cover multiple areas like datepicker, sticky, google maps, form validation, dropdown, drawer and more... Some say that webcomponents are the future, we say that the future is NOW.

Check it out!
Sugar - Powerful SASS & JS toolkit


SASS & JS toolkit

Powerful toolkit that gives you access to a lot of SASS mixins, functions, colors and fonts management as well as a lot of javascript features like DOM helpers, classes, utils and webcomponents.

Check it out!
Carpenter - Styleguide and documentation


SASS grid system

Fully customizable SASS grid system that let you create from simple 12 columns layouts, to any columns numbers complexe ones with ease. Support both default (float) and flexbox based systems.

Check it out!

HTML Boilerplate

Clean and fully featured (webpack, babel, node-sass) boilerplate

Check it out!

Scripts stack

Display nice and clean output when using npm/yarn scripts

Check it out!

Code playground

Nice code playground that let you play with some html, js and css

Check it out!


Nice web interface that display all your website styleguide.

Check it out!

React boilerplate

React boilerplate based on react-scripts, sugar, gridle, redux, and more...

Check it out!

React native boilerplate

React native boilerplate based on expo, redux, redux-thunk, redux-saga and more...

Check it out!

Redux Web Worker

Redux middleware that let you run your tasks inside a web worker with ease.

Check it out!

Coffeekraken kitchen-sink

Discover what the Coffeekraken stack has to offer through our kitchen-sink website...

Let's get started!
Screenshot of

Open source is our roadmap

We strongly believe that the way to success is by helping each others. That’s why our primary target for our tools is to be published as fully open source projects that you can (and we hope you will) modify, enhance and share!

Check out how to contribute to our vision...

Contribute to Coffeekraken

Delare/Fix issues

Declare/Fix issues

Everyone will be greatful to you

This is the a starting contribution you can make to the project. No need to be an expert to contribute to coffeekraken. We just need you to stick to some simple rules in order to keep things clean...

How to declare/fix an issue...
Add features

Add features

Every step forward is important

Adding features is another great way to contribute to our project. That's what make the tools better and better! By doing this, you will also be more confortable knowing how the tools are actually working...

How to add a feature...
Share the love

Share the love

The more we are, the better we become

Not so much guidelines here. At least, if you want to share some thoughts about our work, positive or negative, try to stay constructive... Keep in mind that these tools are provided for free...

I love Coffeekraken!

Coffeekraken codebook

Discover all the Coffeekraken packages with ease using our codebook interface that provide demos, documentation, etc...

Let's get started!
Screenshot of

Here's all our repositories

Please wait while loading...

© Coffeekraken 2017
All our tools are published under MIT license