Utility

Defines some useful classes. Then difference between utility and LESS mixin is that mixin is called in style sheets, but utility is called in HTML. For example, if you want to remove the float style of an element, just add the .am-cf to this element.

Layout

Container

Basic Container

.am-container，盒模型为 border-box，水平居中对齐，清除浮动。

.am-container is in Grid.

Horizontal Scrollable

.am-scrollable-horizontal shows horizontal scrollbar when the contents overflow.

<div class="am-scrollable-horizontal">
  <table class="am-table am-table-bordered am-table-striped am-text-nowrap">
    ...
  </table>
</div>

Vertical Scrollable

.am-scrollable-vertical shows vertical scrollbar when the contents overflow. Default height is 240px.

Float

• .am-cf - Clear Float

• .am-nbfc - Use overflow: hidden; to create a new BFC to clear float. (Reference)

.am-cf {
  .clearfix();
}

• .am-fl - Right float
• .am-fr - Left float
• .am-center - Center

.am-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Example：

<div class="am-cf">
  <button class="am-btn am-btn-success am-fl">Left Float</button>
  <button class="am-btn am-btn-success am-fr">Right Float</button>
</div>

Vertical Alignment

Vertical alignment is achieved by setting the height of "ghost" element (use pseudo element) to 100%, and setting the vertical-align attribute of the element need to be aligned.（Reference）。

Vertical Center Align

<div class="am-vertical-align" style="height: 150px;">
  <div class="am-vertical-align-middle">
    XX in the air
  </div>
</div>

Vertical Bottom Align

<div class="am-vertical-align" style="height: 150px;">
  <div class="am-vertical-align-bottom">
    DOWN to the bottom
  </div>
</div>

Reference

• CSS 实现水平、垂直居中
• Centering in the Unknown
• Cube Layout.css

Display

Attributes

• .am-block - Set display to block
• .am-inline - Set display to inline
• .am-inline-block - Set display to inline-block

Hide

Use .am-hide class。

.am-hide {
  display: none !important;
  visibility: hidden !important;
}

<!-- 隐藏了，Demo 里看不到按钮 -->
<button class="am-btn am-btn-danger am-hide">I'm hidden.....</button>

Padding and Margin

Size

• xs - 5px
• sm - 10px
• default - 16px
• lg - 24px
• xl - 32px

Class List

Classes without size have default size (16px). {size} could be one of 0, xs, sm, lg, xl.

• v2.4: Add Padding and Margin with 0 value.

Text Tools

Font

• .am-sans-serif Sans serif font is the main font of Amaze UI.
• .am-serif Serif font is not used in Amaze UI.
• .am-kai Use serif for English text and numbers, and use Kai for Chinese characters. The only difference between .am-kai and .am-serif is on the Chinese characters. Amaze UI use .am-kai in <blockquote>.
• .am-monospace monospace font is used in Amaze UI source code.

This example shows the difference among these fonts.

<p>...</p>

<p class="am-serif">...</p>

<p class="am-kai">...</p>

<p class="am-monospace">...</p>

Text Color

<p>...</p>
<p class="am-text-primary">...</p>
<p class="am-text-secondary">...</p>
<p class="am-text-success">...</p>
<p class="am-text-warning">...</p>
<p class="am-text-danger">...</p>

Light Color Link

Default color of link is the primary color. Add the .am-link-muted class to change the color to gray.

<a href="" class="am-link-muted">...</a>

<h3 class="am-link-muted"><a href="">...</a></h3>

<ul class="am-link-muted">
  <li><a href="">...</a></li>
</ul>

Text Size

• .am-text-xs - 12px
• .am-text-sm - 14px
• .am-text-default - 16px
• .am-text-lg - 18px
• .am-text-xl - 24px
• .am-text-xxl - 32px
• .am-text-xxxl - 42px

<p class="am-text-xs">...</p>
<p class="am-text-sm">...</p>
<p class="am-text-default">...</p>
<p class="am-text-lg">...</p>
<p class="am-text-xl">...</p>
<p class="am-text-xxl">...</p>
<p class="am-text-xxxl">...</p>

Frequently-used font size:

Alignment

Alignment classes can be responsive.

Vertical Alignment

• .am-text-top - Top Align
• .am-text-middle - Center Align
• .am-text-bottom - Bottom Align

Top Aligned

Center Aligned

Bottom Aligned

Wrap and Truncate

Single Line Truncation

.am-text-truncate. The display attribute of element should be block or inline-block.

.am-text-truncate {
  word-wrap: normal; /* for IE */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<!-- 超出 200px 的文字将会被截断 -->
<div class="am-text-truncate" style="width: 250px; padding: 10px;">千万不要因为走得太久，而忘记了我们为什么出发</div>

Reference:

• https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
• IE8 & 9 white-space nowrap 失效

Multiple Lines Truncation

When websites are only designed for PC, we can control the number of lines by controlling the length of text in back-end.

But this don't works in responsive web design, so we need to control the length of text in front-end.

Webkit browsers can truncate multiple lines by using -webkit-line-clamp. However, this attribute don't works in other browsers. One solution is to set the height of container to line-height * number of lines and cut off the overflow part.

.line-clamp {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; // Use your number of lines here
  -webkit-box-orient: vertical;
}

If you are considering about browsers with other core, you may use Mixin in Amaze UI.

line-clamp(@lines, @line-height: 1.3em) {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @lines; // number of lines to show
  overflow: hidden;
  line-height: @line-height;
  max-height: @line-height * @lines;
}

Of course, some JS plugins can achieve this effort on all browsers, but we don't recommend using JS here.

Reference:

• -webkit-line-clamp
• Line Clampin’ - Truncating Multiple Line Text
• CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS
• Clamp.js
• TextTailor.JS

Image Replacement

CSS Image Replacement is a technic with long history, and also is developing with the development of front-end technology.

Image Replacement give consideration to display effect, accessibility and SEO, so we suggest developers to use image replacement for their logo and titles.

Use .am-text-ir class to achieve image replacement with background image.

<header class="doc-ir-demo">
  <h1><a href="/" class="am-text-ir">Amaze UI</a></h1>
</header>

.doc-ir-demo {
  background: #3bb4f2;
}

.doc-ir-demo h1 {
  margin: 0;
  padding: 10px;
}

.doc-ir-demo a {
  display: block;
  height: 29px;
  width: 125px;
  background: url(/i/landing/logo.png) no-repeat left center;
  -webkit-background-size: 125px 24px;
  background-size: 125px 24px;
}

• Update CSS image replacement technique
• CSS-Tricks | Search Results for 'image replace'

Text Wrap Utilities

Use float to achieve effects similar to HTML align attribute. Float of parent container should be cleared. Comparing to .am-fl and .am-fr, margin is added to float element.

• .am-align-left
• .am-align-right

那时候刚好下着雨，柏油路面湿冷冷的，还闪烁着青、黄、红颜色的灯火。我们就在骑楼下躲雨，看绿色的邮筒孤独地站在街的对面。我白色风衣的大口袋里有一封要寄给南部的母亲的信。樱子说她可以撑伞过去帮我寄信。我默默点头。

“谁叫我们只带来一把小伞哪。”她微笑着说，一面撑起伞，准备过马路帮我寄信。从她伞骨渗下来的小雨点，溅在我的眼镜玻璃上。

随着一阵拔尖的煞车声，樱子的一生轻轻地飞了起来。缓缓地，飘落在湿冷的街面上，好像一只夜晚的蝴蝶。

虽然是春天，好像已是秋深了。

她只是过马路去帮我寄信。这简单的行动，却要叫我终身难忘了。我缓缓睁开眼，茫然站在骑楼下，眼里裹着滚烫的泪水。世上所有的车子都停了下来，人潮涌向马路中央。没有人知道那躺在街面的，就是我的，蝴蝶。这时她只离我五公尺，竟是那么遥远。更大的雨点溅在我的眼镜上，溅到我的生命里来。

为什么呢？只带一把雨伞？

然而我又看到樱子穿着白色的风衣，撑着伞，静静地过马路了。她是要帮我寄信的。那，那是一封写给南部母亲的信。我茫然站在骑楼下，我又看到永远的樱子走到街心。其实雨下得并不大，却是一生一世中最大的一场雨。而那封信是这样写的，年轻的樱子知不知道呢？

妈：我打算在下个月和樱子结婚。

<div class="am-cf">
  <p class="am-align-left">
    <img src="..." alt=""/>
  </p>
  ...
  <p class="am-align-right">
    <img src="..." alt=""/>
  </p>
  ...
</div>

Responsive Utilities

Viewport Size

.am-[show|hide]-[sm|md|lg][-up|-down|-only]. Adjust window size to check the effect.

Class explanation：

• show and hide are just like their name;
• sm、md、lg is the abbreviation of the interval of screen size. More details in Grid;
• down means smaller than interval, and up means larger than interval. only means only in this interval.

Now we can translate following classes:

• .am-show-sm-only: Show only in sm interval
• .am-show-sm-up: Show when larger than sm interval
• .am-show-sm: Show in sm interval, and inherit to md and lg interval.
• .am-show-md-down: Show when smaller than md interval

<ul>
  <li class="am-show-sm-only">仅 small 可见</li>
  <li class="am-show-md-up">medium + 可见</li>
  <li class="am-show-md-only">仅 medium 可见</li>
  <li class="am-show-lg-up">large 可见</li>
  <li class="am-show-lg-only">仅 large 可见</li>
</ul>

Screen Orientation

• Landscape：.am-show-landscape, .am-hide-landscape
• Portrait：.am-show-portrait, .am-hide-portrait

<ul>
  <li class="am-show-landscape">Show in landscape...</li>
  <li class="am-show-portrait">Show in portrait...</li>
</ul>