Created
June 13, 2016 15:20
-
-
Save klickreflex/35013f1282fa998eb2c6103104ec5f2e to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Get Breakpoints from CSS and store in `breakpoint` object | |
| var breakpoint = {}; | |
| breakpoint.refreshValue = function () { | |
| this.value = window.getComputedStyle(document.querySelector('head'), ':before').getPropertyValue('content').replace(/\"/g, ''); | |
| }; | |
| // Put it inside a function | |
| var currentBreakFn = function() { | |
| breakpoint.refreshValue(); | |
| }; | |
| // Get the currently active breakpoint intially | |
| currentBreakFn(); | |
| // Get the updated values on resize but use lodash's debounce for better performance | |
| window.addEventListener('resize', _.debounce(currentBreakFn, 250)); | |
| // Example Breakpoint Checking | |
| /* | |
| if (breakpoint.value == 'break-1') { | |
| console.log('breakpoint break-1'); | |
| } | |
| else if (breakpoint.value == 'break-2') { | |
| console.log('breakpoint break-2'); | |
| } | |
| else if (breakpoint.value == 'break-3') { | |
| console.log('breakpoint break-3'); | |
| } | |
| else if (breakpoint.value == 'break-4') { | |
| console.log('breakpoint break-4'); | |
| } | |
| else { | |
| console.log('Some other breakpoint'); | |
| } | |
| */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // using <head> to inject content on the pseudo elelemnt | |
| // because the body's ::before is already occupied with some other styling | |
| head { | |
| &::before { | |
| content: 'break-0'; | |
| display: none; | |
| @include breakpoint(break-1) { | |
| content: 'break-1'; | |
| } | |
| @include breakpoint(break-2) { | |
| content: 'break-2'; | |
| } | |
| @include breakpoint(break-3) { | |
| content: 'break-3'; | |
| } | |
| @include breakpoint(break-4) { | |
| content: 'break-4'; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Makes Breakpoints that are defined in CSS/SCSS available in JavaScript without the need to re-declare them.