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

COCO

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

Install

NPM

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

Yarn

yarn add https://github.com/CryptoHub-place/coco

Bower

bower install https://github.com/CryptoHub-place/coco#master --save

Import

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'

Linking

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

Meteor

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

client/styles/main.scss

@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

css/styles.sass

@import "coco/coco.sass"

_config.yml

include:
  - 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('https://fonts.googleapis.com/css?family=Nunito:400,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>
</div>

Sticky footer

Sticky footer with one class

<body class="has-sticky-footer">
  <header></header>
  <main></main>
  <footer></footer>
</body>

em.oji

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.

Documentation

Browse the online documentation in WIKI page or cococss.com.

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.