Foundation CSS reference manual


May 04, 2021 14:00 Foundation5


Table of contents


Foundation CSS reference manual


Foundation default settings

Foundation uses the browser's default font font-size:100% F or browsers on most desktop devices, the font size defaults to 16px. F or mobile browsers, the default font size is 12px. The default font is "Helvetica Neue" and line-height is 1.5

These settings are <body> the element.

In addition, <p> margin between the element and the bottom is 1.25rem and the line-height is 1.6.


Text

The following HTML element, foundation set a separate style to render it, will not take the browser default style. Click "Try it" to view the online instance.

Elements Describe Online instance
<h1> - <h6> h1 - h6 title Give it a try
<a> Light blue link, mouse movement to link will be underlined Give it a try
<small> Light gray subtitle text Give it a try
<blockquote> Refers to the content module Give it a try
<strong> Bold text Give it a try
<em> Italic Give it a try
<abbr> Specify the abbreviation of the word, use the element text to appear underlined, the mouse will move up there will be a prompt message Give it a try
<kbd> Receive keyboard input instructions: CTRL plus P Give it a try
<hr> Horizon Give it a try
<code> Code snippets Give it a try
<ul> No sequence tables Give it a try
<ol> An ordered list Give it a try
<dl> Descriptive list Give it a try

Text alignment

Use the CSS class to modify the alignment of text:

Class Describe Instance
.text-left Align the text to the left Give it a try
.text-right Align the text to the right Give it a try
.text-center Center Give it a try
.text-justify The two ends are aligned Give it a try

Alignment of screens of different sizes

Use the CSS class to modify the alignment of different size screens of text:

Class Describe Instance
Left alignment
.small-text-left All size screens are aligned to the left Give it a try
.small-only-text-left Small screen left alignment (width less than 40em) Give it a try
.medium-text-left Screen left alignment with width greater than 40.0625em Give it a try
.medium-only-text-left Screen left alignment with widths from 40.0625em to 64em Give it a try
.large-text-left 宽度大于 64.0625em 尺寸屏幕左对齐 Give it a try
.large-only-text-left Screens with widths from 64.0625em to 90em are aligned to the left Give it a try
.xlarge-text-left 宽度大于 90.0625em 尺寸屏幕左对齐 Give it a try
.xlarge-only-text-left Screens with widths from 90.0625em to 120em are aligned to the left Give it a try
.xxlarge-text-left The screen is more than 120em wide and the screen is aligned to the left Give it a try
Right alignment
.small-text-right All size screens are aligned to the right Give it a try
.small-only-text-right Small screen right alignment (width less than 40em) Give it a try
.medium-text-right Screens with widths greater than 40.0625em are aligned to the right Give it a try
.medium-only-text-right Screens with widths from 40.0625em to 64em are aligned to the right Give it a try
.large-text-right 宽度大于 64.0625em 尺寸屏幕右对齐 Give it a try
.large-only-text-right Screens with widths from 64.0625em to 90em are aligned to the right Give it a try
.xlarge-text-right 宽度大于 90.0625em 尺寸屏幕右对齐 Give it a try
.xlarge-only-text-right Screens with widths from 90.0625em to 120em are aligned to the right Give it a try
.xxlarge-text-right Screens larger than 120em in width are aligned to the right Give it a try
Center alignment
.small-text-center The screens are centered among all sizes Give it a try
.small-only-text-center Small screen center alignment (width less than 40em) Give it a try
.medium-text-center Screens with widths greater than 40.0625em are centered Give it a try
.medium-only-text-center Screens with widths from 40.0625em to 64em are centered Give it a try
.large-text-center Screens with widths greater than 64.0625em are centered Give it a try
.large-only-text-center Screens with widths from 64.0625em to 90em are centered Give it a try
.xlarge-text-center Screens with widths greater than 90.0625em are centered Give it a try
.xlarge-only-text-center Screens with widths from 90.0625em to 120em are centered Give it a try
.xxlarge-text-center Screens larger than 120em in width are centered Give it a try
The two ends are aligned
.small-text-justify All size screens are aligned at both ends Give it a try
.small-only-text-justify Small screen with 2 ends aligned (width less than 40em) Give it a try
.medium-text-justify Screens with widths greater than 40.0625em are aligned at both ends Give it a try
.medium-only-text-justify Screens with widths from 40.0625em to 64em are aligned at both ends Give it a try
.large-text-justify Screens with widths greater than 64.0625em are aligned at both ends Give it a try
.large-only-text-justify 宽度在 64.0625em 到 90em 尺寸的屏幕两端对齐 Give it a try
.xlarge-text-justify 宽度大于 90.0625em 尺寸屏幕两端对齐 Give it a try
.xlarge-only-text-justify 宽度在 90.0625em 到 120em 尺寸的屏幕两端对齐 Give it a try
.xxlarge-text-justify Screens with widths greater than 120em are aligned at both ends Give it a try

Other

Class Describe Instance
.left The element floats to the left Give it a try
.right The element floats to the right Give it a try
.clearfix Clear Float - must be added to the parent element of the floating element
.hide Hidden element (CSS display: none ) Give it a try
.list-inline Set all elements on the same line Give it a try
.lead Make the elements stand out Give it a try
.subheader Set the light-colored elements of the .lt;h1> Give it a try