这个产品维护已经有一年了(由于业务需求不同,目前没有做中文版,产品本身是针对国外网站),自己本身是做UI出生,开发只是业余爱好,仅仅作为平时工作的需要。杂七杂八会一些前后端开发。并非职业码农!

我是一个BBoy,也是一个爱到处旅行拍极限视频的冒险家!喜欢大自然,不喜欢繁华都市。

好啦,自我介绍简单就好!:)

Uix Kit! 是一个偏视觉交互的工具集合,数据交互的模块非常少,它基于常用的脚本库,帮助开发者快速完成一套完整的交互型网站。它不是一个框架,不是一个脚本库,它是一个兼容Bootstrap的快速建站HTML5套件,遵循W3C标准,包括手风琴、Tab切换、大型导航、单页、视差、分页、项目符号列表、文章列表、网格系统、AJAX交互、常用的多风格轮播、视频、计数器、作品画廊展示、模态弹窗、简易灯箱、无限滚动加载、鼠标交互、滚动侦听动画、时间轴、按钮、多风格Footer、文字效果、徽章、表单等等常用的网站模块,并支持官方无限更新和扩展、优化,满足各类常用的、交互和动效级的Web前端开发需求。支持Gulp和Webpack开发模式。套件提供了规范的HTML结构和模块化的HTML,CSS,JS代码(默认),能够让开发者快速进入开发模式,自定义、修改或删除任意模块。

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

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

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

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

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

需求:

现在很多普通网站,已经可以通过在线的拖拽建站工具,智能建站系统快速完成,因此普通网站已经无需专门花很多金钱和时间去找一个开发者完成。Uix Kit工具箱是针对一些特殊效果的交互的网站,也可以用于比较个性化的定制网站的开发设计。

为何使用?

  • 它不是可重用的组件结构
  • 它不是一个JavaScript框架
  • 它是一个基于Webpack的开发环境的工具箱
  • 您可以用最喜欢的方式使用任意JavaScript库来构建样式和动画脚本
  • 适用于开发视觉交互类型的网站和WordPress模板
  • 遵循W3C标准和SEO优化
  • 使用BEM命名,因此核心Uix Kit项目不会与其他项目冲突
  • 自动为每个模块的名称注释生成目录
  • 每个模块均包含SASS/SCSS,JavaScript和HTML文件
  • 为React架构提供开发环境配置
  • 与Bootstrap 4.x兼容
  • 提供常见的网页组件和布局,提高开发效率和页面质量标准
  • 使用ES6导入或导出多个模块,第三方插件可以采用纯文件合并的方式不进行导入和导出
  • 完整的示例目录可以在没有Node.js开发环境的情况下独立开发响应式网站

推荐使用方法:

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

1.从github下载 https://github.com/xizon/uix-kit

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

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

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

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

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

套件结构:

uix-kit/
├── README.md
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── webpack.config.js
├── package-lock.json
├── package.json
├── dist/
│ ├── css/
│ │ ├── uix-kit.css
│ │ ├── uix-kit.css.map
│ │ ├── uix-kit.min.css
│ │ ├── uix-kit.min.css.map
│ │ ├── uix-kit-rtl.css
│ │ ├── uix-kit-rtl.css.map
│ │ ├── uix-kit-rtl.min.css
│ │ └── uix-kit-rtl.min.css.map
│ └── js/
│ │ ├── uix-kit.js
│ │ ├── uix-kit.js.map
│ │ ├── uix-kit.min.js
│ │ ├── uix-kit.min.js.map
│ │ ├── uix-kit-rtl.js
│ │ ├── uix-kit-rtl.js.map
│ │ ├── uix-kit-rtl.min.js
│ │ ├── uix-kit-rtl.min.js.map
│ │ ├── uix-kit.concat.es5.dev.js
│ │ └── uix-kit.concat.es5.dev.js.map
├── misc/
│ ├── screenshots/
│ └── grid/
├── src/
│ ├── index.js
│ ├── index-rtl.js
│ ├── components/
│ │ ├── ES5/
│ │ └── ES6/
├── examples/
│ ├── *.html
│ ├── assets/
│ │ ├── css/
│ │ ├── fonts/
│ │ ├── images/
│ │ ├── videos/
│ │ ├── models/
│ │ ├── json/
│ │ └── js/
└──

  

 

小提示:

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

如果它对你有帮助,可以关注Github项目主页,项目会不断更新升级优化:) 详细使用方法请参考github主页 https://github.com/xizon/uix-kit

Uix Kit 快速建站前端开发套件-工具箱的更多相关文章

  1. Python快速建站系列-Part.One-组装开发环境

    |版权声明:本文为博主原创文章,未经博主允许不得转载. 源代码都在github上:SmallStudyStation 现在是个demo,但回来会租个服务器,等功能完善了放到服务器上挂着,域名jusot ...

  2. Python快速建站系列-Part.Three-注册和登录

    |版权声明:本文为博主原创文章,未经博主允许不得转载. 上一个Part已经给TSSS编好了一个简单的Web服务,网页的基础模版也写好了,那从这个Part开始就慢慢增加编写功能. 先写基础功能:注册和登 ...

  3. 旨在脱离后端环境的前端开发套件 - IDT Server篇

    IDT,一个基于Nodejs的,旨在脱离后端环境的前端开发套件,目的就是能让前端开发完全脱离后端的环境,无论后端是什么模板引擎(主流),都能应付自如. IDT主要包括两大部分:Server + Bui ...

  4. 旨在脱离后端环境的前端开发套件 - IDT之Server篇

    IDT,一个基于Nodejs的,旨在脱离后端环境的前端开发套件,目的就是能让前端开发完全脱离后端的环境,无论后端是什么模板引擎(主流),都能应付自如. IDT主要包括两大部分:Server + Bui ...

  5. 阿里云Ubuntu快速建站

    阿里云Ubuntu快速建站 有一个小笑话: 从前有个程序员遇到了一个问题.他想,没事,我懂,用线程就好了.现他有两个问题了. 本人小白,对网站部署什么都不懂,只是申请个阿里云服务器,把我的站点放上去. ...

  6. 万网免费主机wordpress快速建站教程-万网主机申请

    很多小伙伴在万网的免费主机申请活动中建立起了自己的个人网站,但还是还有许多小伙伴现在想建站,却发现官网找不到免费主机的申请地址了,以为活动结束了?其实还是可以继续申请免费主机的,接下来小编给大家介绍如 ...

  7. Python快速建站系列-Part.Two-结构化和布局

    |版权声明:本文为博主原创文章,未经博主允许不得转载. 首先明确我们要建一个什么样的站,作为教程(也算自己使用tornado的一个小总结),自然功能不能太多,但又满足一个普通网站需要的就行了. 目前想 ...

  8. 使用WordPress快速建站

    安装前的准备1.下载最新版的 WordPress (这里演示为WordPress 3.5 官方中文版),解压后,将WordPress文件夹里面的所有文件,上传到你的主机空间域名所绑定的根目录.2.新建 ...

  9. 最新版本express 4.2.0的快速建站--简单举例

    express是Node.js的官方唯一推荐的框架,它扩展了http工具以及一些好用的功能.如此好用的东西,赶紧的安装起来: npm install express -g 新版本的express的命令 ...

随机推荐

  1. 寒武纪camp Day4

    补题进度:7/11 A(博弈论) 略 B 待填坑 C(贪心) 题意: 一个序列是good的当且仅当相邻两个数字不相同.给出一个长度为n的数列,每个数字是ai.定义一种操作就是把a中某个元素拿到首位去, ...

  2. asterisk 相关数据库配置 使用

    Linux/Unix下ODBC的安装: 先下载最新的unixODBC源码包(http://www.unixodbc.org/unixODBC-2.2.1.tar.gz)放到/usr/local下,然后 ...

  3. 鸟哥的Linux私房菜-----13、账号管理

  4. POST & GET & Ajax 全解

    GET&POST&Ajax 全解 一.POST和GET的差别 GET:GET方法提交数据不安全,数据置于请求行.客户段地址栏可见:GET方法提交的数据限制大小在255个字符之内.參数直 ...

  5. php事务操作示例

    <?php //数据库连接 $conn = mysql_connect('localhost', 'root', '');mysql_select_db('test', $conn); /* 支 ...

  6. ZOJ 3228 Searching the String (AC自己主动机)

    题目链接:Searching the String 解析:给一个长串.给n个不同种类的短串.问分别在能重叠下或者不能重叠下短串在长串中出现的次数. 能重叠的已经是最简单的AC自己主动机模板题了. 不能 ...

  7. Xcode中使用git

    项目中添加git 也可在开始新建项目时勾选git,这是针对开始没有勾选git的情况 打开终端 cd 项目文件目录 //初始化一个代码仓库, git init //将当前目录及子目录中的文件标记为要添加 ...

  8. 每天复习Shell—ls

    ls命令是linux下最经常使用的命令.ls命令就是list的缩写缺省下ls用来打印出当前文件夹的清单假设ls指定其它文件夹那么就会显示指定文件夹里的文件及文件夹清单. 通过ls 命令不仅能够查 ...

  9. VS2013如何调用别人发布的WebService程序

    这篇经验会告诉我们如何调用别人发布的WebService,并且需要注意的事项.现在就拿获取天气预报的接口举例,因为文中不允许有链接,所以在下文图中有WebService链接的地址. 工具/原料 VS2 ...

  10. Revit插件开发HelloWorld

    1. 使用 VS2012 先建立一个项目. 2. 在这里我们选择建立C# 类库项目, 改动项目名称为HelloWorld. 能够自己定义改动项目存放路径. 3. 加入 Revit 插件 API 的引用 ...