Eztable Design Library
13
EZTABLE Design Library Live Styleguide - kcliu F2E@EZTABLE
-
Upload
kuang-che-liu -
Category
Engineering
-
view
126 -
download
0
description
How we crafted EZTABLE design library by SASS + KSS
Transcript of Eztable Design Library
![Page 1: Eztable Design Library](https://reader033.fdocuments.us/reader033/viewer/2022061208/54897175b47959fb0c8b5983/html5/thumbnails/1.jpg)
EZTABLE Design LibraryLive Styleguide
- kcliu F2E@EZTABLE
![Page 2: Eztable Design Library](https://reader033.fdocuments.us/reader033/viewer/2022061208/54897175b47959fb0c8b5983/html5/thumbnails/2.jpg)
Why need it?● learn from Bootsrap, Semantic UI● better communication
● consistency● reusable components● boost development
![Page 3: Eztable Design Library](https://reader033.fdocuments.us/reader033/viewer/2022061208/54897175b47959fb0c8b5983/html5/thumbnails/3.jpg)
How to build Styleguide
SASS + KSS
![Page 4: Eztable Design Library](https://reader033.fdocuments.us/reader033/viewer/2022061208/54897175b47959fb0c8b5983/html5/thumbnails/4.jpg)
SASS● Modular file structure with @import● Variables● demo
![Page 5: Eztable Design Library](https://reader033.fdocuments.us/reader033/viewer/2022061208/54897175b47959fb0c8b5983/html5/thumbnails/5.jpg)
SASS
![Page 6: Eztable Design Library](https://reader033.fdocuments.us/reader033/viewer/2022061208/54897175b47959fb0c8b5983/html5/thumbnails/6.jpg)
SASS
![Page 7: Eztable Design Library](https://reader033.fdocuments.us/reader033/viewer/2022061208/54897175b47959fb0c8b5983/html5/thumbnails/7.jpg)
KSS
![Page 8: Eztable Design Library](https://reader033.fdocuments.us/reader033/viewer/2022061208/54897175b47959fb0c8b5983/html5/thumbnails/8.jpg)
KSS● human readable● machine parsable● work for SASS, SCSS, LESS …● Ruby
![Page 9: Eztable Design Library](https://reader033.fdocuments.us/reader033/viewer/2022061208/54897175b47959fb0c8b5983/html5/thumbnails/9.jpg)
kss-nodeA NodeJS Implementation of KSS
![Page 10: Eztable Design Library](https://reader033.fdocuments.us/reader033/viewer/2022061208/54897175b47959fb0c8b5983/html5/thumbnails/10.jpg)
![Page 11: Eztable Design Library](https://reader033.fdocuments.us/reader033/viewer/2022061208/54897175b47959fb0c8b5983/html5/thumbnails/11.jpg)
![Page 12: Eztable Design Library](https://reader033.fdocuments.us/reader033/viewer/2022061208/54897175b47959fb0c8b5983/html5/thumbnails/12.jpg)
![Page 13: Eztable Design Library](https://reader033.fdocuments.us/reader033/viewer/2022061208/54897175b47959fb0c8b5983/html5/thumbnails/13.jpg)
Refs● http://sass-lang.com/guide● http://semantic-ui.com/● https://speakerdeck.com/kneath/a-better-futu
re-with-kss● https://github.com/kss-node/kss-node