Skip to content
Satoshi+ edited this page Dec 28, 2018 · 10 revisions


COCO is an open source CSS framework based on Flexbox without any piece of JavaScript.

100% Responsive 💻 Modular 🗂 Modern 💈 Free ⚗️
Designed for multi device support Import what you need Built with flexbox Open Source



npm install CryptoHub-place/coco#master --save


yarn add


bower install --save


After installation, you can import the CSS file into your project using this snippet:

Normal CSS version

@import 'coco/dist/css/coco.css'

Minified CSS version

@import 'coco/dist/css/coco.min.css'

SASS version

@import 'coco/dist/sass/coco.sass'

SCSS version

@import 'coco/dist/scss/coco.scss'


You can install and connect node_modules distribution with symbolic link for various platforms. Such as:


Note: install meteor plug-in first fourseven:scss

meteor add fourseven:scss
meteor npm install CryptoHub-place/coco#master --save
ln -sf ../node_modules/@cryptohub/coco/dist/scss imports/coco


@import "{}/imports/coco/coco.scss";

Jekyll aka Github pages :octocat:

npm install CryptoHub-place/coco#master --save
ln -sf ../node_modules/@cryptohub/coco/dist/sass _sass/coco


@import "coco/coco.sass"


  - node_modules/@cryptohub/coco/dist/sass

Customize distribution

COCO is a CSS framework. Output is a single CSS file coco.css or SASS distribution.

You can either use that file, "out of the box", or download the Sass source files to customize the variables.

// Import a Google Font
@import url(',700')

// Set your brand colors
$purple: #8A4D76
$pink: #FA7C91
$brown: #757763
$beige-light: #D0D1CD
$beige-lighter: #EFF0EB

// Update COCO's global variables
$family-sans-serif: "Nunito", sans-serif
$grey-dark: $brown
$grey-light: $beige-light
$primary: $purple
$link: $pink

// Update some of COCO's component variables
$control-border-width: 2px
$input-background-color: $beige-lighter
$input-border-color: transparent
$input-shadow: none

// Import the rest of COCO
@import "coco/sass/coco.sass"

You can found default variables in dist/default/vars.scss

Get started

The simplest grid system

Just add columns, they will resize themselves

<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>

Sticky footer

Sticky footer with one class

<body class="has-sticky-footer">


You can use Emoji as icons with effects on it

<em class="oji flat">📥</em>

Browser Support

COCO uses autoprefixer to make (most) Flexbox features compatible with earlier browser versions. According to Can I use, COCO is compatible with recent versions of:

  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

Internet Explorer (10+) is only partially supported.


Browse the online documentation in WIKI page or

Copyright and license

Code copyright 2018 Crypto ▪ Hub, Rastislav; Jeremy Thomas. Code released under the MIT license.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.