Amaze UI

CSS

浏览器默认样式统一，基础样式，网格，表格、表单、按钮及常用组件样式。

目录

Utility

一些常用样式的 class，与 LESS minxins 的区别在于：mixins 在样式中调用，而 utility 直接在 HTML 中引用。比如要对一个元素清除浮动，在元素上添加 am-cf 这个 class 即可。

布局相关

容器

基本容器

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

.am-container {
  .box-sizing(border-box);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1000px;
  .clearfix();
}

水平滚动

.am-scrollable-horizontal 内容超出容器宽度时显示水平滚动条。

-= 表格标题 =--= 表格标题 =--= 表格标题 =--= 表格标题 =--= 表格标题 =--= 表格标题 =--= 表格标题 =--= 表格标题 =-
表格数据表格数据表格数据表格数据表格数据表格数据表格数据表格数据
表格数据表格数据表格数据表格数据表格数据表格数据表格数据表格数据
表格数据表格数据表格数据表格数据表格数据表格数据表格数据表格数据
<div class="am-scrollable-horizontal">
  <table class="am-table am-table-bd am-table-striped am-text-nowrap">
    ...
  </table>
</div>

垂直滚动

.am-scrollable-vertical 内容超过设置的高度以后显示滚动条，默认设置的高度为 240px。

《你不懂我，我不怪你》
作者：莫言

每个人都有一个死角， 自己走不出来，别人也闯不进去。
我把最深沉的秘密放在那里。
你不懂我，我不怪你。

每个人都有一道伤口， 或深或浅，盖上布，以为不存在。
我把最殷红的鲜血涂在那里。
你不懂我，我不怪你。

每个人都有一场爱恋， 用心、用情、用力，感动也感伤。
我把最炙热的心情 藏在那里。
你不懂我，我不怪你。

每个人都有 一行眼泪， 喝下的冰冷的水，酝酿成的热泪。
我把最心酸的委屈汇在那里。
你不懂我，我不怪你。

每个人都有一段告白， 忐忑、不安，却饱含真心和勇气。
我把最抒情的语言用在那里。
你不懂我，我不怪你。

浮动相关

  • .am-cf - 清除浮动

  • .am-nbfc - 使用 overflow: hidden; 创建新的 BFC 清除浮动（参考）

.am-cf {
  .clearfix();
}
  • .am-fl - 左浮动
  • .am-fr - 右浮动
  • .am-center - 水平居中
.am-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

示例：

<div class="am-cf">
  <button class="am-btn am-btn-success am-fl">向左浮动</button>
  <button class="am-btn am-btn-success am-fr">向右浮动</button>
</div>

垂直对齐

垂直对齐的原理为把父容器内的 “幽灵”元素（使用伪元素）高度设置为 100%，再通过设置需要对齐的元素 vertical-align 属性实现（参考）。

Class描述
.am-vertical-align将这个 class 添加到父容器，父容器需要指定高度。
.am-vertical-align-middle需要垂直居中的元素
.am-vertical-align-bottom添加到需要底部对齐的元素

垂直居中对齐

飘在半空中的 XX
<div class="am-vertical-align" style="height: 150px;">
  <div class="am-vertical-align-middle">
    飘在半空中的 XX
  </div>
</div>

底部对齐

DOWN 到了谷底...降到零下几度 C
<div class="am-vertical-align" style="height: 150px;">
  <div class="am-vertical-align-bottom">
    DOWN 到了谷底...降到零下几度 C
  </div>
</div>

参考链接

元素显示

显示属性

  • .am-block - display 设置为 block
  • .am-inline - display 设置为 inline
  • .am-inline-block - display 设置为 inline-block

隐藏元素

添加 .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>

内外边距

尺寸

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

class 列表

不加尺寸为默认大小（16px），{size} 可以为 xs, sm, lg, xl 中之一。

MarginPadding
.am-margin
.am-margin-{size}		.am-padding
.am-padding-{size}
水平方向外边距
.am-margin-horizontal
.am-margin-horizontal-{size}		水平方向内边距
.am-padding-horizontal
.am-padding-horizontal-{size}
垂直方向外边距
.am-margin-vertical
.am-margin-vertical-{size}		垂直方向内边距
.am-padding-vertical
.am-padding-vertical-{size}
左外边距
.am-margin-left
.am-margin-left-{size}		左内边距
.am-padding-left
.am-padding-left-{size}
右外边距
.am-margin-right
.am-margin-right-{size}		右内边距
.am-padding-right
.am-padding-right-{size}
上外边距
.am-margin-top
.am-margin-top-{size}		上内边距
.am-padding-top
.am-padding-top-{size}
下外边距
.am-margin-bottom
.am-margin-bottom-{size}		下内边距
.am-padding-bottom
.am-padding-bottom-{size}

文本工具

字体

  • .am-sans-serif 非衬线，Amaze UI 主要使用的。
  • .am-serif 衬线字体，中文为宋体，Amaze UI 中未使用。
  • .am-kai 应为衬线字体，中文为楷体，Amaze UI <blockquote> 使用此。
  • .am-monospace 等宽字体，Amaze UI 源代码中使用。

下面为几种字体系列演示：

The quick brown fox jumps over the lazy dog.
千万不要因为走得太久，而忘记了我们为什么出发。
千萬不要因為走得太久，而忘記了我們為什麼出發。

The quick brown fox jumps over the lazy dog.
千万不要因为走得太久，而忘记了我们为什么出发。
千萬不要因為走得太久，而忘記了我們為什麼出發。

The quick brown fox jumps over the lazy dog.
千万不要因为走得太久，而忘记了我们为什么出发。
千萬不要因為走得太久，而忘記了我們為什麼出發。

The quick brown fox jumps over the lazy dog.
千万不要因为走得太久，而忘记了我们为什么出发。
千萬不要因為走得太久，而忘記了我們為什麼出發。

<p>...</p>

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

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

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

文本颜色

千万不要因为走得太久，而忘记了我们为什么出发。

千万不要因为走得太久，而忘记了我们为什么出发。

千万不要因为走得太久，而忘记了我们为什么出发。

千万不要因为走得太久，而忘记了我们为什么出发。

千万不要因为走得太久，而忘记了我们为什么出发。

千万不要因为走得太久，而忘记了我们为什么出发。

<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>

链接颜色减淡

超链接颜色默认为主色（蓝色），添加 .am-link-muted class 将链接颜色设置为灰色。

超级链接

超级链接

<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>

文字大小

  • .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>

常用字号参考：

REMsPixels
6.8rem68px
5rem50px
3.8rem38px
3.2rem32px
2.8rem28px
2.4rem24px
2.2rem22px
1.8rem18px
1.6rem (base)16px (base)
1.4rem14px
1.2rem12px
1rem10px
0.8rem8px
0.5rem5px

文本左右对齐

文字对齐辅助 class，可设置为响应式。

左对齐右对齐居中自适应
.am-text-left.am-text-right.am-text-center.am-text-justify
.am-sm-text-left.am-sm-text-right.am-sm-text-center.am-sm-text-justify
.am-sm-only-text-left.am-sm-only-text-right.am-sm-only-text-center.am-sm-only-text-justify
.am-md-text-left.am-md-text-right.am-md-text-center.am-md-text-justify
.am-md-only-text-left.am-md-only-text-right.am-md-only-text-center.am-md-only-text-justify
.am-lg-text-left.am-lg-text-right.am-lg-text-center.am-lg-text-justify

文本垂直对齐

  • .am-text-top - 顶对齐
  • .am-text-middle - 居中对齐
  • .am-text-bottom - 底对齐
顶部对齐
居中对齐
底部对齐

文字换行及截断

Class描述
.am-text-truncate禁止换行，超出容器部分截断（以 ... 结束）
.am-text-break超出文字容器宽度时强制换行，主要用于英文排版
.am-text-nowrap禁止换行，不截断超出容器宽度部分

单行文字截断

.am-text-truncate，元素 display 属性需为 block 或 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>

参考链接：

多行文字截断

在只针对 PC 端开发的年代，可以通过后端控制输出文字的长度来实现固定行数的效果。

但在响应式页面，这可能不再适用，只能输出足够多的文字，然后通过前端截取需要的行数。

Webkit 内核的浏览器可以通过 -webkit-line-clamp 私有属性实现多行文字截取。其他浏览器没有这个属性，我的做法通常是把容器的高度限定为 行高 * 显示的行数，超出的部分隐藏，勉强达到目的。

.line-clamp {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; // 这里修改为要显示的行数
  -webkit-box-orient: vertical;
}

如果需要考虑其他内核的浏览器，可以使用 Amaze UI 封装的 Mixin:

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;
}

当然，也有一些 JS 插件可以跨浏览器实现，但个人并不推荐在这种场合使用 JS。

参考链接

图片替换

CSS Image Replacement 是一个历史悠久的技术，也随着前端技术的发展不断进化。

图片替换技术兼顾显示效果、可访性、SEO，推荐开发者在网站 Logo 、设计特殊的栏目标题等场合使用。

使用 .am-text-ir class 结合背景图片实现图片替换。

Amaze UI

<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;
}

图文混排辅助

使用 float 实现的类似 HTML align 属性的效果，父容器要清除浮动。与 .am-fl、.am-fr 相比，浮动的元素加了 margin。

  • .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>

响应式辅助

视口大小

.am-[show|hide]-[sm|md|lg][-up|-down|-only]，调整浏览器窗口大小查看元素的显隐。

显示辅助 class隐藏辅助 class
.am-show-sm-only
.am-show-sm-up
.am-show-sm
.am-show-sm-down		.am-hide-sm-only
.am-hide-sm-up
.am-hide-sm
.am-hide-sm-down
.am-show-md-only
.am-show-md-up
.am-show-md
.am-show-md-down		.am-hide-md-only
.am-hide-md-up
.am-hide-md
.am-hide-md-down
.am-show-lg-only
.am-show-lg-up
.am-show-lg
.am-show-lg-down		.am-hide-lg-only
.am-hide-lg-up
.am-hide-lg
.am-hide-lg-down
  • 仅 small 可见
  • medium + 可见
  • 仅 medium 可见
  • large 可见
  • 仅 large 可见
<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>

屏幕方向

  • 横屏：.am-show-landscape, .am-hide-landscape
  • 竖屏：.am-show-portrait, .am-hide-portrait
  • 横屏可见...
  • 竖屏可见...
<ul>
  <li class="am-show-landscape">横屏可见...</li>
  <li class="am-show-portrait">竖屏可见...</li>
</ul>
侧栏导航
×
Amaze UI 微信
在微信上关注我们