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许可发布的代码。