Build more with less.
- What is Cardinal?
- Principles
- Features
- Dependencies
- Getting Started
- Browser Support
- Contributing
- Versioning
- License
- Colophon
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
- normalize.css
- 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
If you would like to install Cardinal with the Bower package manager tool, you will first need to install Node.js on your machine or server. Once you have Node.js installed, make sure npm is installed (info here), and use it to install Bower, like so:
npm install -g bower
Also, Cardinal depends on the awesome tool Autoprefixer, which adds the proper vendor prefixes that provide the specified browser support for this project. This way, you don’t have to worry about manually including the correct prefixes while writing LESS/CSS. You are encouraged to incorporate Autoprefixer into your build process (this is easy to do with tools like Grunt or Gulp).
There are several ways that you can use Cardinal in your new and existing web projects.
The fastest way to get up-and-running with Cardinal is by using a package manager, like so:
Bower
Run the following commands from your terminal:
cd your-project-directory
bower install --save cardinal
Once installed, you can find Cardinal here:
your-project-directory
│
└───bower_components
│
└───cardinal
With Bower, you can easily grab the latest version of Cardinal by running the following command:
bower update cardinal
NOTE: This is the recommended way to use Cardinal. It should never be edited directly so you can keep it updated. Instead of modifying Cardinal’s source, you are encouraged @import Cardinal into your own your-project.less file and create your own .less files where you can override default variables and extend styles.
There is also a LESS.js plugin available for Cardinal, created and maintained by @bassjobsen. You can use this plugin to include Cardinal in your project before your custom project code.
Installation
npm install less
npm install less-plugin-cardinal
Usage
lessc custom.less --cardinal
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 protected]: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!
Cardinal supports most modern browsers:
- Google Chrome 25+
- Mozilla Firefox 19+
- Safari 6.0+
- iOS Safari 6.0+
- Opera 12.1+
- Android 4.2+
- Internet Explorer 9+
Is something broken? Do you have ideas or feature requests? Please submit an issue here on GitHub. Or, if you are feeling especially motivated, write some code and submit a pull request!
IMPORTANT: Before doing a bunch of work, please consult the CONTRIBUTING.md document, which gives detailed instructions on how to contribute to this project. If you do not follow the instructions, your code will probably not make it into this project.
Cardinal will be maintained using the Semantic Versioning guidelines. From here on out, releases will be numbered using the following format:
major.minor.patch
- Breaking backwards compatibility increments
major, while resettingminorandpatch. - New code that does not break backwards compatibility increments
minor, while resettingpatch. - Bug fixes and other small changes increment
patch.
Cardinal is licensed under the MIT Open Source license. For more information, see the LICENSE.md file in this repository.
Cardinal is a project by @cbracco.