Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Sync CSS & JS Breakpoint Values
RESS = {};
RESS.resize = function() {
var a;
return function() {
clearTimeout(a);
a = setTimeout(function() {
a = null;
RESS.storeSizes();
}, 250);
};
};
RESS.writeCookie = function(a, b) {
document.cookie = a + "=" + b + "; path=/";
};
RESS.storeSizes = function() {
RESS.writeCookie("RESS_width", window.innerWidth);
};
RESS.storeSizes();
if (window.getComputedStyle) {
window.addEventListener("resize", RESS.resize());
var screenWidth = window.getComputedStyle(document.body, ":after").getPropertyValue("content").replace(/"/g, '');
};
var breakpoint;
var update_breakpoint = function(){
breakpoint = getComputedStyle(document.body, '::after').getPropertyValue('content').replace(/"/g, '');
};
window.addEventListener('resize', update_breakpoint);
update_breakpoint();
body:after {
content: 'nano';
display: none;
}
@media screen and (min-width: 480px) {
body:after {
content: 'x-small';
}
}
@media screen and (min-width: 640px) {
body:after {
content: 'small';
}
}
@media screen and (min-width: 768px) {
body:after {
content: 'medium';
}
}
@media screen and (min-width: 960px) {
body:after {
content: 'large';
}
}
@media screen and (min-width: 1170px) {
body:after {
content: 'x-large';
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment