Auxiliary class

Margin

This series of tools can be added to elements margin with padding, The default values ​​are all multiples of 8px.

The format of the class name is:.mdui-{Attributes}-{direction}-{size}

Attributes:

• m - Set up margin
• p - Set up padding

direction:

• t - Set up margin-top or padding-top
• b - Set up margin-bottom or padding-bottom
• l - Set up margin-left or padding-left
• r - Set up margin-right or padding-right
• x - Set up margin-leftmargin-right or padding-leftpadding-right
• y - Set up margin-topmargin-bottom or padding-toppadding-bottom
• a - Set up margin or padding

size:

• 0 - 0px
• 1 - 8px
• 2 - 16px
• 3 - 24px
• 4 - 32px
• 5 - 40px

.mdui-m-t-0 {
  margin-top: 0 !important;
}

.mdui-m-l-1 {
  margin-left: 8px !important;
}

.mdui-p-x-2 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.mdui-p-a-5 {
  padding: 40px !important;
}

Fast float

• .mdui-float-left Float the element to the left
• .mdui-float-right Float the element to the right

Horizontally centered

Add a class to any element .mdui-center You can make it horizontally centered.

Vertically centered

Add a class to any element .mdui-valign, You can center the child elements of the element vertically.

Horizontal alignment

• .mdui-text-left Align the text to the left.
• .mdui-text-center Center the text.
• .mdui-text-right Align the text to the right.

Text case conversion

• .mdui-text-lowercase Convert the text to lowercase.
• .mdui-text-uppercase Convert the text to uppercase.
• .mdui-text-capitalize Convert the text to capitalize the first letter of a word.

Text is automatically truncated

.mdui-text-truncate When the length of the text exceeds the limit, it can be automatically truncated and replaced with an ellipsis.

Clear float

Add for the parent element .mdui-clearfix Class can clear float

Hide content

• .mdui-hidden The class is used to hide elements, which is equivalent to adding styles display: none;, The hidden elements do not occupy page space.
• .mdui-invisible The class is used to make the element invisible, but still occupy space on the page, which is equivalent to adding styles visibility: hidden;。

Responsive tools

These tools use media queries to hide content for different devices. These tools include:

• .mdui-hidden-*: Hide on the device of the specified width.
• .mdui-hidden-*-up: Hide on devices with a specified width and above.
• .mdui-hidden-*-down: Hide on devices with a specified width and below.

Adjust the browser window, or view the following examples on different devices. The dark part means it is visible in the current browser window.