Giter Site home page Giter Site logo

exui's Introduction

ExUI, Inspired by WeUI, Antui, Ionic, Sui and Bootstrap.

概述

ExUI 是一套借鉴多套UI库衍生出来的重复车轮,代码结构抄袭了微信的 WeUI, 细节部分同时参考了阿里的 Antui、Sui,还有Ionic、Bootstrap,同时借鉴了Semantic-UI对于class的命名习惯。
从整体来说,ExUI其实就是借鉴成熟流行的框架,加上一些个人喜好的集成,从而衍生出来的舶来品。

命名

命名我参照了Semantic-UI的命名习惯,因为我不喜欢prefix的命名习惯。

当然这也可能导致与现存项目命名冲突,所以ExUI更适合作为新项目的基础UI模板,而并不适合作为插件迁移到已有的项目中,混用已有项目可能会导致命名冲突,当然你也可以自行修改源码以便适应你的项目。

1PX

为了美观还原1像素的问题,由于DPR的不同,之前的项目里采用了阿里的Flexible方案,但是这衍生出多个问题:

  1. 构建复杂度上升,需要将现有的CSS单位由PX转换成REM,无法使用Css sprite,无法使用内联style,img标签的width、height属性无法设置,在HTML页面内嵌style元素都需要经过px to rem的转换。

  2. 各种莫名其妙的小问题:比如INPUT经过缩放,在PC开发模拟和某些Andriod机型时,经常无法通过点击聚焦。

  3. 当需要输入第三方富文本的时候无法直接输出:比如你在构建商城,商品详情是后台录入的编辑器输出的,由于框架采用了缩放方案会导致同时也会缩放富文本,这就出现缩小问题,为了解决你依然需要在输出时进行转换,但是又由于富文本编辑器有时候你无法预知单位,比如它会混合使用PT、EM等等,这会照成很多麻烦。

  4. 由于很多Android设备不支持延迟生成viewport,为了适配手机型号,引入了比较繁杂的脚本来识别UA的设备类型。

所以最终放弃了Flexible的方案 1PX的显示方案参考了了WeUI的transfrom:scale方法。

手机预览

扫码体验:

http://exui.legend.life

链接预览: http://exui.legend.life

字体

内置的ICON使用的是阿里妈妈的开源字体库,你可以通过这个链接查看到内置的字体内容:
你也可以构建适合自己的字体库来替换项目内置的,当然需要重新build整个工程,并修改部分示例中的icon编码。

License

The MIT License(http://opensource.org/licenses/MIT)

请自由地享受和参与开源

贡献

如果你有好的意见或建议,欢迎给我提issue或pull request.

exui's People

Contributors

whosesmile avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.