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 |