# css-adapter

> css adapter, to handle different adaptation of the equipment.

Latest version **0.1.1** (published 2018-04-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install css-adapter
pnpm add css-adapter
yarn add css-adapter
bun add css-adapter
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2018-04-06 |
| First published | 2014-06-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 0.8.0 |
| Dependencies | 1 |
| Unpacked size | 64.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | donghanji |
| Maintainers | donghanji |
| Keywords | gruntplugin |

## Links

- npm: https://www.npmjs.com/package/css-adapter
- Repository: https://github.com/donghanji/css-adapter
- Issues: https://github.com/donghanji/css-adapter/issues
- npm.io page: https://npm.io/package/css-adapter

## Dependencies (1)

- [grunt-lib-contrib](https://npm.io/package/grunt-lib-contrib.md) ~0.6.1

## Recent versions

- 0.1.1 (latest) — 2018-04-06
- 0.1.0 — 2018-04-06
- 0.0.8 — 2018-04-06
- 0.0.7 — 2018-04-05
- 0.0.5 — 2014-12-11
- 0.0.4 — 2014-12-10
- 0.0.3 — 2014-06-10
- 0.0.2 — 2014-06-10
- 0.0.1 — 2014-06-09

## README

css-adapter
===========



##### css adapter, to handle different adaptation of the equipment.

## Getting Started
This plugin requires Grunt ~0.4.1
If you haven't used <a href="http://gruntjs.com/">Grunt</a> before, be sure to check out the <a href="http://gruntjs.com/getting-started">Getting Started</a> guide, as it explains how to create a <a href="http://gruntjs.com/sample-gruntfile">Gruntfile</a> as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

    npm install css-adapter
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
    
	adapter:{
        options:{
            "compile":"",
            "dpi":{
                "max-width":"1200px",
                "standard":1024,
                "broad":{
                    
                },
                "narrow":{
                    
                }
            },
            "units":{
                "em":0.5
            },
            "others":{
                
            },
            "mins":{
                
            },
            "maxs":{
                
            },
            "prefixs":['-webkit-','-moz-','-ms-','-o-'],
            'adapters':{
                'attrs':['border-image','border-radius','box-shadow','background-origin','background-clip','background-size','display','box-sizing','box-pack','box-flex','transform','transform-origin','animation','transition'],
                'vals':{
                    'display':'box'
                }
            }
        },
        /*dist:{
            src:["samples/test4.css"],
            dest:"samples/test4.adapter.css"
        }*/
        /*dist:{
            files:_FILES
        }*/
        dist:{
            files:grunt.file.expandMapping(['*samples.css','!samples*.adapter.css'], '', {
                rename: function(base,file) {
                    
                    return file.replace(/\.css/i,'.adapter.css');
                }
            })
        }
    }
	
	
	grunt.loadNpmTasks('css-adapter');
	
#### You can use it in combination with the grunt-contrib-watch,like this:
    watch:{
        scripts:{
            files:['samples/*.css','!samples/*.adapter.css'],
            tasks:['adapter'],
            options:{
                debounceDelay:200,
                interrupt:true
            }
        }
    }
    
    grunt.loadNpmTasks('grunt-contrib-watch');

##Settings
    "compile"(""|"all"|"standard"|"broad"|"narrow"):Debug and easy to view the results,
    "dpi":{//about dpi set,minimum width ,maximum width, and for the specific dpi value
        "min-width":
        "max-width":
        "standard":
        "broad":{
            "1200":{
                
            }
        },
        "narrow":{
            "320":{
                
            }
        }
    },
    "units":{//for the digit units,like px,em, and %
        "px":20,
        "em":0.5
    },
    "others":{//
        "margin-top":10
    },
    "mins":{
        "font-weight":100
    },
    "maxs":{
        "font-weight":900
    },
    "prefixs":['-webkit-','-moz-','-ms-','-o-'],
    'adapters':{
        'attrs':['border-radius'],//-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;
        'vals':{
            'display':'box'//display:-webkit-box;display:-moz-box;display:-ms-box;display:-o-box;
        }
    }

---
_Source: https://npm.io/package/css-adapter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._