Scaffolding

Reset样式

Brix Style 的 Reset 样式直接使用了 Normalize.css，省心省力，效果请参考 Reset测试

工具类

工具类可以直接在页面中使用。

.clearfix
.text-overflow

Mixin

Brix Style 提供了许多 Mixins 来加速 Brix 组件的开发。

暂定有以下 mixin：

.border-radius (@radius)
.opacity (@opacity)
.box-shadow (@shadow)
.transition (@transition)
#gradient > .vertical (@startColor: #555, @endColor: #333)
#gradient > .striped (@color, @angle: -45deg)
.ie-inline-block ()
.reset-filter ()
.buttonBackground (@startColor, @endColor)
.formFieldState (@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5)
#popoverArrow > .bottom (@arrowWidth: 5px, @color: @black)
#popoverArrow > .right (@arrowWidth: 5px, @color: @black)
#popoverArrow > .top (@arrowWidth: 5px, @color: @black)
#popoverArrow > .left (@arrowWidth: 5px, @color: @black)
#grid > .core (@gridColumnWidth, @gridGutterWidth)
#grid > .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth)
#grid > .input (@gridColumnWidth, @gridGutterWidth)

Type

Demo

标题

h1: The quick brown fox jumps over the lazy dog 那只敏捷的棕毛狐狸跃过那只懒狗

h2: The quick brown fox jumps over the lazy dog 那只敏捷的棕毛狐狸跃过那只懒狗

h3: The quick brown fox jumps over the lazy dog 那只敏捷的棕毛狐狸跃过那只懒狗

h4: The quick brown fox jumps over the lazy dog 那只敏捷的棕毛狐狸跃过那只懒狗

h5: The quick brown fox jumps over the lazy dog 那只敏捷的棕毛狐狸跃过那只懒狗

h6: The quick brown fox jumps over the lazy dog 那只敏捷的棕毛狐狸跃过那只懒狗

正文

p: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

div: 原先大家以为这段拉丁文只是没有意义的组合，目的是让阅读者不要被文章内容所影响，而只专注于观察字型或版型，并借此填满空间。但根据美国拉丁学者 Richard McClintock 的研究，Lorem ipsum 原来起源于西赛罗的《善恶之尽》。中译：无人爱苦，亦无人寻之欲之，乃因其苦。为了减少 Lorem ipsum 的可读性，并且让字母出现的频率与现代英语接近，所以有些版本中部分字母被 K, W, Z 等拉丁文中没有的字母替换，或是加入 zzril, takimata 等字。除了原始的 Lorem ipsum 版本外，目前还有几套新的 Lorem ipsum.

价钱符号

¥1980
¥1980
¥1980
¥1980
¥1980
¥1980

100元
3.56元
5,000.00元
5,000.00元
5,000.00元

链接颜色

link
hover
visited

Grid

Demo

50（+10）列栅格系统

1

2

17

33

10

40

10

15

25

50

默认的50列、990px宽度的栅格系统。

<div class="row">
<div class="span10">...</div>
<div class="span15">...</div>
<div class="span25">...</div>
</div>

页面被我们分割成50个基础列，你通过指定横跨多少列来控制每个区域的宽度。

带有偏移量的列

10

25 offset 15

33 offset 17

只需要给偏移列加上 offset*

<div class="row">
  <div class="span10">...</div>
  <div class="span25 offset15">...</div>
</div>
<div class="row show-grid">
  <div class="span33 offset17">33 offset 17</div>
</div>

嵌套列

Level 1 of column

Level 2

有时我们需要在某一列中嵌套一个栅格，只需要在 .span* 中增加一个 .row ，并在 .row 中增加若干 .span* 。

嵌套行中的列横跨宽度相加必须等于其外部列的宽度。例如：一个 .span25 列中可以有一个 .span10 列和一个 .span15 列。

<div class="row">
<div class="span25">
Level 1 of column
<div class="row">
<div class="span10">Level 2</div>
<div class="span15">Level 2</div>
</div>
</div>
</div>