Foundation CSS Reference
Foundation defaults
Foundation to use the browser default font size ( font-size:100% ). For most desktop browser device, the default font size is 16px. For browser for mobile devices, the default font size is 12px. The default font is "Helvetica Neue" , Line-height defaults to 1.5 .
These settings are applied to <body> element within the element.
In addition, <p> outer element and the bottom of the distance (margin-bottom) is 1.25rem, line-height of 1.6.
text
The following HTML elements, Foundation set up a separate style rendering it will not use the browser's default style. Click "try" to view online instance.
| element | description | Online examples |
|---|---|---|
| <H1> - <h6> | h1 - h6 headings | try it |
| <a> | Light blue links, move the mouse to the link will be underlined | try it |
| <Small> | Light gray text subtitle | try it |
| <Blockquote> | Citation module | try it |
| <Strong> | Bold text | try it |
| <Em> | Italics | try it |
| <Abbr> | Specify the word abbreviation, use the element appears dotted underline text, move the mouse up will prompt | try it |
| <Kbd> | Receive keyboard input commands: CTRL + P | try it |
| <Hr> | Level | try it |
| <Code> | code segment | try it |
| <Ul> | Unordered list | try it |
| <Ol> | Ordered List | try it |
| <Dl> | Descriptive List | try it |
Text Alignment
Use CSS class to modify the alignment of the text:
| class | description | Examples |
|---|---|---|
| .text-left | Left-aligned text | try it |
| .text-right | Right-aligned text | try it |
| .text-center | Center | try it |
| .text-justify | Justified | try it |
Align different screen sizes
Use CSS class to modify the text alignment of different screen sizes:
| class | description | Examples |
|---|---|---|
| Left | ||
| .small-text-left | All screen size Left | try it |
| .small-only-text-left | Small screen Left (width less than 40em) | try it |
| .medium-text-left | Width is larger than the screen size 40.0625em Left | try it |
| .medium-only-text-left | 40.0625em width aligned to the left of the screen size 64em | try it |
| .large-text-left | Width is larger than the screen size 64.0625em Left | try it |
| .large-only-text-left | 64.0625em width aligned to the left of the screen size 90em | try it |
| .xlarge-text-left | Width is larger than the screen size 90.0625em Left | try it |
| .xlarge-only-text-left | 90.0625em width aligned to the left of the screen size 120em | try it |
| .xxlarge-text-left | Width is larger than the screen size 120em Left | try it |
| Align Right | ||
| .small-text-right | All dimensions of the screen right-justified | try it |
| .small-only-text-right | Small screen right alignment (width less than 40em) | try it |
| .medium-text-right | Width greater than the size of the screen right-aligned 40.0625em | try it |
| .medium-only-text-right | 40.0625em width aligned to the right screen size 64em | try it |
| .large-text-right | Width greater than the size of the screen right-aligned 64.0625em | try it |
| .large-only-text-right | 64.0625em width aligned to the right screen size 90em | try it |
| .xlarge-text-right | Width greater than the size of the screen right-aligned 90.0625em | try it |
| .xlarge-only-text-right | 90.0625em width aligned to the right screen size 120em | try it |
| .xxlarge-text-right | Width greater than the size of the screen right-aligned 120em | try it |
| Align | ||
| .small-text-center | Align all screen sizes | try it |
| .small-only-text-center | The small size of the screen centered (width less than 40em) | try it |
| .medium-text-center | Width greater than the size of the screen centered 40.0625em | try it |
| .medium-only-text-center | 40.0625em width to 64em screen sizes centered | try it |
| .large-text-center | Width greater than the size of the screen centered 64.0625em | try it |
| .large-only-text-center | 64.0625em width to 90em screen sizes centered | try it |
| .xlarge-text-center | Width greater than the size of the screen centered 90.0625em | try it |
| .xlarge-only-text-center | Width 90.0625em to 120em screen sizes centered | try it |
| .xxlarge-text-center | Width greater than the size of the screen centered 120em | try it |
| Justified | ||
| .small-text-justify | All screen sizes are Justified | try it |
| .small-only-text-justify | Justify the small size of the screen (width less than 40em) | try it |
| .medium-text-justify | Width is larger than the screen size 40.0625em Justify | try it |
| .medium-only-text-justify | Align both ends of the screen width to 64em size 40.0625em | try it |
| .large-text-justify | Width is larger than the screen size 64.0625em Justify | try it |
| .large-only-text-justify | Align both ends of the screen width to 90em size 64.0625em | try it |
| .xlarge-text-justify | Width is larger than the screen size 90.0625em Justify | try it |
| .xlarge-only-text-justify | Align both ends of the width of the screen size 90.0625em to 120em | try it |
| .xxlarge-text-justify | Width is larger than the screen size 120em Justify | try it |
other
| class | description | Examples |
|---|---|---|
| .left | Left-floating element | try it |
| .right | Right-floating elements | try it |
| .clearfix | Clear float - must be added to the parent element floating element | |
| .hide | Hidden element (the CSS display: none ) | try it |
| .list-inline | All elements arranged in the same row | try it |
| .lead | Let <p> element is more prominent | try it |
| .subheader | Setting light-colored <h1> - <h6> elements | try it |