@cryptohub/coco

v2.1.2

Published

2 years ago

Modern CSS framework based on Flexbox

Downloads

0High
0Medium
0Low

coreorg

css sass flexbox responsive framework

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/[email protected]/dist/css/coco.min.css" />

Using SRI with the exact version

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/cryptohub-digital/[email protected]/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

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

Yarn

yarn add @cryptohub/coco

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.