unitscss

單位

簡單美麗的組件集。

https://unitscss.com/

文件

英語 /日本語

特徵

單位是一個簡單而美麗的組件集。您所要做的就是加載CSS文件，複製和粘貼片段，因此任何人都可以使用。

• 快速使用
  您要做的就是將單位放置。已經準備好幾個組件，您可以選擇要使用的組件並將其應用於網站。

• 簡單美麗
  每個組件設計精美。設計將定期更新，我們不會應用大更改，而只應用小更改，例如調整保證金。

• 支持現代瀏覽器
  優化單元可用於現代瀏覽器，例如Microsoft Edge，Google Chrome，Firefox，Safari，舊瀏覽器怎麼樣？ ... 對不起。

• 響應式網頁設計
  我們使用響應式Web Design批准在所有設備上顯示優化的設計。

• 定期更新
  單位仍然是Beta版本，它將定期更新為主要版本。 Unitil是主要版本，我們將添加新組件，優化源代碼，調整其設計。

• 支持日本人
  因為開發人員是日本人，我們可以用日語支持。我們一直在優化網頁並更新用日語編寫的文檔。

安裝

單位本身可以通過克隆或作為ZIP格式從GitHub下載，也可以通過NPM下載。

$ git clone https://github.com/kokushin/unitscss.git

$ npm install unitscss --save

讓我們加載必要的文件。

 < link rel =" stylesheet " href =" https://fonts.googleapis.com/css?family=Roboto:400,700 " >
< link rel =" stylesheet " href =" path/to/units.min.css " >

< script src =" path/to/units.min.js " > </ script > 

用法

編寫精確的HTML摘要，並以uc-開頭給它提供正確的類。例如，在下面的示例中，您可以製作一個帶有覆蓋圖像的卡組件。

 < div class =" uc-card _float " >
  < div class =" uc-card-image " style =" background-image:url(https://source.unsplash.com/random) " > </ div >
  < h3 class =" uc-card-title " > Sample card </ h3 >
  < p > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, et. </ p >
  < div class =" uc-btn _primary " > < a href =" # " > Button </ a > </ div >
</ div >

它將顯示在瀏覽器上：

演示

https://unitscss.com/themes/

摘要

請檢查Codepen。

下載

下載zip

github

https://github.com/kokushin/units

貢獻者

@kokushin

執照

代碼和文檔版權所有2017年的Kokushin。根據MIT許可發布的代碼。