UIkit 轻量级模块化的 UI 前端开发框架
UIkit 是 YOOtheme 团队开发的一款轻量级、模块化的前端框架,可快速构建强大的web前端界面。UIKit提供了全面的HTML、CSS及JS组件,它们使用简单,容易定制和扩展。
它基于LESS开发,代码结构清晰简单,易于扩展和维护,并且具有体积小、反应灵敏的响应式组件,你可以根据 UIKit 基本的风格样式,轻松地自定义创建出自己喜欢的主题样式。
特点
- LESS:UIkit 基于 LESS 开发,代码结构清晰简单,易于扩展和维护。
- 组件:体积小、反应灵敏的响应式组件,使用一致的、无冲突的命名规则。
- 定制:可根据 UIKit 基本的风格及样式,轻松地自定义创建出自己喜欢的主题样式。
- 响应式:根据不同的屏幕分辨率与上网设备,UIKit 会自动做出响应,提供一致的体验。
开放源码
UIKit 是一款开源的前端UI界面框架,你可以无任何限制的使用 UIKit 来创建自己的风格。
- MIT 许可协议:UIkit 是基于MIT许可协议的开源项目。它完全免费,你可以无任何限制的使用、复制、合并、发布及分发这个框架。
- 我们的英雄:非常感谢 LESS、jQuery、normalize.css及FontAwesome,没有这些强大的开源项目就不可能有UIkit。
- 积极的开发:UIkit 由 YOOtheme 团队建造,YOOtheme 通过丰富的经验创建着 Joomla 和 WordPress 主题,并支持着 Warp theme framework 项目。
相关项目
- Warp 主题框架:一款快速和简洁的主题框架,它提供了丰富的工具集,用于开发跨平台的主题
- Pagekit:一款全新的现代CMS,用于创作和分享
- Slim 框架:Slim是一款 PHP 微框架,可以帮助你快速编写简单但功能强大的 web 应用和 API 。
文件结构
在你下载的 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。就是这样!
<!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 中文文档。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论