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>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
<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.h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
h1. Bootstrap heading Secondary text
h2. Bootstrap heading Secondary text
h3. Bootstrap heading Secondary text
h4. Bootstrap heading Secondary text
h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
You can use the mark tag to highlight text.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
rendered as bold text
rendered as italicized text
Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
No wrap text.
Lowercased text.
Uppercased text.
Capitalized text.
attr
HTML
Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890 Full Name
first.last@example.com
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- item
- item
- item
- item
- item
- item
- item
- item
- title
- item
- title
- item
For example,
<section> should be wrapped as inline.
To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,
<p>Sample text here...</p>
y = mx + b
This text is meant to be treated as sample output from a computer program.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
« Prev Post
Next Post »