This is Cat UI. @Lin.xs

栅格化系统 Grid

“网格系统” 这概念我是从 960GRID 这里知道的,但是当时并不太能理解。 在后来,正式从事了前端这个职业之后才开始慢慢的开始有了解。

2014年 “网页栅格化” 这个布局设计模式在前端也开始变得火热。也开始慢慢的接触了一些前端大牛,不断的去向他们学习。感谢!

grid-col-1
grid-col-1
grid-col-1
grid-col-1
grid-col-1
grid-col-1
grid-col-1
grid-col-1
grid-col-1
grid-col-1
grid-col-1
grid-col-1
col-1
grid-col-11
grid-col-2
grid-col-10
grid-col-3
grid-col-9
grid-col-4
grid-col-8
grid-col-5
grid-col-7
grid-col-6
grid-col-6
grid-col-12
grid-col-2
grid-col-7
grid-col-3
col-1
grid-col-2
grid-col-3
grid-col-6

表格 Table

为<table>添加.table类元素可以添加基本的表格样式,而不是直接覆盖table。因为表格元素使用的很广泛,所以我选择将此样式独立出来。

This is Table default style
column1 column2 column3 column4
Table foot Table foot
Row1 item1 item2 item3
Row2 item1 item2 item3
Row3 item1 item2 item3
<table class="table">
  ......
</table>

使用.table-striped类样式可以为表格每一行都增加加斑马纹, 使用.table-border类样式可以为每个单元格增加边框, 使用.table-hover类样式可以为每一行增加悬停状态做出响应。

This is Table, use class ".table-border .table-striped .table-hover"
column1 column2 column3 column4
Table foot Table foot
Row1 item1 item2 item3
Row2 item1 item2 item3
Row3 item1 item2 item3
<table class="table table-border table-striped table-hover">
  ......
</table>

表单 Form

一些常用的表单组合、单独的控件。

更新中......

......

排版

赋予一些常用标签的样式。

标题 H

定义了<h1>~<h6>的标签基本样式,还提供了.h1~.h6的类元素样式。可为其他文本提供标题样式。

Hello,你好,我是 H1

Hello,你好,我是 H2

Hello,你好,我是 H3

Hello,你好,我是 H4

Hello,你好,我是 H5
Hello,你好,我是 H6
<h1>Hello,你好,我是 H1</h1>
<h2>Hello,你好,我是 H2</h2>
<h3>Hello,你好,我是 H3</h3>
<h4>Hello,你好,我是 H4</h4>
<h5>Hello,你好,我是 H5</h5>
<h6>Hello,你好,我是 H6</h6>

小标题

在标题内使用<small>标签或 .small类元素,可以用来标记小标题。

Hello,你好,我是 H1,我是副标题噢

Hello,你好,我是 H2,我是副标题噢

Hello,你好,我是 H3,我是副标题噢

Hello,你好,我是 H4,我是副标题噢

Hello,你好,我是 H5,我是副标题噢
Hello,你好,我是 H6,我是副标题噢
<h1>Hello,你好,我是 H1,<small>我是副标题噢</small></h1>
<h2>Hello,你好,我是 H2,<small>我是副标题噢</small></h2>
<h3>Hello,你好,我是 H3,<small>我是副标题噢</small></h3>
<h4>Hello,你好,我是 H4,<span class="small">我是副标题噢</span></h4>
<h5>Hello,你好,我是 H5,<span class="small">我是副标题噢</span></h5>
<h6>Hello,你好,我是 H6,<span class="small">我是副标题噢</span></h6>

引用 Blockquote

在文档中标记引用其他来源的内容。使用<blockquote>标签即可显示为引用样式,对于引用的正文,建议使用<p>标签。

对于来源出处则使用<cite>标签置于<blockquote>标签内。

趁年轻,好好利用这个机会,尽力去尝遍所有痛苦,这种事可不是一辈子什么时候都会遇到的。

加夫列尔·加西亚·马尔克斯《霍乱时期的爱情》

What matters in life is not what happens to you but what you remember and how you remember it.

加夫列尔·加西亚·马尔克斯《百年孤独》
<blockquote class="doc-blockquote" cite="......">
  <p>......</p>
  <cite>......</cite>
</blockquote>

列表 OL/UL

列表分为有序列表和无序列表,对列表的改动并不大,只是增加了一些类元素来让列表具有多种显示的方式。

对于来源出处则使用<cite>标签置于<blockquote>标签内。

有序列表和无序列表

  1. item 1
  2. item 2
    1. children itme 1
    2. children itme 2
  3. item 3
  • item 1
  • item 2
    • children itme 1
    • children itme 2
  • item 3
  • item 1
  • item 2
    • children itme 1
    • children itme 2
  • item 3
<ol>
  <li></li>
  ......
</ol>
                        <ul>
  <li></li>
  ......
</ul>
                        <ul class="unstyle">
  <li></li>
  ......
</ul>

文本对齐 Text

将文本对齐方式设置成一个类元素,是为了快速方便的处理文字对齐方式。

《默如时光》

时光如匆匆流水。

波澜不惊,却自有力量。

带走了青春,留下了年华。

—— 林小帅

<p class="text-nowrap">不换行</p>
<p class="text-left">文字左对齐</p>
<p class="text-center">文字水平居中</p>
<p class="text-right">文字右对齐</p>

文本垂直对齐 Vertical

* 这是一个比较特殊的对齐方式,可以让内容垂直对齐,但是此举非常危险,可能会破坏盒子模型,请慎用。

(top 对齐) 时间很贪婪。有时候,它会独自吞噬所有的细节。

(middle 对齐) 得到了再失去,总是比从来就没有得到更伤人。

(bottom 对齐) 世间太多故事,其实都没有胜者。

卡勒德·胡赛尼《追风筝的人》
<span class="text-vertical-top">top</span>
<span class="text-vertical-middle">middle</span>
<span class="text-vertical-bottom">bottom</span>

文本书写方式 Writing

* 一个比较特殊的文字排版方式,可以让内容如古文一般从上到下书写,需要浏览器支持。

从左边起,从右边起

《麦田守望者》

—— 罗姆·大卫·塞林格

我是说孩子们都在狂奔,

也不知道自己是在往哪儿跑,

我得从什么地方出来,把他们捉住。

我整天就干这样的事。

我只想当个麦田的守望者。

我知道这有点异想天开,

可我真正喜欢干的就是这个。

《远方》

—— 林小帅

期待一个有理想充满挑战的机遇。

让我们一起前行。

我想做梦,因为我还有梦想。

从我的小城市出发。

去一个, 去一个期盼已久的地方,

感受它的温度,就如老友一般;

去一个未曾相见的地方, 感受它的风情,

与它相谈甚欢。

去轻抚高山, 感受它的巍峨与壮丽;

去拥抱大海, 感受它粼粼波涛和深邃的胸怀。

<div class="writing-mode-rl">
  ......
</div><div class="writing-mode-rl">
  ......
</div>

按钮 Button

基础样式

可呈现出作为按钮使用的<button>、<input>、<a>标签或者.button类元素。

link
<button class="button">Button</button>
<input class="button" type="button" value="Input">
<input class="button" type="button" value="Submit">
<a class="button" href="javascript:;">Link</a>

输入框 Input

基础样式

让<input>赋予.input类元素可呈现出作为基本输入框样式使用。 再配合.validate类元素以及type、require属性可以触发带验证效果的输入框。

基础样式

带验证样式

<input class="input" type="text">
<input class="input validate" type="type" required>

辅助类样式

预定义场景色 button

使用以下类元素快速得到一个预定义按钮样式。

primary Link success Link danger Link

预定义场景色 background

使用以下类元素快速得到一个拥有预定义背景色的样式。

primary

success

danger

预定义文字颜色 background

使用以下类元素快速得到一个拥有预定义文字颜色的样式。

text-primary

text-primary

text-primary

禁用/激活样式

使用.disabled类元素或者为元素添加disabled会让元素呈现出不可用状态,一般多使用在<button>、<input>元素上。

反之,使用.active类元素可让元素从不可用状态转变为可用状态。添加了disabled属性的元素需要先消除该属性。

Button disabled:

Link

input disabled:

<button class="button disabled" type="button"></button>
<input class="input disabled" type="text" value="">

徽章

徽章,也可用叫热点标记,通过.badge类元素让其赋予热点标记的状态。同样可以使用预定义样式来让其在不同的场景显示不同的状态。

* 使用了:empty伪类样式,可以通过text value是否为空来控制显示或者隐藏,无需控制。

联系人5

联系人隐藏

联系人9

<p>text<span class="badge">5</span></p>
<p>text<span class="badge"></span></p>
<p>text<span class="badge badge-float badge-primary">5</span></p>

写在最后

以上这些整理都是来自工作中,或者个人项目中碰到的可重用的部分,写了无数次的样式。

可能您细看会发现这里有@Bootstrap的影子,是的没错。关于一些样式的实现方案,确实是实现得比较优雅的,这无可厚非。

后续我也会把移动端适配的样式也更新进来,不过应该不会整合在一起,个人考虑还是独立一个mobile.min.css来进行移动端的适配。

多种风格的皮肤样式,应该会在mobile之前完成,因为皮肤结构是否易于修改,也正好检验了我对CSS结构的理解,让我更好的看见自己的不足。

最后还是要感谢一些人和团队,还有在前端群里的小伙伴们。他们让我学习到很多。