-
-
Save benedfit/46da533805566141c42f to your computer and use it in GitHub Desktop.
| $critical-css-only:true !default; | |
| @mixin critical($critical-only:true){ | |
| @if (($critical-css-only and $critical-only) or (not $critical-css-only and not $critical-only)){ | |
| @content; | |
| } | |
| } |
| @include critical(true){ | |
| // This is critical CSS as it's likely to be above-the-fold | |
| .logo{ | |
| color:red; | |
| } | |
| } | |
| @include critical(false){ | |
| // This is non-critical CSS as it's likely to be below-the-fold | |
| .footer{ | |
| color:blue; | |
| } | |
| } |
| .logo{ | |
| color:red; | |
| } |
| @import "critical"; | |
| @import "screen"; |
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Demo</title> | |
| <style> | |
| // Critical.css content rendered here using https://github.com/ixti/jekyll-assets | |
| // Alternatively https://github.com/jgallen23/grunt-inline-css could be an option | |
| {% asset critical.css %} | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Non-critical.css before closing body tag --> | |
| <link rel="stylesheet" href="non-critical.css" /> | |
| </body> | |
| </html> |
| .footer{ | |
| color:blue; | |
| } |
| $critical-css-only:false; | |
| @import "critical"; |
This is friggin fascinating. If you have any interest in writing up a bit about this for CSS-Tricks.com hit me up, I'm sure a ton of people would be interested in it.
👍
What about including the CSS without having to use the Assets plugin -- just by using Jekyll's built-in {% include ... %} capability? E.g. http://markdotto.com/2014/02/28/including-css-in-jekyll/
This looks amazing, I can't wait to have a play
This looks pretty useful for components whose position you can guarantee cross-site (footer's an obvious one). I think it might be harder to reap benefits in a component-based workflow: a component might appear below the fold on the home page, but above the fold somewhere else.
I'd guess that the need for critical path is inversely proportional to how large/complex a site is, and the larger and more complex a site is, the less you can guarantee the position of certain components cross-site. But still, this looks pretty cool!
Is there a way to exclude all but the classes intended for the critical.css file by default? I.e. without wrapping all non-critical styles with critical(false)? This way one only needs to define critical classes for the critical.css file, and the critical styles will be excluded from the non-critical.css file.
You could use breakup for a similar setup too. Plus, you know, media queries.
You might be interested in https://github.com/Team-Sass/jacket
The examples use browsers but it can be adapted for any conditional you want. We pobably all agree that it would be ideal to have one conditional: the equivalent of
critial(true)and have all of those styles removed when the flag is set tofalse