優(yōu)米CSS點(diǎn)綴樣式庫(umi.css)
umi.css解決web前端頁面布局的最后一里路。在對web頁面排版布局時(shí)，經(jīng)常有瑣碎的細(xì)節(jié)要另外寫樣式，umi.css樣式庫將最常用的碎片樣式整合起來，并統(tǒng)一了樣式命名規(guī)則。 可將umi.css理解為點(diǎn)綴樣式庫。
umi.css可與任何web框架結(jié)合使用。
簡單、易記、通用，是優(yōu)米CSS樣式庫的設(shè)計(jì)風(fēng)格，您可以應(yīng)用在任何類型的Web項(xiàng)目中，并兼容所有版本的瀏覽器。 優(yōu)米CSS免費(fèi)開源，沒有商業(yè)用途限制。
umi.css命名規(guī)則
umi.css的命名規(guī)則是由超過10年開發(fā)經(jīng)驗(yàn)的工程師設(shè)計(jì)，并兼顧了英文不太好的開發(fā)者。
- 規(guī)則1：所有點(diǎn)綴樣式以c_開頭，所有組件樣式以cc_開頭。umi.css并不像其它著名的樣式庫一樣硬性以庫名稱為前綴。c是常用(common)的英文前綴，cc是常用組件(common component)的英文前綴。
- 規(guī)則2：取樣式名稱中最有代表性的單詞，一看便知樣式的效果。如"c_text_left"即"text-align:left"，text_left直譯就是文本在左邊的意思，因此去掉了align這個(gè)單詞。
- 規(guī)則3：取樣式英文的前4個(gè)字符，簡化名稱長度，且不影響可閱讀性。如"c_padd_4"即"padding:4px"。
- 規(guī)則4：上下左右并行樣式。如"c_padd_4_10"即"padding:4px 10px"。
- 規(guī)則5：取極為常見的英文首字母。如上=t，下=b，左=l，右=r，背景background=bg
- 規(guī)則6：后綴有_p表示效果增強(qiáng)或加大(plus)，有_m表示效果減弱或減小(minus)。如c_red_p表示深紅色，c_red_m表示淺紅色。
- 規(guī)則7：(v1.5.0新增)后綴有_all表示所有子元素都應(yīng)用此樣式。
如果您要對umi.css進(jìn)行拓展，建議您新建一個(gè)樣式文件umi.ext.css，這樣當(dāng)umi.css有更新時(shí)，不會影響您自己拓展的樣式。
就算您不打算使用umi.css，但umi.css的命名規(guī)則可以由您選擇性應(yīng)用在您的項(xiàng)目中。
圓角2px：
圓角4px：
圓角6px：
圓角8px：
圓角12px：
圓角15px：
圓角30px：
規(guī)則說明：后綴有_p表示色調(diào)加深(plus)，后綴有_m表示色調(diào)減淡(minus)。
red(紅)：
orange(橙)：
yellow(黃)：
green(綠)：
blue(藍(lán))：
violet(紫)：
gray(灰)：
white(白)：
red(紅加深)：
orange(橙加深)：
yellow(黃加深)：
green(綠加深)：
blue(藍(lán)加深)：
violet(紫加深)：
gray(灰加深)：
red(紅變淡)：
orange(橙變淡)：
yellow(黃變淡)：
green(綠變淡)：
blue(藍(lán)變淡)：
violet(紫變淡)：
gray(灰變淡)：
規(guī)則說明：后綴有_p表示色調(diào)加深(plus)，后綴有_m表示色調(diào)減淡(minus)。
red(紅)：
orange(橙)：
yellow(黃)：
green(綠)：
blue(藍(lán))：
violet(紫)：
gray(灰)：
white(白)：
red(紅加深)：
orange(橙加深)：
yellow(黃加深)：
green(綠加深)：
blue(藍(lán)加深)：
violet(紫加深)：
gray(灰加深)：
red(紅變淡)：
orange(橙變淡)：
yellow(黃變淡)：
green(綠變淡)：
blue(藍(lán)變淡)：
violet(紫變淡)：
gray(灰變淡)：
red(紅)：
orange(橙)：
yellow(黃)：
green(綠)：
blue(藍(lán))：
violet(紫)：
gray(灰)：
white(白)：
red(紅加深)：
orange(橙加深)：
yellow(黃加深)：
green(綠加深)：
blue(藍(lán)加深)：
violet(紫加深)：
gray(灰加深)：
red(紅變淡)：
orange(橙變淡)：
yellow(黃變淡)：
green(綠變淡)：
blue(藍(lán)變淡)：
violet(紫變淡)：
gray(灰變淡)：
文本左對齊：
文本居中：
文本右對齊：
上對齊：
垂直居中：
下對齊：
字體加粗：
斜體：
下劃線：
14px：
16px：
28px：
30px：
36px：
48px：
2px 8px(上下 左右)：
c_padd_2_8
4px 8px：
c_padd_4_8
6px 8px：
c_padd_6_8
2px 10px：
c_padd_2_10
4px 10px：
c_padd_4_10
6px 10px：
c_padd_6_10
8px 10px：
c_padd_8_10
2px 16px：
c_padd_2_16
4px 16px：
c_padd_4_16
6px 16px：
c_padd_6_16
8px 16px：
c_padd_8_16
2px(四周相同)：
4px：
6px：
8px：
10px：
20px：
50px：
更多使用方式： 四周相同的樣式也可單獨(dú)某一邊使用(上=t，下=b，左=l，右=r)，比如：c_padd_t_2=內(nèi)上邊距2px，以下是部分樣式效果。
上邊距10px：
下邊距10px：
左邊距10px：
右邊距10px：
2px(四周相同)：
4px：
6px：
8px：
10px：
20px：
30px：
更多使用方式： 四周相同的樣式也可單獨(dú)某一邊使用(上=t，下=b，左=l，右=r)，比如：c_marg_t_2=外上邊距2px，以下是部分樣式效果。
上邊距10px：
下邊距10px：
左邊距10px：
右邊距10px：
相對定位：
float left：
float left+clear left：
float right：
float right+clear right：
c_line_h_1p5(1.5倍行高)：
c_line_h_2(2倍)：
c_line_h_2p5(2.5倍)：
c_line_h_3(3倍)：
c_over_auto：
c_over_y_auto：
c_over_x_auto：
c_over_hidden：
c_text_over_elli：
文本超出時(shí)顯示省略號
c_ul_disc：
c_ul_squa：
c_ul_deci：
c_ul_lower_a：
c_ul_upper_a：
組件樣式：后綴有_p表示大1號(plus)，后綴有_p2表示大2號，后綴有_m表示小1號(minus)。
按鈕組件-標(biāo)準(zhǔn)：
按鈕組件-小1號：
按鈕組件-小2號：
按鈕組件-標(biāo)準(zhǔn)綠色：
按鈕組件-標(biāo)準(zhǔn)橙色：
按鈕組件-標(biāo)準(zhǔn)藍(lán)色：
默認(rèn)標(biāo)簽：
必填標(biāo)簽：
勾選框-默認(rèn)風(fēng)格：
勾選框-風(fēng)格2：
最新版本：v1.5.1，請點(diǎn)擊右鍵->另存為
下載umi.css 下載umi.min.css
