一个好玩的偏视觉交互的前端开发工具箱 / 套件 - Uix Kit

本贴最后更新于 1747 天前,其中的信息可能已经天翻地覆

第一次玩这个社区,来学习活跃下 😇 分享点有趣的东西(由于业务需求不同,目前没有做中文版,产品本身是针对国外网站),自己本身是做 UI 出生,开发只是业余爱好,仅仅作为平时工作的需要。杂七杂八会一些前后端开发。并非职业码农!

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

Uix Kit —— 它是一个偏视觉交互的工具集合,它基于常用的脚本库,帮助开发者快速完成一套完整的交互型网站。

Demo

Uix Kit

由于 Github Page 不支持 PHP 和异步请求,可以通过下面的网址查看完整 Demo

Uix Kit

20190531-151518@2x.jpg

20190531-151524@2x.jpg

随着时代的进步,很多零代码拖拽建站工具,智能建站工具,这些工具能快速满足常用网站布局与交互(视差、轮播等)需求。但是往往一些定制化的交互(3D,VR,SVG 等),还是需要运用常用的引擎和库来完成整个交互构架。面对一些特殊的视觉交互需求,就需要一套工具箱,来帮助开发者快速完成网站的结构,标准参考,基础视觉样式、网格布局等,Uix Kit 由此而诞生!

它不是一个框架,不是一个脚本库,它是一个兼容 Bootstrap 的快速建站 HTML5 套件,遵循 W3C 标准,包括手风琴、Tab 切换、大型导航、单页、视差、分页、项目符号列表、文章列表、网格系统、AJAX 交互、常用的多风格轮播、视频、计数器、作品画廊展示、模态弹窗、简易灯箱、无限滚动加载、鼠标交互、滚动侦听动画、时间轴、按钮、多风格 Footer、文字效果、徽章、表单等等常用的网站模块,并支持官方无限更新和扩展、优化,满足各类常用的、交互和动效级的 Web 前端开发需求。

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

需求:

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

描述:

    • 模块批量打包生成
    • 采用 BEM 命名,与其它框架和库互不冲突
    • 简单的自定义 CSS 和 JS 核心文件,方便直接用其制作网站
    • 很好的跨设备响应式支持
    • 独立的组件文件夹,可任意删除和增加,开发环境中自动识别组件库并进行打包
    • 支持中文和英文
    • 兼容 Bootstrap 4.x
    • 提供常见的网页组件和布局
    • 标准代码规范
    • W3C 支持
    • Webpack 通用脚手架

推荐使用方法:

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

1.从 github 或者 npm 上直接下载 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
├── misc/
│   ├── screenshots/
│   └── grid/
├── src/
│   ├── index.js
│   ├── index-rtl.js
│   ├── components/
│   │   ├── ES5/  => Third-party plugins adopt pure file merger and do not import and export
│   │   └── ES6/  => Core modules
├── examples/
│   ├── *.html
│   ├── assets/
│   │       ├── css/
│   │       ├── fonts/
│   │       ├── images/
│   │       ├── videos/
│   │       ├── models/
│   │       ├── json/
│   │       └── js/
└──

小提示:

一个小小的工具箱,为非数据交互类网站做一个结构铺垫,提高效率 :)业余码手,多多支持~

打赏 5 积分后可见
5 积分 • 4 打赏
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    393 引用 • 3381 回帖
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    103 引用 • 294 回帖
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    180 引用 • 446 回帖 • 4 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    710 引用 • 1173 回帖 • 193 关注
3 操作
xizon 在 2019-06-17 17:21:30 更新了该帖
xizon 在 2019-06-06 11:59:25 更新了该帖
xizon 在 2019-06-01 14:11:21 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...