@curiousmedia/breakpoint 1.4.0 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.nvmrc +1 -0
- package/create-import-version.js +11 -0
- package/demo/index.html +50 -0
- package/demo/style.css.map +1 -0
- package/demo/style.scss +54 -0
- package/dist/breakpoint.esm.js +83 -0
- package/dist/breakpoint.js +1 -166
- package/package.json +13 -8
- package/readme.md +107 -41
- package/rollup.config.js +29 -0
- package/src/_breakpoint.import.scss +175 -0
- package/src/_breakpoint.scss +161 -67
- package/src/breakpoint.js +84 -121
- package/npm-shrinkwrap.json +0 -2268
package/.nvmrc
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
10
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
let fs = require('fs');
|
|
2
|
+
let path = require('path');
|
|
3
|
+
|
|
4
|
+
let scss = fs.readFileSync(path.join(__dirname, 'src', '_breakpoint.scss'));
|
|
5
|
+
|
|
6
|
+
let reg = new RegExp("(presets|preset|parses|parse|removeNth|matchingRules|joinQueries|build|any|all|prop)\\(", 'g');
|
|
7
|
+
scss = scss.toString().replace(reg, function(match, offset, string) {
|
|
8
|
+
return `breakpoint${offset.charAt(0).toUpperCase() + offset.slice(1)}(`
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
fs.writeFileSync(path.join(__dirname, 'src', '_breakpoint.import.scss'), scss);
|
package/demo/index.html
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport"
|
|
6
|
+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
7
|
+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
8
|
+
<title>Breakpoint demo</title>
|
|
9
|
+
<link rel="stylesheet" href="style.css">
|
|
10
|
+
<script src="../dist/breakpoint.js"></script>
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<div>
|
|
14
|
+
<div class="md">md: <span></span></div>
|
|
15
|
+
<div class="smlg">sm, lg: <span></span></div>
|
|
16
|
+
<div class="landscapesm">landscape, sm: <span></span></div>
|
|
17
|
+
<div class="smcustom">sm, custom: <span></span></div>
|
|
18
|
+
<div class="nested">nested: <span></span></div>
|
|
19
|
+
</div>
|
|
20
|
+
<script>
|
|
21
|
+
let bp = new Breakpoint({
|
|
22
|
+
landscape: '@media (orientation: landscape)',
|
|
23
|
+
touch: '@media screen and (pointer: coarse)',
|
|
24
|
+
cursor: '@media screen and (pointer: fine)',
|
|
25
|
+
hover: '@media screen and (hover: hover)',
|
|
26
|
+
still: '@media screen and (prefers-reduced-motion)',
|
|
27
|
+
sm: '@media (max-width: 640px)',
|
|
28
|
+
md: '@media (min-width: 641px) and (max-width: 1024px)',
|
|
29
|
+
lg: '@media (min-width: 1025px)',
|
|
30
|
+
grid: '@supports (display: grid)',
|
|
31
|
+
page: '@page'
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
window.addEventListener('resize', resize);
|
|
35
|
+
|
|
36
|
+
function resize() {
|
|
37
|
+
document.querySelector('.md span').innerHTML = (bp.any('md')) ? 'true' : 'false';
|
|
38
|
+
document.querySelector('.smlg span').innerHTML = (bp.any('sm', 'lg')) ? 'true' : 'false';
|
|
39
|
+
document.querySelector('.landscapesm span').innerHTML = (bp.all('landscape', 'sm')) ? 'true' : 'false';
|
|
40
|
+
document.querySelector('.smcustom span').innerHTML = (bp.all('sm', '@media (min-width: 400px)')) ? 'true' : 'false';
|
|
41
|
+
document.querySelector('.nested span').innerHTML = (
|
|
42
|
+
(bp.any('hover') && bp.any('landscape', 'sm'))
|
|
43
|
+
|| bp.all('hover', 'md', 'grid')
|
|
44
|
+
) ? 'true' : 'false';
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
resize();
|
|
48
|
+
</script>
|
|
49
|
+
</body>
|
|
50
|
+
</html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/_breakpoint.import.scss","style.scss"],"names":[],"mappings":"AAiHQ;ECjGJ;IACI;;;ADgGA;EC3FJ;IACI;;;AD0FA;ECrFJ;IACI;;;ADoFA;EC/EJ;IACI;;;AD8EA;EC1ER;IAGM;;;ADuEE;EAIA;IAJA;MC1ER;QAOM;;;;;;ADmEE;EC9DR;IDwHM,WCvHiC;;;AD6D/B;EC9DR;IDwHM,WCvHiC","file":"style.css"}
|
package/demo/style.scss
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
@import '../src/breakpoint';
|
|
2
|
+
|
|
3
|
+
$breakpoints: (
|
|
4
|
+
landscape: "@media (orientation: landscape)",
|
|
5
|
+
touch: "@media screen and (pointer: coarse)",
|
|
6
|
+
cursor: "@media screen and (pointer: fine)",
|
|
7
|
+
hover: "@media screen and (hover: hover)",
|
|
8
|
+
still: "@media screen and (prefers-reduced-motion)",
|
|
9
|
+
sm: "@media (max-width: 640px)",
|
|
10
|
+
md: "@media (min-width: 641px) and (max-width: 1024px)",
|
|
11
|
+
lg: "@media (min-width: 1025px)",
|
|
12
|
+
grid: "@supports (display: grid)",
|
|
13
|
+
page: "@page"
|
|
14
|
+
);
|
|
15
|
+
|
|
16
|
+
@include breakpointAny(md) {
|
|
17
|
+
div {
|
|
18
|
+
font-size: 2em;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@include breakpointAny(sm, lg) {
|
|
23
|
+
div {
|
|
24
|
+
font-size: 2em;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@include breakpointAll(landscape, sm) {
|
|
29
|
+
div {
|
|
30
|
+
font-size: 2em;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@include breakpointAll(sm, '@media (min-width: 400px)') {
|
|
35
|
+
div {
|
|
36
|
+
font-size: 2em;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
div {
|
|
41
|
+
@include breakpointAny(hover) {
|
|
42
|
+
@include breakpointAny(landscape, sm) {
|
|
43
|
+
font-size: 2em;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@include breakpointAll(md, grid) {
|
|
47
|
+
font-size: 3em;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
div {
|
|
53
|
+
@include breakpointProp('font-size', (lg: 1em, md: 2em));
|
|
54
|
+
}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
class Breakpoint {
|
|
2
|
+
constructor(breakpoints) {
|
|
3
|
+
this.breakpoints = breakpoints;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
presets(queries) {
|
|
7
|
+
return queries.map((query) => {
|
|
8
|
+
return this.preset(query);
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
preset(query) {
|
|
13
|
+
if(typeof this.breakpoints[query] === 'string') {
|
|
14
|
+
return this.breakpoints[query];
|
|
15
|
+
} else {
|
|
16
|
+
return query;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
parses(queries) {
|
|
21
|
+
return queries.map((query) => {
|
|
22
|
+
return this.parse(query);
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
parse(query) {
|
|
27
|
+
let ruleIndex = query.search(' ');
|
|
28
|
+
|
|
29
|
+
if(ruleIndex < 0) {
|
|
30
|
+
return {
|
|
31
|
+
rule: query,
|
|
32
|
+
condition: null
|
|
33
|
+
}
|
|
34
|
+
} else {
|
|
35
|
+
return {
|
|
36
|
+
rule: query.substring(0, ruleIndex),
|
|
37
|
+
condition: query.substring(ruleIndex + 1)
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
tests(queries) {
|
|
43
|
+
return queries.map((query) => {
|
|
44
|
+
return this.test(query);
|
|
45
|
+
})
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
test(query) {
|
|
49
|
+
switch(query.rule) {
|
|
50
|
+
case "@media":
|
|
51
|
+
if(window.matchMedia) {
|
|
52
|
+
return window.matchMedia(query.condition).matches
|
|
53
|
+
} else {
|
|
54
|
+
return false;
|
|
55
|
+
}
|
|
56
|
+
case "@page":
|
|
57
|
+
// Javascript is never run on printed documents; @page always returns true
|
|
58
|
+
return true;
|
|
59
|
+
case "@supports":
|
|
60
|
+
if(window.CSS && window.CSS.supports) {
|
|
61
|
+
return window.CSS.supports(query.condition);
|
|
62
|
+
} else {
|
|
63
|
+
return false;
|
|
64
|
+
}
|
|
65
|
+
default:
|
|
66
|
+
throw new Error('Unknown rule');
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
any(...queries) {
|
|
71
|
+
queries = this.parses(this.presets(queries));
|
|
72
|
+
|
|
73
|
+
return (this.tests(queries).indexOf(true) >= 0);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
all(...queries) {
|
|
77
|
+
queries = this.parses(this.presets(queries));
|
|
78
|
+
|
|
79
|
+
return !(this.tests(queries).indexOf(false) >= 0);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
export default Breakpoint;
|
package/dist/breakpoint.js
CHANGED
|
@@ -1,166 +1 @@
|
|
|
1
|
-
|
|
2
|
-
'use strict';
|
|
3
|
-
|
|
4
|
-
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
|
5
|
-
|
|
6
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
7
|
-
|
|
8
|
-
module.exports = function () {
|
|
9
|
-
/**
|
|
10
|
-
* @constructor
|
|
11
|
-
* @param {Array.<{id: String, query: String}>} breakpoints
|
|
12
|
-
*/
|
|
13
|
-
function Breakpoint(breakpoints) {
|
|
14
|
-
_classCallCheck(this, Breakpoint);
|
|
15
|
-
|
|
16
|
-
this.breakpoints = breakpoints;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
/**
|
|
20
|
-
* Any
|
|
21
|
-
* @param {...String} ids
|
|
22
|
-
* @return {Boolean|Null}
|
|
23
|
-
*/
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
_createClass(Breakpoint, [{
|
|
27
|
-
key: 'any',
|
|
28
|
-
value: function any() {
|
|
29
|
-
for (var _len = arguments.length, ids = Array(_len), _key = 0; _key < _len; _key++) {
|
|
30
|
-
ids[_key] = arguments[_key];
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
var result = void 0;
|
|
34
|
-
|
|
35
|
-
if (Array.isArray(ids)) {
|
|
36
|
-
result = this._queryMultiple(ids);
|
|
37
|
-
return result.indexOf(true) > -1;
|
|
38
|
-
} else if (typeof ids === 'string') {
|
|
39
|
-
return !!this._findQuery(ids);
|
|
40
|
-
} else {
|
|
41
|
-
Breakpoint._warn('Unexpected "ids" format. Expecting a breakpoint id or array of ids.');
|
|
42
|
-
return null;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
/**
|
|
47
|
-
* All
|
|
48
|
-
* @param {...String} ids
|
|
49
|
-
* @return {Boolean|Null}
|
|
50
|
-
*/
|
|
51
|
-
|
|
52
|
-
}, {
|
|
53
|
-
key: 'all',
|
|
54
|
-
value: function all() {
|
|
55
|
-
for (var _len2 = arguments.length, ids = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
56
|
-
ids[_key2] = arguments[_key2];
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
var result = void 0;
|
|
60
|
-
|
|
61
|
-
if (Array.isArray(ids)) {
|
|
62
|
-
result = this._queryMultiple(ids, true);
|
|
63
|
-
|
|
64
|
-
return result.length && result.indexOf(false) === -1;
|
|
65
|
-
} else if (typeof ids === 'string') {
|
|
66
|
-
return !!this._findQuery(ids);
|
|
67
|
-
} else {
|
|
68
|
-
Breakpoint._warn('Unexpected "ids" format. Expecting a breakpoint id or array of ids.');
|
|
69
|
-
return null;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
/**
|
|
74
|
-
* Match multiple
|
|
75
|
-
* @param {Array.<String>|String} ids
|
|
76
|
-
* @param {Boolean} [singleQuery=false] singleQuery
|
|
77
|
-
* @return {Array}
|
|
78
|
-
*/
|
|
79
|
-
|
|
80
|
-
}, {
|
|
81
|
-
key: '_queryMultiple',
|
|
82
|
-
value: function _queryMultiple(ids) {
|
|
83
|
-
var singleQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
84
|
-
|
|
85
|
-
var results = [];
|
|
86
|
-
var queryString = "";
|
|
87
|
-
|
|
88
|
-
//Loop through array
|
|
89
|
-
for (var i = 0, len = ids.length; i < len; i++) {
|
|
90
|
-
var query = this._findQuery(ids[i]);
|
|
91
|
-
|
|
92
|
-
if (singleQuery) {
|
|
93
|
-
if (i > 0) {
|
|
94
|
-
query = query.replace(/^[^(]+/, '');
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
if (query) {
|
|
98
|
-
results.push(query);
|
|
99
|
-
}
|
|
100
|
-
} else {
|
|
101
|
-
var result = Breakpoint.query(query);
|
|
102
|
-
|
|
103
|
-
if (typeof result === 'boolean') {
|
|
104
|
-
results.push(result);
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
if (singleQuery) {
|
|
110
|
-
results = [Breakpoint.query(results.join(' and '))];
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
return results;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
/**
|
|
117
|
-
* Match
|
|
118
|
-
* @param {Array.<String>|String} id
|
|
119
|
-
* @return {String}
|
|
120
|
-
*/
|
|
121
|
-
|
|
122
|
-
}, {
|
|
123
|
-
key: '_findQuery',
|
|
124
|
-
value: function _findQuery(id) {
|
|
125
|
-
var breakpoint = void 0;
|
|
126
|
-
|
|
127
|
-
if (typeof this.breakpoints[id] === 'string') {
|
|
128
|
-
return this.breakpoints[id];
|
|
129
|
-
} else {
|
|
130
|
-
return id;
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
/**
|
|
135
|
-
* Warn
|
|
136
|
-
* @param {String} message
|
|
137
|
-
*/
|
|
138
|
-
|
|
139
|
-
}], [{
|
|
140
|
-
key: '_warn',
|
|
141
|
-
value: function _warn(message) {
|
|
142
|
-
if (window.console === Object(window.console) && typeof window.console.warn === 'function') {
|
|
143
|
-
window.console.warn(message);
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
/**
|
|
148
|
-
* Query
|
|
149
|
-
* @param query
|
|
150
|
-
* @return {Boolean}
|
|
151
|
-
*/
|
|
152
|
-
|
|
153
|
-
}, {
|
|
154
|
-
key: 'query',
|
|
155
|
-
value: function query(_query) {
|
|
156
|
-
if (typeof _query === 'string') {
|
|
157
|
-
return window.matchMedia(_query).matches;
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
}]);
|
|
161
|
-
|
|
162
|
-
return Breakpoint;
|
|
163
|
-
}();
|
|
164
|
-
|
|
165
|
-
},{}]},{},[1])(1)
|
|
166
|
-
});
|
|
1
|
+
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e="undefined"!=typeof globalThis?globalThis:e||self).Breakpoint=n()}(this,function(){"use strict";function r(e,n){for(var t=0;t<n.length;t++){var r=n[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(){function n(e){!function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}(this,n),this.breakpoints=e}return function(e,n,t){n&&r(e.prototype,n),t&&r(e,t)}(n,[{key:"presets",value:function(e){var n=this;return e.map(function(e){return n.preset(e)})}},{key:"preset",value:function(e){return"string"==typeof this.breakpoints[e]?this.breakpoints[e]:e}},{key:"parses",value:function(e){var n=this;return e.map(function(e){return n.parse(e)})}},{key:"parse",value:function(e){var n=e.search(" ");return n<0?{rule:e,condition:null}:{rule:e.substring(0,n),condition:e.substring(n+1)}}},{key:"tests",value:function(e){var n=this;return e.map(function(e){return n.test(e)})}},{key:"test",value:function(e){switch(e.rule){case"@media":return!!window.matchMedia&&window.matchMedia(e.condition).matches;case"@page":return!0;case"@supports":return!(!window.CSS||!window.CSS.supports)&&window.CSS.supports(e.condition);default:throw new Error("Unknown rule")}}},{key:"any",value:function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return n=this.parses(this.presets(n)),0<=this.tests(n).indexOf(!0)}},{key:"all",value:function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return n=this.parses(this.presets(n)),!(0<=this.tests(n).indexOf(!1))}}]),n}()});
|
package/package.json
CHANGED
|
@@ -3,21 +3,26 @@
|
|
|
3
3
|
"description": "CSS and Javascript media query management tool",
|
|
4
4
|
"author": "Jason Lavorante",
|
|
5
5
|
"main": "dist/breakpoint.js",
|
|
6
|
+
"module": "dist/breakpoint.esm.js",
|
|
6
7
|
"scripts": {
|
|
7
|
-
"dist": "
|
|
8
|
+
"dist": "node create-import-version.js && rollup -c",
|
|
8
9
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
9
10
|
},
|
|
10
11
|
"devDependencies": {
|
|
11
|
-
"babel
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
12
|
+
"@babel/core": "^7.14.3",
|
|
13
|
+
"@babel/preset-env": "^7.14.2",
|
|
14
|
+
"@rollup/plugin-babel": "^5.3.0",
|
|
15
|
+
"@rollup/plugin-node-resolve": "^13.0.0",
|
|
16
|
+
"rollup": "^2.50.1",
|
|
17
|
+
"rollup-plugin-uglify": "^6.0.4"
|
|
15
18
|
},
|
|
16
|
-
"version": "
|
|
17
|
-
"dependencies": {},
|
|
19
|
+
"version": "2.0.1",
|
|
18
20
|
"repository": {
|
|
19
21
|
"type": "git",
|
|
20
22
|
"url": "https://jasonlav@willis.curiousmedia.com:7991/scm/web/breakpoint.git"
|
|
21
23
|
},
|
|
22
|
-
"license": "MIT"
|
|
24
|
+
"license": "MIT",
|
|
25
|
+
"dependencies": {
|
|
26
|
+
"sass": "^1.34.0"
|
|
27
|
+
}
|
|
23
28
|
}
|
package/readme.md
CHANGED
|
@@ -1,28 +1,68 @@
|
|
|
1
1
|
# Breakpoint #
|
|
2
2
|
Unified Javascript and SCSS breakpoint manager.
|
|
3
3
|
|
|
4
|
-
##
|
|
4
|
+
## Installation ##
|
|
5
|
+
`npm install @curiousmedia/breakpoint`
|
|
6
|
+
|
|
7
|
+
### Dart Sass ###
|
|
8
|
+
The Dart Sass implementation is highly recommend and used for all examples unless specified otherwise.
|
|
9
|
+
```scss
|
|
10
|
+
@use '@curiousmedia/breakpoint/src/breakpoint' with (
|
|
11
|
+
$breakpoints: (
|
|
12
|
+
md: "@media (hover: hover)"
|
|
13
|
+
)
|
|
14
|
+
);
|
|
15
|
+
|
|
16
|
+
@include breakpoint.any('md') {
|
|
17
|
+
.button {
|
|
18
|
+
&:hover {
|
|
19
|
+
color: red;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### LibSass & Ruby Sass ###
|
|
26
|
+
```scss
|
|
27
|
+
@import '@curiousmedia/breakpoint/src/breakpoint';
|
|
28
|
+
|
|
29
|
+
$breakpoints: (
|
|
30
|
+
md: "@media (hover: hover)"
|
|
31
|
+
);
|
|
32
|
+
|
|
33
|
+
@include breakpointAny('md') {
|
|
34
|
+
.button {
|
|
35
|
+
&:hover {
|
|
36
|
+
color: red;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## Usage ##
|
|
5
43
|
### CSS ###
|
|
6
44
|
Breakpoint presets need to be configured by setting the "breakpoints" SCSS variable.
|
|
7
|
-
```
|
|
45
|
+
```scss
|
|
8
46
|
$breakpoints: (
|
|
9
|
-
landscape: "(orientation: landscape)",
|
|
10
|
-
touch: "(pointer: coarse)",
|
|
11
|
-
cursor: "pointer: fine)",
|
|
12
|
-
hover: "(hover: hover)",
|
|
13
|
-
still: "(prefers-reduced-motion)",
|
|
14
|
-
sm: "(max-width: 640px)",
|
|
15
|
-
md: "(min-width: 641px) and (max-width: 1024px)",
|
|
16
|
-
lg: "(min-width: 1025px)"
|
|
47
|
+
landscape: "@media (orientation: landscape)",
|
|
48
|
+
touch: "@media screen and (pointer: coarse)",
|
|
49
|
+
cursor: "@media screen and (pointer: fine)",
|
|
50
|
+
hover: "@media screen and (hover: hover)",
|
|
51
|
+
still: "@media screen and (prefers-reduced-motion)",
|
|
52
|
+
sm: "@media (max-width: 640px)",
|
|
53
|
+
md: "@media (min-width: 641px) and (max-width: 1024px)",
|
|
54
|
+
lg: "@media (min-width: 1025px)",
|
|
55
|
+
grid: "@supports (display: grid)",
|
|
56
|
+
page: "@page"
|
|
17
57
|
);
|
|
18
58
|
```
|
|
19
59
|
|
|
20
|
-
Presents can be referenced for quick, unified breakpoints across an entire project.
|
|
60
|
+
Presents can be referenced for quick, unified breakpoints across an entire project. Unfortunately, CSS and Javascript breakpoints must be defined separately.
|
|
21
61
|
|
|
22
62
|
#### Single breakpoint ####
|
|
23
63
|
Create "md" breakpoint.
|
|
24
|
-
```
|
|
25
|
-
@include
|
|
64
|
+
```scss
|
|
65
|
+
@include breakpoint.any(md) {
|
|
26
66
|
div {
|
|
27
67
|
font-size: 2em;
|
|
28
68
|
}
|
|
@@ -30,9 +70,9 @@ Create "md" breakpoint.
|
|
|
30
70
|
```
|
|
31
71
|
|
|
32
72
|
#### Multiple breakpoints using `any` ####
|
|
33
|
-
Create breakpoint where
|
|
34
|
-
```
|
|
35
|
-
@include
|
|
73
|
+
Create breakpoint where `sm` or `lg` conditions are met.
|
|
74
|
+
```scss
|
|
75
|
+
@include breakpoint.any(sm, lg) {
|
|
36
76
|
div {
|
|
37
77
|
font-size: 2em;
|
|
38
78
|
}
|
|
@@ -40,9 +80,9 @@ Create breakpoint where "sm" or "lg" conditions are met.
|
|
|
40
80
|
```
|
|
41
81
|
|
|
42
82
|
#### Multiple breakpoints using `all` ####
|
|
43
|
-
Create breakpoint where
|
|
44
|
-
```
|
|
45
|
-
@include
|
|
83
|
+
Create breakpoint where `landscape` and `sm` conditions are met. If all queries use the same rule (e.g. `@media`), then they will be merged into a single breakpoint. However, if multiple queries do not use the same rule, they will be nested.
|
|
84
|
+
```scss
|
|
85
|
+
@include breakpoint.all(landscape, sm) {
|
|
46
86
|
div {
|
|
47
87
|
font-size: 2em;
|
|
48
88
|
}
|
|
@@ -51,25 +91,38 @@ Create breakpoint where "landscape" and "sm" conditions are met. When using `bre
|
|
|
51
91
|
|
|
52
92
|
#### Custom Breakpoints ####
|
|
53
93
|
Custom breakpoints can be used along side presets.
|
|
54
|
-
```
|
|
55
|
-
@include
|
|
94
|
+
```scss
|
|
95
|
+
@include breakpoint.all(sm, '@media (min-width: 400px)') {
|
|
56
96
|
div {
|
|
57
97
|
font-size: 2em;
|
|
58
98
|
}
|
|
59
99
|
}
|
|
60
100
|
```
|
|
61
101
|
|
|
62
|
-
####
|
|
63
|
-
Create
|
|
102
|
+
#### Nested ####
|
|
103
|
+
Create nested breakpoints.
|
|
64
104
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
@include
|
|
105
|
+
```scss
|
|
106
|
+
div {
|
|
107
|
+
@include breakpoint.any(hover) {
|
|
108
|
+
@include breakpoint.any(landscape, sm) {
|
|
109
|
+
font-size: 2em;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
@include breakpoint.all(md, grid) {
|
|
113
|
+
font-size: 3em;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
68
117
|
```
|
|
69
118
|
|
|
70
|
-
|
|
119
|
+
#### Short hand ####
|
|
120
|
+
Create single-property breakpoint.
|
|
121
|
+
|
|
71
122
|
```SCSS
|
|
72
|
-
|
|
123
|
+
div {
|
|
124
|
+
@include breakpoint.prop('font-size', (lg: 1em, md: 2em));
|
|
125
|
+
}
|
|
73
126
|
```
|
|
74
127
|
|
|
75
128
|
### Javascript ###
|
|
@@ -77,16 +130,18 @@ Breakpoint presets are configured when class is instantiated.
|
|
|
77
130
|
|
|
78
131
|
#### Configuration ####
|
|
79
132
|
```javascript
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
133
|
+
let bp = new Breakpoint({
|
|
134
|
+
'landscape': '@media (orientation: landscape)',
|
|
135
|
+
'touch': '@media screen and (pointer: coarse)',
|
|
136
|
+
'cursor': '@media screen and (pointer: fine)',
|
|
137
|
+
'hover': '@media screen and (hover: hover)',
|
|
138
|
+
'still': '@media screen and (prefers-reduced-motion)',
|
|
139
|
+
'sm': '@media (max-width: 640px)',
|
|
140
|
+
'md': '@media (min-width: 641px) and (max-width: 1024px)',
|
|
141
|
+
'lg': '@media (min-width: 1025px)',
|
|
142
|
+
'grid': '@supports (display: grid)',
|
|
143
|
+
'page': "@page"
|
|
144
|
+
});
|
|
90
145
|
```
|
|
91
146
|
|
|
92
147
|
#### Single breakpoint ###
|
|
@@ -102,7 +157,7 @@ bp.any('sm', 'lg'); //returns true or false
|
|
|
102
157
|
```
|
|
103
158
|
|
|
104
159
|
#### Multiple breakpoints using `all` ####
|
|
105
|
-
Query to evaluate if "landscape" and "sm" conditions are met.
|
|
160
|
+
Query to evaluate if "landscape" and "sm" conditions are met.
|
|
106
161
|
```javascript
|
|
107
162
|
bp.all('landscape', 'md'); //returns true or false
|
|
108
163
|
```
|
|
@@ -110,5 +165,16 @@ bp.all('landscape', 'md'); //returns true or false
|
|
|
110
165
|
#### Custom Breakpoints ####
|
|
111
166
|
Custom breakpoints can be used along side presets.
|
|
112
167
|
```js
|
|
113
|
-
bp.all('sm', '(min-width: 400px)'); //returns true or false
|
|
114
|
-
```
|
|
168
|
+
bp.all('sm', '@media (min-width: 400px)'); //returns true or false
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
## Notes ##
|
|
172
|
+
|
|
173
|
+
### Complex queries ###
|
|
174
|
+
This library is designed to handle common media queries. Complex queries with many conditions and `not` operators have not been tested.
|
|
175
|
+
|
|
176
|
+
### Supported rules ###
|
|
177
|
+
The `@page`, `@media`, and `@supports` rules are supported. Due to the nature of SCSS syntax, additional rules will have to be manually added.
|
|
178
|
+
|
|
179
|
+
### @page ###
|
|
180
|
+
The `@page` rule will always return `true` in the Javascript implementation; Javascript isn't computed on printed pages.
|
package/rollup.config.js
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import resolve from '@rollup/plugin-node-resolve';
|
|
2
|
+
import babel from '@rollup/plugin-babel';
|
|
3
|
+
import { uglify } from 'rollup-plugin-uglify';
|
|
4
|
+
|
|
5
|
+
export default [
|
|
6
|
+
{
|
|
7
|
+
input: 'src/breakpoint.js',
|
|
8
|
+
output: {
|
|
9
|
+
name: 'Breakpoint',
|
|
10
|
+
file: 'dist/breakpoint.js',
|
|
11
|
+
format: 'umd'
|
|
12
|
+
},
|
|
13
|
+
plugins: [
|
|
14
|
+
resolve(),
|
|
15
|
+
babel({
|
|
16
|
+
presets: [['@babel/preset-env']],
|
|
17
|
+
exclude: ['node_modules/**']
|
|
18
|
+
}),
|
|
19
|
+
uglify()
|
|
20
|
+
]
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
input: 'src/breakpoint.js',
|
|
24
|
+
output: {
|
|
25
|
+
file: 'dist/breakpoint.esm.js',
|
|
26
|
+
format: 'es'
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
];
|