JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 35
  • Score
    100M100P100Q62331F
  • License ISC

global.css based on sass, includes normalize, reset, grid, 1px border, ellipsis, ripple, elevation(box-shadow).

Package Exports

  • global.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (global.css) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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