global.css
v1.1.0
Published
global.css based on sass, includes normalize, reset, grid, 1px border, ellipsis, ripple, elevation(box-shadow).
Downloads
131
Maintainers
Readme
global.css
global.css based on sass, includes normalize
, reset
, grid
, 1px border
, ellipsis
, ripple
, elevation(box-shadow)
.
0.TODO List
- support
stylus
Quick Start
1.Installation
$ npm install --save global.css
2.Intro
mainly includes:
normalize.scss
reset.scss
/* flex grid */
mixins/_grid.scss
/* support change $pseudo on params */
mixins/_border.scss (1px hack)
/* NOTE: if you use "autoprefixer",
you should set remove: false option, or set Safari 6 on .browserslistrc,
for multi-line's ellipsis take effect */
mixins/_ellipsis.scss
/* support change $pseudo on params */
mixins/_ripple.scss
/* use box-shadow, raise elements elevation in vision. (not z-index) */
mixins/_elevation.scss
3.Usage
After installed in node_modules, you can use it free.eg. (-> Detail Document[Document Store].)
1. Import all
@import '~global.css/global';
2. Import partials as you like:
/* just use normalize&reset */
@import '~global.css/src/normalize';
@import '~global.css/src/reset';
@import '~global.css/src/grid';
@import '~global.css/src/border';
@import '~global.css/src/ellipsis';
@import '~global.css/src/ripple';
3. Import mixins as you like:
@import '~global.css/src/mixins/grid';
@import '~global.css/src/mixins/border';
@import '~global.css/src/mixins/ellipsis';
@import '~global.css/src/mixins/ripple';
@import '~global.css/src/mixins/elevation';
@import '~global.css/src/mixins/grid';
@import '~global.css/src/mixins/border';
@import '~global.css/src/mixins/ellipsis';
@import '~global.css/src/mixins/ripple';
4. Import css files as you like:
@import '~global.css/dist/global.css';
/* or min file */
@import '~global.css/dist/global.min.css';
And others:
@import '~global.css/dist/grid.css';
@import '~global.css/dist/border.css';
@import '~global.css/dist/ellipsis.css';
@import '~global.css/dist/ripple.css';
@import '~global.css/dist/elevation.css';
/* or min files */
@import '~global.css/dist/grid.min.css';
@import '~global.css/dist/border.min.css';
@import '~global.css/dist/ellipsis.min.css';
@import '~global.css/dist/ripple.min.css';
@import '~global.css/dist/elevation.min.css';
5. Add app
directory, include four files _var.scss
_mixins.scss
_functions.scss
main.scss
as reflections for the application, which files in src/assets/scss
. src
directory on the same level with node_modules
.
6. Version
v1.1.0
- add
elevation(box-shadow)
v1.0.x
- init project
- add
normalize
- add
reset
- add
grid
- add
1px border
- add
ellipsis
- add
ripple