Helper Classes

Margin & Padding

This series of utility classes can add margin and padding to elements, with default values being multiples of 8px.

Class name format: .mdui-{property}-{direction}-{size}

Property:

• m - Set margin
• p - Set padding

Direction:

• t - Set margin-top or padding-top
• b - Set margin-bottom or padding-bottom
• l - Set margin-left or padding-left
• r - Set margin-right or padding-right
• x - Set margin-left margin-right or padding-left padding-right
• y - Set margin-top margin-bottom or padding-top padding-bottom
• a - Set 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;
}

Quick Float

• .mdui-float-left Makes the element float left
• .mdui-float-right Makes the element float right

Horizontal Centering

Add the class .mdui-center to any element to center it horizontally.

Vertical Centering

Add the class .mdui-valign to any element to center its child elements vertically.

Horizontal Alignment

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

Text Case Conversion

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

Text Auto Truncation

.mdui-text-truncate Automatically truncate text and replace it with an ellipsis when it exceeds the limit.

Clearfix

Add the .mdui-clearfix class to the parent element to clear floats.

Hide Content

• The .mdui-hidden class is used to hide elements, equivalent to adding display: none;. Hidden elements do not take up space in the page.
• The .mdui-invisible class is used to make elements invisible, but they still take up space in the page, equivalent to adding visibility: hidden;.

Responsive Utilities

These utility classes hide content for different devices via media queries. These utility classes include:

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

Resize the browser window or view the example below on different devices. Darker sections indicate visibility in the current browser window.