Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Critical CSS using Sass and Jekyll
$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";
@rupl
rupl commented Jun 13, 2014

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 to false

@chriscoyier

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.

@gionkunz
gionkunz commented Sep 7, 2014

👍

@davidtheclark

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/

@zweck
zweck commented Feb 4, 2015

This looks amazing, I can't wait to have a play

@itsravenous

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!

@davidbullock

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.

@aarongustafson

You could use breakup for a similar setup too. Plus, you know, media queries.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment