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

CDN

Latest version

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/cryptohub-digital/coco/dist/css/coco.min.css" />

Minor updates and patch fixes within a major version

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/cryptohub-digital/coco@2/dist/css/coco.min.css" />

Patch fixes within a minor version

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/cryptohub-digital/coco@2.0/dist/css/coco.min.css" />

Using SRI with the exact version

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/cryptohub-digital/coco@2.0.0/dist/css/coco.min.css" integrity="sha384-{hash}" crossorigin="anonymous" />

Please, replace {hash} with hash generated for chosen specific version. You can use for example this SRI Hash Generator.

Install

NPM

npm i @cryptohub/coco

or

npm install "https://github.com/cryptohub-digital/coco.git#semver:^2.0" --save

Yarn

yarn add @cryptohub/coco

or

yarn add "https://github.com/cryptohub-digital/coco.git#semver:^2.0"

Bower

bower install cryptohub-digital/coco

Import

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

CSS version

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

Minified CSS version

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

SASS version

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

If you want to use a right-to-left version, just append -rtl after the name.

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"

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>

Features

Sticky footer

Sticky footer with one class

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

Tabs

Tabs without the JavaScript

<div class="tabs">
  <ul>
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
  </ul>
</div>
<section class="tab-content">
  <article id="tab-2">Content of second tab</article>
  <article id="tab-3">Content of third tab</article>
  <!-- Default tab -->
  <article id="tab-1">Content of first tab</article>
</section>

Hamburger menu

Hamburger menu without the JavaScript

Add <input type="checkbox" id="coco-navbar-toggle" aria-hidden="true" /> into the .navbar
Change link to label: <label for="coco-navbar-toggle" role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">...</label>
Optional: Your menu id should be the same as defined in label[data-target] for compatibility with JavaScript
Test the hamburger menu

em.oji

You can use Emoji as icons with effects on it

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

Custom theme

You can create your theme and add your variables into: style/utilities/themes.sass

To set the theme, please add into HTML tag data-theme="theme".

Natively we are supporting the light/dark theme.

Theme switch

If you would like the switch between dark/light theme, you can put it in nav pane.

To implement, start with:

Add input directly after the body tag: <input type="checkbox" id="coco-theme-switch" />
Add label into path input#coco-theme-switch[type=checkbox] ~ header > nav > .navbar-menu > div > div > label[for=coco-theme-switch], with the following content:

<label for="coco-theme-switch">
  <div class="sun"></div>
</label>

Note: Theme switch is dependent on :has().

Current version

You can call the current version with the following code:

<span class="coco version">version </span>

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 on the Online manual.

Informational notice

Why are we putting underscore in front of the file and when to do so?

A Sass file starting with an underscore is partial. Files with _ (underscore) are ignored by the compiler.

Name		Name	Last commit message	Last commit date
Latest commit History 96 Commits
.github		.github
dist		dist
style		style
test		test
.editorconfig		.editorconfig
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
bower.json		bower.json
gulpfile.js		gulpfile.js
package.json		package.json

License

bchainhub/coco

Folders and files

Latest commit

History

Repository files navigation