├── bin
├── config
├── data
├── dist
├── doc
├── lib
│ └── models
├── node_modules
├── src
I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.
TL;DR: Here's the solution I ended up with: https://github.com/filamentgroup/loadCSS/
For async JavaScript file requests, we have the async
attribute to make this easy, but CSS file requests have no similar standard mechanism (at least, none that will still apply the CSS after loading - here are some async CSS loading conditions that do apply when CSS is inapplicable to media: https://gist.github.com/igrigorik/2935269#file-notes-md ).
Seems there are a couple ways to load and apply a CSS file in a non-blocking manner:
This file contains 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
module Sass::Script::Functions | |
def file_exists(path) | |
return bool(false) unless options[:filename] # not all sass has a file name (e.g. std input) | |
current_directory = File.dirname(options[:filename]) rescue nil # a sass filename from an importer may not be processable by File.dirname | |
return bool(false) unless current_directory && File.exist?(current_directory) # not all sass files are served from the filesystem | |
full_path = File.expand_path(path.value, current_directory) # a relative path will be expanded against the current_directory of the sass file, symlinks will be followed, absolute paths will be left alone. | |
return bool(File.exist?(full_path)) | |
end | |
end |
This file contains 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
.initial | |
.top-banner-ad-container | |
.top-banner-ad-container--desktop | |
.top-banner-ad-container--facia-layout | |
.ad-slot |
This file contains 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
var isArray = function (obj) { | |
return Object.prototype.toString.call(obj) === '[object Array]'; | |
}; |
This file contains 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
/* | |
* Mini location.hash update system | |
* | |
* Usage: | |
* | |
* var createHash = require('./hash'); | |
* var hash = createHash('!/', function(value) { | |
* // Value updated | |
* }); | |
* |
This file contains 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
// Deep Breaths // | |
////////////////// | |
// Gulp | |
var gulp = require('gulp'); | |
// Sass/CSS stuff | |
var sass = require('gulp-sass'); | |
var prefix = require('gulp-autoprefixer'); | |
var minifycss = require('gulp-minify-css'); |
This file contains 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
#!/usr/bin/env bash | |
# MIT © Sindre Sorhus - sindresorhus.com | |
# git hook to run a command after `git pull` if a specified file was changed | |
# Run `chmod +x post-merge` to make it executable then put it into `.git/hooks/`. | |
changed_files="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)" | |
check_run() { | |
echo "$changed_files" | grep --quiet "$1" && eval "$2" |
This file contains 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
<h1>Row test</h1> | |
<!--[if (lte IE 9) & (!IEMobile)]> | |
<div class="old-ie"> | |
<![endif]--> | |
<!-- items: 2 --> | |
<div class="l-row l-row--items-2"> | |
<div class="l-row__item l-row__item--boost-1">1+</div> | |
<div class="l-row__item">2</div> | |
</div> |