What is Cardinal?

Cardinal is a modular, “mobile-first” CSS framework built with performance and scalability in mind.

The purpose of this framework is to make it easier for front-end web developers to prototype, build, scale, and maintain CSS for responsive websites, user interfaces, and applications. Cardinal omits many aesthetic design decisions that often bog down other CSS frameworks (which are often UI toolkits, not frameworks), leaving the design and creativity up to you.


  • “Mobile-first” CSS written for the LESS preprocessor.
  • normalize.css baked-in.
  • Sensible global styles, variables, and useful mixins.
  • A flexible grid system and encapsulated styles for common UI objects (buttons, forms, tables, etc.)
  • A collection of utility classes optimized for great gzip compression.
  • The entire framework, minified and gzipped, clocks in at a mere 11.13kB.

Getting Started

The fastest way to get up-and-running with Cardinal is by using the Bower package manager, like so:


cd your-project-directory
bower install --save cardinal

Direct Download

If you do not want to use a package manager to integrate Cardinal into your project, you can also download it directly:

Build from Source

To do so, you need to already have Node.js and npm installed on your machine. Cardinal uses Gulp to build and watch the CSS files.

git clone git@github.com:cbracco/cardinal.git
cd cardinal
npm install

Download the Zip

You can also download the .zip file and proceed however you wish. Include the minified CSS file in the <head> of your project, or modify the LESS files directly (not recommended, since it will be difficult to update to future versions). It’s your world!

Download the zip

Browser support

Cardinal supports most modern browsers:

  • Google Chrome 25+
  • Mozilla Firefox 19+
  • Safari 6.0+
  • iOS Safari 4.0+
  • Opera 12.1+
  • Android 4.2+
  • Internet Explorer 9+