Cocobits is a foundational system that empowers designers to build elegant user experiences. Responsive, interchangeable utility classes allow flexibility, consistency and ease-of-use for any web applications. Influenced by Object-Oriented CSS principles and functional CSS, Cocobits uses SASS variables and mixins and strives to meet the highest WCAG accessibility standards.


  • Responsive, mobile-first and accessible by default
  • Flexible and interchangeable utility classes
  • Base-8 spacing for consistency and dynamic vertical and horizontal rhythm
  • Font-size, line-height and weight options for readability
  • Color system for meaningful content and interaction signals



After installing npm and node, you can install cocobits with command:

$ npm install cocobits

Quick Start

Include the following link in the head of your base HTML file:

<link rel="stylesheet" href="">

To use the JavaScript enabled component utility classes, include the following link before the </body> tag of your base HTML file:

<script src=""></script>
In this section