这个产品维护已经有一年了(由于业务需求不同,目前没有做中文版,产品本身是针对国外网站),自己本身是做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. Spring教程:tutorialspoint-spring

    来自turorialspoint的Spring教程(英文),官网:https://www.tutorialspoint.com/spring/index.htm 这个教程在国内已经被翻译成中文(不过是 ...

  2. eclipse bug之'<>'operator is not allowed for source level below 1.7

    eclipse中导入工程,报这个错'<>'operator is not allowed for source level below 1.7,把jdk改成1.7后,提示Android r ...

  3. 【APUE】进程基础

    进程标识符:非负整数 ID为0的进程通常是是调度进程,常被称为交换进程.该进程是内核的一部分,它并不执行任何磁盘上的程序,因此也被称为系统进程 ID为1的进程是init进程,在自举过程结束时由内核调用 ...

  4. Angular团队公布路线图,并演示怎样与React Native集成

    本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2015/06/angular-2-react-native-roadmap 前不久在旧 ...

  5. cocos2d-x 2.0下怎样让BOX2D DEBUG DRAW的方法笔记

    原文链接: 这两天玩 cocos2d-x 和 box2d,发现 cocos2d-x 2.0 版本号要使用老方法 debug 渲染会出错.于是找到了新方法来 debug draw: 首先在你的头文件中添 ...

  6. OSChinaclient源代码学习(2)--缓存的设计

    一.缓存的作用 请求数据的时候,首先进行推断,能否够从缓存中获取数据,假设满足条件,则直接从缓存中获取数据.否则请求新的数据.这样比没有缓存的情况下.每次都要从server请求数据要快,并且.没有网的 ...

  7. Eclipse中jvm执行库的Access restriction问题的解决方法

    今天在写代码的时候遇到了jre system libraries的訪问限制问题,该库是jvm执行的依赖库rt.jar,解决方式例如以下: 步骤: (1)项目右击.出现Build Path.点击进入Ja ...

  8. Codeforces 768 E. Game of Stones 博弈DP

    E. Game of Stones   Sam has been teaching Jon the Game of Stones to sharpen his mind and help him de ...

  9. Filter 详解

    一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态 ...

  10. (转)JFreeChart教程

    JFreeChart教程 一.jFreeChart产生图形的流程 创建一个数据源(dataset)来包含将要在图形中显示的数据>>创建一个 JFreeChart 对象来代表要显示的图形&g ...