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 Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile 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;
}
}