https://github.com/imweb/sheral
Focus in mobile UI
https://github.com/imweb/sheral
Last synced: 9 months ago
JSON representation
Focus in mobile UI
- Host: GitHub
- URL: https://github.com/imweb/sheral
- Owner: imweb
- License: mit
- Created: 2016-05-03T01:01:56.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2017-10-28T06:22:27.000Z (over 8 years ago)
- Last Synced: 2025-04-09T22:18:01.386Z (about 1 year ago)
- Language: CSS
- Homepage: http://imweb.github.io/sheral
- Size: 24.2 MB
- Stars: 235
- Watchers: 39
- Forks: 46
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# sheral
Focus in mobile UI.
基于[sandal](https://github.com/marvin1023/sandal)（基础sass库）扩展的移动端UI库。具体设计思想可参看[sheral——一个方便定制及扩展的UI组件库](http://imweb.io/topic/578392f6ba724c663b83527d)
## demo
[在线demo](http://imweb.github.io/sheral)
相关教程可参看：
- [移动端重构实战系列1——基础知识](http://imweb.io/topic/577e64a47c99347163ec0b10)
- [移动端重构实战系列2——line list](http://imweb.io/topic/577e7bb87c99347163ec0b14)
- [移动端重构实战系列3——各种等分](http://imweb.io/topic/577e7c0f7c99347163ec0b15)
- [移动端重构实战系列4——进入离开动画](http://imweb.io/topic/577e7cf17c99347163ec0b16)
- [移动端重构实战系列5——form元素](http://imweb.io/topic/578307abba724c663b835279)
- [移动端重构实战系列6——icon与图片](http://imweb.io/topic/57830874ba724c663b83527a)
- [移动端重构实战系列7——环形UI](http://imweb.io/topic/57860c1962a261a62914407f)
PS：sheral目前只专注重构这块，所以js写得比较简略，只是为了简单演示使用，同时欢迎感兴趣的小伙伴加入重构或转成其他js组件库
## 本地搭建
先克隆到本地，再运行npm install，安装完毕运行`gulp`命令，然后浏览器输入`http://localhost:8888/index.html`即可
```js
npm install
```
```js
gulp
```
## webpack 调用
```scss
// 先调用 sandal 的 _function.scss，如需要reset样式则调用 _core.scss
@import '~sass-sandal/_function';
// or
@import '~sass-sandal/_core';
// 再调用需要的模块
@import '~sheral/components/_btn';
@import '~sheral/components/_line-list';
```