Foundation CSS Reference Manual
Foundation Default Settings
Foundation uses the browser's default font size (font-size: 100%). For most desktop browsers, the default font size is 16px. For mobile browsers, the default font size is 12px.
The default font is "Helvetica Neue", and the line-height is 1.5.
These settings apply to elements within the <body> element.
Additionally, the <p> element has a bottom margin of 1.25rem and a line-height of 1.6.
Text
The following HTML elements have been styled by Foundation independently and do not use the browser's default styles. Click "Try it" to see live examples.
| Element | Description | Example |
|---|---|---|
<h1> - <h6> |
h1 - h6 headings | Try it |
<a> |
Light blue link, underline on hover | Try it |
<small> |
Light gray subtitle text | Try it |
<blockquote> |
Blockquote module | Try it |
<strong> |
Bold text | Try it |
<em> |
Italic | Try it |
<abbr> |
Abbreviation of a word, dotted underline on text, tooltip on hover | Try it |
<kbd> |
Keyboard input instruction: CTRL + P | Try it |
<hr> |
Horizontal line | Try it |
<code> |
Code snippet | Try it |
<ul> |
Unordered list | Try it |
<ol> |
Ordered list | Try it |
<dl> |
Descriptive list | Try it |
Text Alignment
Use CSS classes to modify text alignment:
| Class | Description | Example |
|---|---|---|
.text-left |
Left-aligned text | Try it |
.text-right |
Right-aligned text | Try it |
.text-center |
Centered text | Try it |
.text-justify |
Justified text | Try it |
Alignment for Different Screen Sizes
Use CSS classes to modify text alignment for different screen sizes:
| Class | Description | Example |
|---|---|---|
| Left Align | ||
.small-text-left |
Left-aligned on all screen sizes | Try it |
.small-only-text-left |
Left-aligned on small screens (width < 40em) | Try it |
.medium-text-left |
Left-aligned on screens wider than 40.0625em | Try it |
.medium-only-text-left |
Left-aligned on screens between 40.0625em and 64em | Try it |
.large-text-left |
Left-aligned on screens wider than 64.0625em | Try it |
.large-only-text-left |
Left-aligned on screens between 64.0625em and 90em | Try it |
.xlarge-text-left |
Left-aligned on screens wider than 90.0625em | Try it |
.xlarge-only-text-left |
Left-aligned on screens between 90.0625em and 120em | Try it |
.xxlarge-text-left |
Left-aligned on screens wider than 120em | Try it |
| Right Align | ||
.small-text-right |
Right-aligned on all screen sizes | Try it |
.small-only-text-right |
Right-aligned on small screens (width < 40em) | Try it |
.medium-text-right |
Right-aligned on screens wider than 40.0625em | Try it |
.medium-only-text-right |
Right-aligned on screens between 40.0625em and 64em | Try it |
.large-text-right |
Right-aligned on screens wider than 64.0625em | Try it |
.large-only-text-right |
Right-aligned on screens between 64.0625em and 90em | Try it |
.xlarge-text-right |
Right-aligned on screens wider than 90.0625em | Try it |
.xlarge-only-text-right |
Right-aligned on screens between 90.0625em and 120em | Try it |
.xxlarge-text-right |
Right-aligned on screens wider than 120em | Try it |
| Center Align | ||
.small-text-center |
Centered on all screen sizes | Try it |
.small-only-text-center |
Centered on small screens (width < 40em) | Try it |
.medium-text-center |
Centered on screens wider than 40.0625em | Try it |
.medium-only-text-center |
Centered on screens between 40.0625em and 64em | Try it |
.large-text-center |
Centered on screens wider than 64.0625em | Try it |
.large-only-text-center |
Centered on screens between 64.0625em and 90em | Try it |
| .xlarge-text-center | Center-aligned on screens wider than 90.0625em | Try it |
| .xlarge-only-text-center | Center-aligned on screens between 90.0625em and 120em | Try it |
| .xxlarge-text-center | Center-aligned on screens wider than 120em | Try it |
| Justify | ||
| .small-text-justify | Justified on all screen sizes | Try it |
| .small-only-text-justify | Justified on small screens (width less than 40em) | Try it |
| .medium-text-justify | Justified on screens wider than 40.0625em | Try it |
| .medium-only-text-justify | Justified on screens between 40.0625em and 64em | Try it |
| .large-text-justify | Justified on screens wider than 64.0625em | Try it |
| .large-only-text-justify | Justified on screens between 64.0625em and 90em | Try it |
| .xlarge-text-justify | Justified on screens wider than 90.0625em | Try it |
| .xlarge-only-text-justify | Justified on screens between 90.0625em and 120em | Try it |
| .xxlarge-text-justify | Justified on screens wider than 120em | Try it |
Other
| Class | Description | Example |
|---|---|---|
| .left | Floats element to the left | Try it |
| .right | Floats element to the right | Try it |
| .clearfix | Clears floats - must be added to the parent element of floated elements | |
| .hide | Hides element (CSS display: none) | Try it |
| .list-inline | Sets all elements on the same line | Try it |
| .lead | Makes <p> element more prominent | Try it |
| .subheader | Sets lighter color for <h1> - <h6> elements | Try it |