返回介绍

项目结构

发布于 2019-05-26 16:28:16 字数 1764 浏览 927 评论 0 收藏 0

深入挖掘UIkit的核心,了解关于它的一切。

GitHub

UIkit被托管在 GitHub 上,基于 MIT 许可协议。 欢迎使用它应用于个人或商业项目。想要获取 UIKit 所有的源文件,只需克隆 GitHub 上的资源库,或者直接下载最新的版本。

下载源代码


文件结构

UIkit 基于LESS创建,LESS是一款CSS预处理器,将 CSS 赋予了动态语言的特性,如变量,继承,运算,函数等。它将写入LESS中的代码编译成为CSS。它将写在Less里的代码编译成CSS。UIkit主要的文件结构如下:

文件夹描述
/docs包含你正在看的UIkit文档的绝大多数文件
/src包含全部Less和JavaScript组件文件
/tests包含所有组件的测试文件
/themes在子文件夹中包含的所有额外提供的主题文件。
/vendor包含UIkit所使用的jQuery和其他的外部库。

所有编译版和压缩版CSS文件、JS文件,以及Less和Sass文件都能在独立的 Bower UIkit repository 项目中找到。查看 Less 和 Sass 文件 获取更多信息。


自动地预处理

为了自动化处理Less文件编译成为CSS的过程,我们使用 Gulp,一款基于 Node.js 的前端构建工具,它监控你的工作目录。无论何时,只要你保存了有修改行为的源文件,Gulp都会自动地将所有文件编译成独立的CSS文件。

首先,你需要安装Node,并设置 gulp 作为一个全局的安装。最后,切换到UIkit目录,安装Node依赖模块(Node dependencies)。

npm install -g gulp
cd uikit
npm install

现在,你可以运行Gulp来创建和修改版本。UIkit的内置版本被放在 /dist 目录中。通过主题名称参数来只创建一个指定的主题。

gulp [-t themename]

你也可以设置Gulp监控你的工作目录,这样它便能在你每次保存时,自动地编译文件。通过主题名称参数来监控一个指定的主题以提升建设进度。

gulp watch [-t themename]

加载新的主题和样式到定制工具中。

gulp indexthemes

测试

UIkit为每个组件提供测试文件。其中每个页面都包含了组件的测试示例,并为你提供了一个关于盒模型所支持的所有可能性的总览。

UIkit 使用 BrowserSync 加速你的工作流程。运行 gulp sync ,你就能在制作自己的主题或者修改现有主题时,即时地查看改动,这不只是在浏览器中,还支持跨设备。你能在测试中切换所有的组件和主题,甚至切换到RTL模式(从右到左)

前往测试

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文