UIkit 轻量级模块化的 UI 前端开发框架

发布于 2017-10-09 13:48:56 字数 3629 浏览 2074 评论 0

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 项目。

文件结构

在你下载的 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 中文文档。

分享到QQ

分享到微博