Skip to content

Instantly share code, notes, and snippets.

@benedfit
Last active November 25, 2021 12:36
Embed
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";
@davidbullock
Copy link

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
Copy link

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