UIkit是YOOtheme团队开发的一款轻量级、模块化的前端框架,可快速构建强大的前端web界面。UIKit使用的变量基于LESS,具有体积小、模块化、可轻松地自定义主题及响应式设计可在多种环境中使用等特点。
开始使用
熟悉 UIkit 的基本组织结构。
注意:文档中的示例代码不具备可操作性,请随时右键查看源代码,以参考实例真实代码。
UIkit 兼容 IE9 以上现代浏览器。在 IE8 及其以下版本中,所有JavaScript 都会失效。
首先,你需要下载 UIkit。在 GitHub 上,你可以找到整个项目的所有源文件。
文件结构
在你下载的 ZIP 压缩包中,你可以找到准备在你的项目中使用的所有的CSS、JavaScript和字体文件。UIKit 的核心框架uikit.css
或 uikit.min.css
几乎没有任何样式,这样做是为了保持它的苗条。因此我们提供两个额外的风格样式,一个渐变样式和一个扁平化样式。每个风格样式提供单独的CSS文件以及压缩后的版本。
文件夹 | 描述 |
---|---|
/css |
包含 UIkit 所有的CSS文件和压缩后的版本。 |
/fonts |
包含 UIKit 中使用的字体文件。 |
/js |
包含 UIkit 所有的JavaScript文件和压缩后的版本。 |
/css
<!-- UIKit的基本样式 -->
uikit.css
uikit.min.css
<!-- UIKit的渐变样式 -->
uikit.gradient.css
uikit.gradient.min.css
<!-- UIKit的扁平化样式 -->
uikit.almost-flat.css
uikit.almost-flat.min.css
<!-- 高级组件 -->
/components
/fonts
<!-- FontAwesome网络字体 -->
fontawesome-webfont.eot
fontawesome-webfont.ttf
fontawesome-webfont.woff
FontAwesome.otf
/js
<!-- JavaScript和压缩后的版本 -->
uikit.js
uikit.min.js
<!-- 高级组件 -->
/components
<!-- 核心组件 -->
/core
HTML页面代码
首先,确保你有一个可靠的代码编辑器,比如 Sublime Text 2。你需要在你的HTML5的文档头部添加编译后的UIKit CSS和JavaScript文件,最好是压缩后的版本。别忘了添加 jQuery。就是这样!
Example
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="uikit.min.css" /> <script src="jquery.js"></script> <script src="uikit.min.js"></script> </head> <body> </body> </html>
如果你已经完成了在网页中添加 UIkit,那就看一下 UIkit 组件 并从中获取相关介绍吧。
UIkit on BootCDN
所有版本的 UIkit 都被托管在 BootCDN 上,就是 Bootstrap 中文网那个 BootCDN 。在这里可以找到 UIkit : www.bootcdn.cn 。
Example
<link rel="stylesheet" href="//cdn.bootcss.com/uikit/2.25.0/css/uikit.css" />
<script src="//cdn.bootcss.com/uikit/2.25.0/js/uikit.js"></script>
IDE 上的 UIkit 自动完成
为了更高效地工作,我们建议你为你喜欢的 IDE 或 代码编辑器安装一个自动完成插件。这样可以节省很多时间,因为你不必查找再输入所有UIkit的class 和 HTML 标记。
- Sublime 上的自动完成 – 通过 Sublime 的 Package Control 来安装。
- PHPstorm 上的自动完成 – 通过 PHPsorm 的插件设置进行安装。
- Atom 上的自动完成 – 在 Atom 的 package manager 里寻找它。
项目地址:https://github.com/uikit/uikit
-END-