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 device browsers, the default font size is 12px. The default font is"Helvetica Neue", line-height defaults to1.5。
These settings apply to<body>Element within an element.
In addition,<p>The bottom margin (margin-bottom) of elements is 1.25rem, and line-height is 1.6.
Text
The following HTML elements are rendered with independent styles set by Foundation instead of browser default styles. Click "Try it" to view online examples.
| element | Description | Online Examples |
|---|---|---|
| <h1> - <h6> | h1 - h6 headings | Try it Yourself |
| <a> | Light blue links; hovering over a link will show an underline | Try it Yourself |
| <small> | Light gray subtitle text | Try it Yourself |
| <blockquote> | Quote content module | Try it Yourself |
| <strong> | Bold text | Try it Yourself |
| <em> | Italic | Try it Yourself |
| <abbr> | Specifies abbreviations of words. Text using this element appears with a dotted underline, and a tooltip appears when hovering over it | Try it Yourself |
| <kbd> | Receives keyboard input commands:CTRL + P | Try it Yourself |
| <hr> | Horizontal line | Try it Yourself |
| <code> | Code snippet | Try it Yourself |
| <ul> | Unordered list | Try it Yourself |
| <ol> | Ordered list | Try it Yourself |
| <dl> | Description list | Try it Yourself |
Text alignment
Use CSS classes to modify text alignment:
| Class | Description | Example |
|---|---|---|
| .text-left | Left-aligned text | Try it Yourself |
| .text-right | Right-aligned text | Try it Yourself |
| .text-center | Center | Try it Yourself |
| .text-justify | Justify | Try it Yourself |
Alignment across different screen sizes
Use CSS classes to modify text alignment across different screen sizes:
| Class | Description | Example |
|---|---|---|
| Left align | ||
| .small-text-left | Left-aligned on all screen sizes | Try it Yourself |
| .small-only-text-left | Left-aligned on small screens (width less than 40em) | Try it Yourself |
| .medium-text-left | Left-aligned on screens wider than 40.0625em | Try it Yourself |
| .medium-only-text-left | Left-aligned on screens with widths between 40.0625em and 64em | Try it Yourself |
| .large-text-left | Left-aligned on screens wider than 64.0625em | Try it Yourself |
| .large-only-text-left | Left-aligned on screens with widths between 64.0625em and 90em | Try it Yourself |
| .xlarge-text-left | Left-aligned on screens wider than 90.0625em | Try it Yourself |
| .xlarge-only-text-left | Left-aligned on screens with widths between 90.0625em and 120em | Try it Yourself |
| .xxlarge-text-left | Left-aligned on screens wider than 120em | Try it Yourself |
| Right align | ||
| .small-text-right | Right-aligned on all screen sizes | Try it Yourself |
| .small-only-text-right | Right-aligned on small screens (width less than 40em) | Try it Yourself |
| .medium-text-right | Right-aligned on screens wider than 40.0625em | Try it Yourself |
| .medium-only-text-right | Right-aligned on screens with widths between 40.0625em and 64em | Try it Yourself |
| .large-text-right | Right-aligned on screens wider than 64.0625em | Try it Yourself |
| .large-only-text-right | Right-aligned on screens with widths between 64.0625em and 90em | Try it Yourself |
| .xlarge-text-right | Right-aligned on screens wider than 90.0625em | Try it Yourself |
| .xlarge-only-text-right | Right-aligned on screens with widths between 90.0625em and 120em | Try it Yourself |
| .xxlarge-text-right | Right-aligned on screens wider than 120em | Try it Yourself |
| Center align | ||
| .small-text-center | Center-aligned on all screen sizes | Try it Yourself |
| .small-only-text-center | Center-aligned on small screens (width less than 40em) | Try it Yourself |
| .medium-text-center | Center-aligned on screens wider than 40.0625em | Try it Yourself |
| .medium-only-text-center | Center-aligned on screens with widths between 40.0625em and 64em | Try it Yourself |
| .large-text-center | Center-aligned on screens wider than 64.0625em | Try it Yourself |
| .large-only-text-center | Center-aligned on screens with widths between 64.0625em and 90em | Try it Yourself |
| .xlarge-text-center | Center-aligned on screens wider than 90.0625em | Try it Yourself |
| .xlarge-only-text-center | Center-aligned on screens with widths between 90.0625em and 120em | Try it Yourself |
| .xxlarge-text-center | Center-aligned on screens wider than 120em | Try it Yourself |
| Justify | ||
| .small-text-justify | Justified on all screen sizes | Try it Yourself |
| .small-only-text-justify | Justified on small screens (width less than 40em) | Try it Yourself |
| .medium-text-justify | Justified on screens wider than 40.0625em | Try it Yourself |
| .medium-only-text-justify | Justified on screens with widths between 40.0625em and 64em | Try it Yourself |
| .large-text-justify | Justified on screens wider than 64.0625em | Try it Yourself |
| .large-only-text-justify | Justified on screens with widths between 64.0625em and 90em | Try it Yourself |
| .xlarge-text-justify | Justified on screens wider than 90.0625em | Try it Yourself |
| .xlarge-only-text-justify | Justified on screens with widths between 90.0625em and 120em | Try it Yourself |
| .xxlarge-text-justify | Justified on screens wider than 120em | Try it Yourself |
Other
| Class | Description | Example |
|---|---|---|
| .left | Element floats left | Try it Yourself |
| .right | Element floats right | Try it Yourself |
| .clearfix | Clear floats - must be added to the parent element of floated elements | |
| .hide | Hidden elements (CSSdisplay: none) |
Try it Yourself |
| .list-inline | Set all elements on the same line | Try it Yourself |
| .lead | Make the <p> element more prominent | Try it Yourself |
| .subheader | Set light-colored <h1> - <h6> elements | Try it Yourself |