@cryptohub/coco
Advanced tools
Readme
| 100% Responsive 💻 | Modular 🗂 | Modern 💈 | Free ⚗️ |
|---|---|---|---|
| Designed for multi device support | Import what you need | Built with flexbox | Open Source |
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.
npm i @cryptohub/coco
or
npm install "https://github.com/cryptohub-digital/coco.git#semver:^2.0" --save
yarn add @cryptohub/coco
or
yarn add "https://github.com/cryptohub-digital/coco.git#semver:^2.0"
bower install cryptohub-digital/coco
After installation, you can import the CSS file into your project using this snippet:
@import '@cryptohub/coco/dist/css/coco.css'
@import '@cryptohub/coco/dist/css/coco.min.css'
@import '@cryptohub/coco/dist/sass/coco.sass'
If you want to use a right-to-left version, just append -rtl after the name.
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"
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 with one class
<body class="has-sticky-footer">
<header></header>
<main></main>
<footer></footer>
</body>
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 without the JavaScript
<input type="checkbox" id="coco-navbar-toggle" aria-hidden="true" /> into the .navbar<label for="coco-navbar-toggle" role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">...</label>id should be the same as defined in label[data-target] for compatibility with JavaScriptYou can use Emoji as icons with effects on it
<em class="oji flat">📥</em>
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.
If you would like the switch between dark/light theme, you can put it in
navpane.
To implement, start with:
<input type="checkbox" id="coco-theme-switch" />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().
You can call the current version with the following code:
<span class="coco version">version </span>
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:
Internet Explorer (10+) is only partially supported.
Browse the online documentation on the Online manual.
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.
Code copyright 2018 Crypto ▪ Hub®; Jeremy Thomas. Code released under the CORE license.
FAQs
Modern CSS framework based on Flexbox
We found that @cryptohub/coco demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).
Security News
LDAPjs, an LDAP Client and Server API for Node.js, was decommissioned after its maintainer received an abusive email from a user, raising concerns about this form of abuse as a potential attack vector.