forked from jtangelder/grunt-stripmq
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathpackage.json
48 lines (48 loc) · 3.31 KB
/
package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
{
"name": "grunt-stripmq",
"title": "grunt-stripmq",
"description": "Create a desktop version of your mobile-first CSS",
"version": "0.0.2",
"licenses": [
{
"type": "MIT",
"url": "https://github.com/jtangelder/grunt-stripmq/blob/master/LICENSE"
}
],
"keywords": [
"gruntplugin",
"mediaquery",
"mobile",
"css"
],
"author": {
"name": "Jorik Tangelder",
"email": "[email protected]"
},
"repository": {
"type": "git",
"url": "git://github.com/jtangelder/grunt-stripmq.git"
},
"bugs": {
"url": "https://github.com/jtangelder/grunt-stripmq/issues"
},
"dependencies": {
"grunt": "*",
"underscore": "*",
"css-stringify": "~1.3.1",
"css-parse": "~1.5.3"
},
"devDependencies": {
"grunt-contrib-jshint": "*"
},
"node": ">=0.10.0",
"main": "index",
"readme": "# grunt-stripmq\n> Mobile-first CSS fallback\n\n## Getting Started\nThis plugin requires Grunt `~0.4.0`, and is available on [npmjs.org](https://npmjs.org/package/grunt-stripmq)\n\nA Grunt task to generate a fallback version of your fancy mobile first stylesheet.\nSince <IE9 doesnt support media queries, you can use a javascript like respond.js to enable this,\nor generate a fallback version with this task.\n\nIt parses your media queries, removes the unreachable for the given viewport, and adds the query contents\nto the stylesheet. It is important to keep the flow in your document from small to high, like in the example css below.\n\nIn your HTML you can use conditional comments to load the desktop.css for old IEs.\n\n````html\n<!--[if lt IE 9]><link rel=\"stylesheet\" href=\"desktop.css\"><![endif]-->\n<!--[if gt IE 8]><!--><link rel=\"stylesheet\" href=\"mobile-first.css\"><!--<![endif]-->\n````\n\n## Sample with default settings\n````css\nbody { background: url('mobile-background.png'); }\n\n@media screen and (min-width: 640px) {\n body { background: url('tablet-background.png'); }\n}\n\n@media screen and (max-width: 800px) {\n body { background: url('until-800px-background.png'); }\n}\n\n@media screen and (min-width: 900px) {\n body { background: url('desktop-background.png'); }\n}\n\n@media screen and (min-width: 1200px) {\n body { background: url('large-background.png'); }\n}\n\n@media (-webkit-min-device-pixel-ratio: 1.5),\n (min--moz-device-pixel-ratio: 1.5),\n (-o-min-device-pixel-ratio: 3 / 2),\n (min-device-pixel-ratio: 1.5) {\n body { background: url('hd-background.png'); }\n}\n````\n\nbecomes\n\n````css\nbody{background:url('mobile-background.png');}\nbody{background:url('tablet-background.png');}\nbody{background:url('desktop-background.png');}\n````\n\n## Grunt task\n````js\n stripmq: {\n options: {\n width: 640, // viewport width, default is 1024\n height: 480, // viewport height, default is 768\n 'device-pixel-ratio': 2 // default is 1\n }\n all: {\n files: {\n 'desktop.css': ['mobile-first.css']\n }\n }\n }\n````\n\n\n## Todo\n- Remove overwritten properties\n",
"readmeFilename": "README.md",
"_id": "[email protected]",
"dist": {
"shasum": "ba1a9013ea672ea2eb54591440f8ea253b74eb4d"
},
"_from": "grunt-stripmq@",
"_resolved": "https://registry.npmjs.org/grunt-stripmq/-/grunt-stripmq-0.0.2.tgz"
}