基于 Bootstrap 4 的快速建站 HTML5 套件 Uix Kit

MIT
JavaScript HTML/CSS
跨平台
2018-02-26
xizon

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

 

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

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

 

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

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

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

 

视频快速使用方法演示:https://v.youku.com/v_show/id_XMzQzMDM5MTYwNA==.html?spm=a1z3jc.11711052.0.0&isextonly=1

演示(推荐F墙浏览)https://uiux.cc/uix-kit/

描述:

  • +  每个模块(包含SCSS和JS)自动生成目录到uix-kit.css和uix-kit.js文件中
  • +  简单的自定义CSS和JS核心文件,方便直接用其制作网站
  • +  很好的跨设备响应式支持
  • +  独立的组件文件夹,可任意删除和增加,开发环境中自动识别组件库并进行打包
  • +  支持中文和英文
  • +  核心样式表与Bootstrap 4.x兼容
  • +  提供常见的网页组件和布局
  • +  标准代码规范
  • +  W3C支持
  • +  支持Gulp&Webpack同时部署开发环境

 

推荐使用方法:

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

1.下载 https://gitee.com/xizon/Uix-Kit, 

也可从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/ 文件夹里的文件,因为代码量非常大,很难去维护和定制各种动画、交互、结构。

 

套件结构:

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/
└──

 

 

小提示:

 

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

 

 

 

的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

提高前端开发质量和效率的脚手架和工具套件 - Uix Kit

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

2018/03/01 08:52
140
0
使kivy支持中文

kivy程序原生不支持中文显示,baidu了一下后发现了解决办法 1.copy一个中文字体到kivy目录下,比如复制C:\Windows\Fonts\msyh.ttf到.\kivy\kivy\data\fonts 2.修改以下文件中的DroidSans.ttf...

2015/12/04 11:46
520
0
又一种免费域名诞生!

注册地址:http://codotvu.com/i/uix 注册流程: 新手建站练练手不想投资太大,想找一免费域名谈何容易啊~著名的.co.cc等免费域名也再国人强大的攻势败落了,而所谓的顶级域名tk也半死不活的...

2013/04/26 20:05
92
0
23 套免费的精美 UI 组件集

UI 是设计者或开发者呈现给用户的最直观的东西,一个好的 UI 可以给用户舒服的感觉,将大大增强用户的浏览体验。   本文整理了一些免费的 UI 组件集,均为 PSD 格式,希望能够为你的界面布...

2012/11/14 14:16
168
0
为 Web 设计师准备的 25+ 款扁平 UI 工具包

Flat UI Kit by Riki Tanone (free) Flat UI Kit (PSD) by Devin Schulz (free) Eerste UI Kit (free) Metro UI kit (free) Ui Kit by Abhimanyu Rana (free) Flat Ui Kit by Zachary VanDeH...

2015/05/29 06:04
62
0
提高web和图形设计人员水平的27个漂亮UI套件

图形界面用户界面设计是我们的用户在我们的网站看到的第一眼。所以 UI 工具包或 web 设计元素在界面设计中发挥非常重要的作用。UI 设计涉及很多的创意、 灵感和激励人们进行有效地与客户沟通...

2012/10/31 10:29
278
1
kivy实现焦点切换效果

Kivy是面向触屏设备的,对键盘,遥控器等输入设备的处理比较弱,但是有时候我们又需要实现对按键的处理,如通过方向键切换焦点,这篇文章来讨论下如何去实现。 在看下面的代码之前,最好是对...

2016/11/21 14:58
144
0
iOS游戏框架Sprite Kit基础教程第1章编写第一个Sprite Kit程序

iOS游戏框架Sprite Kit基础教程第1章编写第一个Sprite Kit程序

2014/12/23 14:12
435
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部