8.39.1. Foundation default settin ¶
Foundation uses browser default font size (
font-size:100%
). For browsers on most desktop devices, the font size defaults to 16px. For browsers on mobile devices, the default font size is 12px. The default font is
"Helvetica
Neue"
, line-height defaults to
1.5
.
These settings apply to the
<body>
The element within the element.
In addition
<p>
The outer margin (margin-bottom) between the element and the bottom is 1.25rem, and the line-height is 1.6.
8.39.2. Text ¶
The following HTML element, which is rendered in a separate style by Foundation, does not use the browser default style. Click “try” to view an online example.
element | Description | Online instance |
|---|---|---|
< H1 >-< h6 > | H1-H6 title | |
< a > | Light blue link, move the mouse to the link will be underlined | |
< small > | Light gray subtitle text | |
< blockquote > | Reference content module | |
< strong > | Bold text | |
< em > | Italic | |
< abbr > | Specify the abbreviation of the word, the text of this element is dotted and underlined, and there is a prompt when the mouse moves up. | |
< kbd > | Receive keyboard input instructions:? CTRL + P | |
< hr > | Horizontal line | |
< code > | Code snippet | |
< ul > | Unordered list | |
< ol > | Ordered list | |
< dl > | Descriptive list |
8.39.3. Text alignment ¶
Use the CSS class to modify the alignment of the text:
. text-left | Left align text | |
|---|---|---|
. text-right | Align text to the right | |
. text-center | In the middle | |
. text-justify | Alignment at both ends |
8.39.4. Alignment of screens of different sizes ¶
Use the CSS class to modify the alignment of different-sized screens of text:
Class | Description | Example |
|---|---|---|
Align left | ||
.small-text-left | Align all sizes to the left of the screen | |
.small-only-text-left | Small screen left alignment (width less than 40em) | |
.medium-text-left | The width is larger than the 40.0625em size and the screen is left aligned. | |
.medium-only-text-left | The width is aligned to the left of the screen in 40.0625em to 64em sizes | |
.large-text-left | The width is larger than the 64.0625em size and the screen is left aligned. | |
.large-only-text-left | The width is aligned to the left of the screen in 64.0625em to 90em sizes | |
.xlarge-text-left | The width is larger than the 90.0625em size and the screen is left aligned. | |
.xlarge-only-text-left | The width is aligned to the left of the screen in 90.0625em to 120em sizes | |
.xxlarge-text-left | The width is larger than the 120em size and the screen is left aligned. | |
Align right | ||
.small-text-right | Align all sizes to the right of the screen | |
.small-only-text-right | Small screen right alignment (width less than 40em) | |
.medium-text-right | The width is larger than the 40.0625em size and the screen is right-aligned. | |
.medium-only-text-right | The width is aligned to the right of the screen in 40.0625em to 64em sizes | |
.large-text-right | The width is larger than the 64.0625em size and the screen is right-aligned. | |
.large-only-text-right | The width is aligned to the right of the screen in 64.0625em to 90em sizes | |
.xlarge-text-right | The width is larger than the 90.0625em size and the screen is right-aligned. | |
.xlarge-only-text-right | The width is aligned to the right of the screen in 90.0625em to 120em sizes | |
.xxlarge-text-right | The width is larger than the 120em size and the screen is right-aligned. | |
Center alignment | ||
.small-text-center | The screen of all dimensions is centered. | |
.small-only-text-center | Small screen center alignment (width less than 40em) | |
.medium-text-center | The width is larger than the 40.0625em size and the screen is centered. | |
.medium-only-text-center | The width is centered on the screen from 40.0625em to 64em. | |
.large-text-center | The width is larger than the 64.0625em size and the screen is centered. | |
.large-only-text-center | The width is centered on the screen from 64.0625em to 90em. | |
.xlarge-text-center | The width is larger than the 90.0625em size and the screen is centered. | |
.xlarge-only-text-center | The width is centered on the screen from 90.0625em to 120em. | |
.xxlarge-text-center | The width is larger than the 120em size and the screen is centered. | |
Alignment at both ends | ||
.small-text-justify | The screens of all sizes are aligned at both ends | |
.small-only-text-justify | Small screen alignment at both ends (width less than 40em) | |
.medium-text-justify | The width is larger than the 40.0625em size and the two ends of the screen are aligned. | |
.medium-only-text-justify | The width is aligned at both ends of the 40.0625em to 64em size screen | |
.large-text-justify | The width is larger than the 64.0625em size and the two ends of the screen are aligned. | |
.large-only-text-justify | The width is aligned at both ends of the 64.0625em to 90em size screen | |
.xlarge-text-justify | The width is larger than the 90.0625em size and the two ends of the screen are aligned. | |
.xlarge-only-text-justify | The width is aligned at both ends of the 90.0625em to 120em size screen | |
.xxlarge-text-justify | The width is larger than the 120em size and the two ends of the screen are aligned. |
8.39.5. Other ¶
Class | Description | Example |
|---|---|---|
.left | Element floats to the left | |
.right | Elements float to the right | |
.clearfix | Clear float-must be added to the parent element of the floating element | |
.hide | Hidden element (CSS?display: none) | |
. list-inline | Set all elements on the same line | |
.lead | Make the < p > element more prominent | |
.subheader | Set the light color < H1 >-< h6 > element |