Cardinal is a small “mobile first” CSS framework for front-end developers who build responsive web applications.

What?

The purpose of this framework is to make it easier to rapidly prototype, build, scale, and maintain CSS for responsive web applications. Cardinal omits many aesthetic design decisions that often bog down larger, more complicated CSS frameworks, leaving the design and creativity up to you.

Cardinal focuses on performance, accessibility, and readability first. It’s a starting point with a minimal file structure and useful CSS styles that you will want to customize and build upon to suit your application or project.


Base

Cardinal starts with some global styles and normalization which lay the foundation for building responsive applications.

normalize.css

Cardinal includes normalize.css to render HTML elements consistently across browsers.

CSS box model

The default box-sizing behavior is altered to fix the flawed CSS box model.

Viewport resizing

The appropriate HTML meta tag and CSS @viewport declarations are present.

Anchor links

Global styles for anchor links are set to improve readability across browsers.


Typography

Instead of trying to maintain a baseline grid, Cardinal favors a modular scale, unit-less line heights, and the power of the REM unit.

Modular scale

The values for Cardinal’s modular scale are calculated with this tool. It uses the base font size (in pixels) as the “ideal font size,” the base line-height (also in pixels) as the “important number,” and the “perfect fourth” interval found commonly in music as the “meaningful ratio”.

This gives you a nice range of values to use throughout your web application. Below are some values that I use often when sizing typography in Cardinal:

REMs Pixels
4.209rem 67.339px
3.157rem 50.517px
2.369rem 37.897px
2rem 31.992px
1.777rem 27.430px
1.5rem 24px
1.333rem 21.328px
1.125rem 18.005px
1rem (base) 16px (base)
0.844rem 13.507px
0.75rem 12.003px
0.475rem 7.602px
0.356rem 5.703px
0.317rem 5.068px
0.238rem 3.802px
0.15rem 2.407px
0.064rem 1.017px

Remember: Pixel percentages are always rounded to whole values in web browsers.

Headings

Using headings effectively across devices can be tricky, which is why Cardinal sets some sensible defaults that automatically resize them for you.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

There are also some helper classes that you can use to change the sizes of your headings (eg. if you want an <h2> to look like an <h5>).

Class Heading
.h6

Heading 1

.h5

Heading 2

.h4

Heading 3

.h3

Heading 4

.h2

Heading 5

.h1

Heading 6

Type variations

As of Cardinal 2.0.0, some type variations have been added so that you can introduce hierarchy and alternative styles to your content.

Crossbars

<header style="overflow:hidden">
    <h3 class="crossbars">Hello World!</h3>
</header>

Hello World!

This subheading style centers the text and adds gray bars on each side of the content. It is typically used with headings or subheadings, and requires it’s parent element to have overflow: hidden so that the gray bars do not break outside the parent.

Drop-caps

<p class="drop-cap">Drop caps float and resize the first letter in an element to make it stand out from the rest of the text. You see this style implemented often in printed books.</p>

Drop caps float and resize the first letter in an element to make it stand out from the rest of the text. You see this style implemented often in printed books.

Run-ins

<p><span class="run-in">Running-in subheadings are another technique</span> you see in books all the time, where the first line or couple of lines in a new chapter is given a different style treatment from the rest of the body text.</p>

Running-in subheadings are another technique you see in books all the time, where the first line or couple of lines in a new chapter is given a different style treatment from the rest of the body text.

Small-caps

<h4 class="small-caps">I’m in small caps!</h4>

I’m in small caps!

This technique is typically used on headings to give a body of text some hierarchy and an alternative style from the default capitalization.

Non-alphabet symbol dividers

<hr class="symbol">

As of Cardinal 2.0.0, there is an alternative style for <hr> elements that uses a symbol (⁂, by default) instead of a hard line that spans the width of its parent.

This sort of divider may be more appropriate in other situations, or layouts that already have a lot of hard lines.


Layout

Cardinal has a simple responsive grid system. It also contains classes for common layout modules and utilities, like page wrappers, floating classes, and clearfixing.

Strips

A .strip element spans the entire width of its parent.

Wrappers

A .wrapper element has a maximum width, and is given top & bottom padding if nested inside a .strip element.

Islands

An .island is a content block that you want to stand out from its surrounding area.

Wells

A .well is a content block that you want to appear sunken beneath its surrounding area.

Responsive grid system

1
2
3
4
5
6
<div class="grid grid-gutter-half">
    <div class="grid-item one-sixth"><div class="island">1<div></div>
    <div class="grid-item one-sixth"><div class="island">2<div></div>
    <div class="grid-item one-sixth"><div class="island">3<div></div>
    <div class="grid-item one-sixth"><div class="island">4<div></div>
    <div class="grid-item one-sixth"><div class="island">5<div></div>
    <div class="grid-item one-sixth"><div class="island">6<div></div>
</div>

Cardinal’s grid system has 6 columns by default, and uses fluid item widths and fixed gutters. Nesting grid elements is a breeze, and you can change how a grid item behaves with classes.

Grid item widths have percentage values, and the gutters have rem values. The classes for grid item widths are not grid-specific, on purpose, so that they can be used outside of grids, too.

Breakpoints

You can change how a grid behaves at common breakpoints. Cardinal uses .medium-* to represent mid-sized devices (eg. a tablet or small laptop), and .large-* to represent larger devices (eg. a tablet in landscape orientation or machines that rest primarily on your desk).

By default, the min-width values for the breakpoints are set to 600px and 960px, respectively. You are encouraged to modify these values to suit your project.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Embedded content

Cardinal also defines sensible default styles for embedded content. For instance, <audio>, <img>, and <video> tags are all given fluid properties.

HTML5 audio

Image

HTML5 video


Syntax

If your responsive application features code snippets or keyboard shortcuts, Cardinal has some basic styles that you can use immediately.

Keyboard shortcuts

Styles are automatically applied to the <kbd> HTML element.

+ Space

Inline code

Styles are automatically applied to the <code> HTML element.

color: #000;

Code blocks

When you use <code> tags nested within <pre> tags, you get a neatly-styled block of code.

Here is some lovely code.

Tables

Tables can be tricky to style across different devices. Cardinal includes some simple table styles and classes to get you going.

The <table> element is first given a basic layout with flexible table cells, like so:

Default, no classes
# Thing 1 Thing 2 Thing 3
1 1246 Hello true
2 4652 Goodbye false
3 1657 Cheers false
4 1498 Beers true
5 3286 Awesome true

By adding headings, footers, and classes, you can introduce borders and backgrounds to your tables, too:

.table-border
# Thing 1 Thing 2 Thing 3
1 1246 Hello true
2 4652 Goodbye false
3 1657 Cheers false
4 1498 Beers true
5 3286 Awesome true
.table-border-rows
# Thing 1 Thing 2 Thing 3
1 1246 Hello true
2 4652 Goodbye false
3 1657 Cheers false
4 1498 Beers true
5 3286 Awesome true
.table-border-cells
# Thing 1 Thing 2 Thing 3
1 1246 Hello true
2 4652 Goodbye false
3 1657 Cheers false
4 1498 Beers true
5 3286 Awesome true
.table-border.table-stripes, with <thead> and <tfoot>
# Thing 1 Thing 2 Thing 3
1 1246 Hello true
2 4652 Goodbye false
3 1657 Cheers false
4 1498 Beers true
5 3286 Awesome true
# Thing 1 Thing 2 Thing 3

Forms

Common form elements are given very basic structure and styles. Most inputs, select boxes, and textareas are styled as 100% width block elements (with the exception of radio and checkboxes).

Basic form



You can also add borders around <fieldset> elements.

Fieldset with a border

You can also make use of Cardinal’s grid system and width classes to build some basic form layouts.

Form with a grid layout and fieldset border





Buttons

Buttons are common web UI components, and some minimal button styles are available with Cardinal.

Simply add the .button class to an element to give it the necessary styling. This provides the base styles which can be further modified with additional classes.

<button class="button">Button text</button>

Styles

States

Sizes


Miscellaneous

Main

/* ================================================================== *\
   Main ($main)
\* ================================================================== */

This is where you place all of your custom, application-specific styles. Go nuts!

Print

These styles make your application more printer-friendly. They were also extracted directly from the HTML5 Boilerplate project, and inlined to avoid an extra HTTP request.

JavaScript

Cardinal ships with a copy of the latest version of jQuery and Modernizr, which are referenced in index.html. The plugins.js file includes a small function to avoid console errors in browsers that lack a console. An asynchronous Google Analytics snippet is also present at the bottom of index.html.


LESS / Grunt

As of version 2.1.0, Cardinal supports the LESS preprocessor (thanks @brandonb927), and includes a simple Grunt build process to compile and minify CSS/JS files.

If you want to use Grunt to compile your LESS code, you must have Node, Grunt, and Grunt’s dependencies already installed on your machine.

npm install && npm install -g grunt-cli

To compile your LESS files and watch for future changes, simply run the grunt command from the root directory of your project. This will build and output your LESS code with proper vendor prefixes to the dist/ directory.

Run the grunt dist command to compile and minify your finished code to the dist/ directory.


Known issues

“display: inline-block;” whitespace hack

More info here

The font-size: 0; hack is used on the .grid element to remove the whitespace between .grid-item elements in modern browsers.

However, this hack does not work in older versions of Safari, Android, and Internet Explorer (Safari < 6, Android < 4.2, IE8 and below).

If you need to support these older browsers, remove the white space in between each .grid-item manually, in the HTML, like so:

<div class="grid">
    <div class="grid-item medium-one-half large-one-fourth"></div
    ><div class="grid-item medium-one-half large-one-fourth"></div
    ><div class="grid-item medium-one-half large-one-fourth"></div
    ><div class="grid-item medium-one-half large-one-fourth"></div>
</div>

Alternatively, if you use a build process (and you should) to minify your HTML for the production/live site, then the problematic whitespace is removed anyways.

Google Maps

More info here

Cardinal defines all images to have max-width: 100%, which can interfere with the Google Maps “info window.” To fix this issue, you must change 100% to none for all images inside your Google Maps, like so:

img[src*="gstatic.com/"],
img[src*="googleapis.com/"] {
    max-width: none;
}

box-sizing: border-box; in IE9

There is a bug in IE9 (big surprise) when box-sizing: border-box;, position: fixed;, and overflow: auto; are declared on the same element. The scrollbar’s width is subtracted twice, making the element’s width incorrect.

To fix this, change the box-sizing value to content-box instead of border-box, and voila:

/* Fix vertical scrollbar issue in IE9 */
.ie9 .menu {
    box-sizing: content-box;
}

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+

What about IE8?

By including the REM unit polyfill and Scott Jehl’s Respond.js, Cardinal should work in IE8, but no guarantees... it is Internet Explorer we’re talking about, here!