前端攻城狮让前端飞网站开发

优化前端开发流程与工作方法-提高质量和效率的小法宝-Uix Ki

2018-03-01  本文已影响57人  ChuckieChang

Hello, 这次推荐一款提高前端开发质量和效率,一种流程参考和思维模式的小玩意儿——Uix Kit! 它是一个基于Bootstrap的快速建站HTML5套件,遵循W3C标准,包括手风琴、Tab切换、大型导航、单页、视差、分页、项目符号列表、文章列表、网格系统、AJAX交互、常用的多风格轮播、视频、计数器、作品画廊展示、模态弹窗、简易灯箱、无限滚动加载、鼠标交互、滚动侦听动画、时间轴、按钮、多风格Footer、文字效果、徽章、表单等等常用的网站模块,并支持官方无限更新和扩展、优化,满足各类常用的、交互和动效级的Web前端开发需求。支持Gulp和Webpack开发模式。套件提供了规范的HTML结构和模块化的HTML,CSS,JS代码(默认),能够让开发者快速进入开发模式,自定义、修改或删除任意模块。

甚至,你可以把里面的所有模块删除,只是使用套件的脚手架,通过套件提供的自动化流程,优化你的工作效率和方式方法。

当我们做项目的时候,会使用一些优秀的模板,但是很难去个性化去定制,特别是很难将其模块化管理。

当我们做项目的时候,会使用到各种插件,但是由于插件众多,容易造成规范和结构的混乱。

当我们做项目的时候,重新编写一堆堆HTML,CSS,JAVASCRIPT代码,时间长了,效率低,质量低,甚至会厌倦它们,永无止境的工作和加班。

当我们做项目的时候,总是不能开心的让系统去执行自动化任务,不够科学,不够前卫,不够智能,我们也会渐渐对网页设计或前端开发产生一些低潮。


Uix Kit 快速建站套件-基于Bootstrap和Gulp+Webpack自动化开发的套件


描述:

+  每个模块(包含SCSS和JS)自动生成目录到uix-kit.css和uix-kit.js文件中

+  简单的自定义CSS和JS核心文件,方便直接用其制作网站

+  很好的跨设备响应式支持

+  独立的组件文件夹,可任意删除和增加,开发环境中自动识别组件库并进行打包

+  支持中文和英文

+  核心样式表与Bootstrap 3.x兼容(并吸收部分Bootstrap 4.x的优点)

+  提供常见的网页组件和布局

+  标准代码规范

+  W3C支持

+  支持Gulp&Webpack同时部署开发环境

推荐使用方法:

具体的使用方法请参考github文档或者演示视频

1.从github或者npm上直接下载https://github.com/xizon/uix-kit

2.配置你电脑的Node.js环境

3.下载完资源后,进入到uix-kit目录下,运行gulp default, 进入开发模式

4.直接通过修改_components/ 文件夹内的模块组件的HTML,JS,SCSS文件,来实现前端开发,所有文件将会自动打包生成到 examples/ 文件夹中。

5.当你需要配置脚手架和网站基础信息和结构的时候,请直接编辑gulpfile.js文件。

不建议直接修改examples/ 文件夹里的文件,因为代码量非常大,很难去维护和定制各种动画、交互、结构。

结构:

小提示:

这个工具套件并不是强制谁去使用它的默认样式和交互效果,而是提供了一个便于利用的自动化脚手架,通过Gulp和Webpack来规范你的开发流程,提高代码的质量和编写效率,提高后期维护的便利性。这是一种工作方法,而不是现成的模板(当然也可以直接使用examples/目录里的项目文件,作为快速建站的模板),Uix Kit的价值,在于快速、简单的模块分离,自动化打包和生成目录,并提供了丰富的默认常用前端代码应用。

如果它对你有帮助,可以关注Github项目主页,项目会不断更新升级优化:)

文章同步发布于Chuckie Chang中文博客

上一篇下一篇

猜你喜欢

热点阅读