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.
Cardinal adheres to the following principles whenever possible:
- Open / Closed: Styles should be open for extension, but closed for modification. Avoid styles that are highly specific to context.
- Reuse: Content-agnostic, modular styles allow for design flexibility and will have a longer lifespan.
- Don’t Make Assumptions: Try not to make too many assumptions too early, because design and development are both iterative processes.
- Clarity Over Cleverness: Avoid creating styles that have ambiguous applications, or are rarely used. Obvious styles are easier for humans to internalize, and will be more widely adopted.
- “Mobile-first” CSS written for the LESS preprocessor.
- 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.27kB.
The fastest way to get up-and-running with Cardinal is by using a package manager, like so:
To install Cardinal with Bower, run the following command(s) from your terminal:
cd your-project-directory bower install --save cardinal
To install Cardinal with npm, run the following command(s) from your terminal:
cd your-project-directory npm install --save cardinalcss
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 email@example.com:cbracco/cardinal.git cd cardinal npm install gulp
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!
The easiest way to include Cardinal in your project is to include the entire thing before your project files, like so:
// // Vendor // @import url("../../path/to/bower_components/cardinal/cardinal.less"); // // Project // @import url("project-file.less");
However, you don’t have to use the entire Cardinal framework. The only required partials are located in the
// // Vendor // // // Base // // These variables, mixins, and styles are required if you want to use this // framework, and they should be included in the following order. // // Base -> Variables @import url("base/variables.less"); // Base -> Mixins @import url("base/mixins/to-rem.less"); @import url("base/mixins/media-queries.less"); @import url("base/mixins/antialiasing.less"); @import url("base/mixins/clearing.less"); @import url("base/mixins/font-face.less"); @import url("base/mixins/momentum-scrolling.less"); @import url("base/mixins/text-truncate.less"); @import url("base/mixins/vertically-centered.less"); // Base -> Normalize @import url("base/normalize.less"); // Base -> Reset @import url("base/reset.less"); // Base -> Debug (DO NOT USE THIS STYLESHEET IN PRODUCTION!) //@import url("base/debug.less"); // Base -> Default Styles @import url("base/root.less"); @import url("base/anchors.less"); @import url("base/text-elements.less"); @import url("base/headings.less"); @import url("base/lists.less"); @import url("base/horizontal-rules.less"); @import url("base/blockquotes.less"); @import url("base/code.less"); @import url("base/embedded-content.less"); @import url("base/form-elements.less"); @import url("base/tables.less"); @import url("base/print.less");
Beyond that, you can use whatever grid system, components, and utilities you would like. The
base/ directory just sets some good base styles for the framework.
After getting started and including Cardinal, you will probably want to begin customizing it to suit your project. Cardinal has a bunch of LESS variables located in the
base/variables.less file that can be tweaked to your needs. >These variables should not be edited directly. The recommended way to make changes to Cardinal LESS variables is to create your own project-specific variables file (e.g.
project-variables.less), and override the default variables in this file, like so:
// project-variables.less // Typography -> Font Sizes -> Base $font-size: 17; // // Typography -> Line height // $line-height: 26;
This file should be included in your main LESS file after you’ve included Cardinal.
There is a
README.md file included in each major directory of this project that further details the code located in those directories.
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+
Cardinal is licensed under the MIT Open Source license. For more information, see the LICENSE.md file in this repository.