Skip to content

Instantly share code, notes, and snippets.

@IcarusFW
IcarusFW / mediaqueries.scss
Last active August 29, 2015 14:14
autogenerating IE-fallback mediaquery mixin
// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
//
// a combination of the z-index property map Gist: http://sassmeister.com/gist/29202828a1c37714f5e1
// and Jake Archibald's IE-friendly Sass mediaqueries: http://jakearchibald.github.io/sass-ie/
// thanks to both for their respective contributions.
//
// this variation uses named breakpoints taken from a map, rather than using hardcoded values within
// the mixin call. removes the need for hardcoded arbitrary values within code.
@IcarusFW
IcarusFW / border-shorthand-mixin.scss
Last active August 29, 2015 14:17
A Sass mixin to simplify the creation of border shorthands for specific elements.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
// Sass - Border Shorthand Mixin
// A mixin to simplify writing multiple border shorthands for specific elements.
// To-do:
// - Improve @if-else chaining
// - Nested functions?
@IcarusFW
IcarusFW / modular-colours.scss
Last active November 28, 2017 12:21
Auto-generating Sass map and function to create a series of modular colour classes, for quick extension to a site's theme.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
// map format:
// $base: (
// $color: $value [background-color, text-color]
// )
@IcarusFW
IcarusFW / lazyloader.js
Created September 13, 2016 08:05
LazyLoader - preload overlay generator
var LazyLoader = function(selector, args) {
var fn = {
insert: function(){
target.each(function(){
var docFragment = $(document.createDocumentFragment());
docFragment.append('<div class="lazyLoader"><span class="lazyLoader-icon"></span></div>')
$(this).prepend(docFragment);
});
},
fade: function(){
@IcarusFW
IcarusFW / em-calc.less
Last active July 18, 2018 16:51
Automatic em-calc mixins for Sass and Less (requires up-to-date compilers)
@font-context: 16;
.em-calc(@target, @property, @context: @font-context) {
.loop(length(@target));
.loop(@i) when (@i > 0) {
.loop(@i - 1);
@{property}+_: (extract(@target, @i) / @context) + 0em;
}
}
@IcarusFW
IcarusFW / requestAnimationFrame.js
Created July 20, 2018 08:28
Functions to reduce window.resize and window.scroll handlers to one, and handle all animation via requestAnimationFrame
var flags = {
scrolled: false,
resized: false
}
var timers = {
scroll: -1,
resize: -1,
delta: 16.67 // (1/60fps) / 1000ms = 16.67ms per frame
}
var windowValues = {
@IcarusFW
IcarusFW / t4_conditionalImage.html
Created August 21, 2018 10:56
A snippet to output a chunk of markup for an image dependent on whether that image is inserted into the markup. (TerminalFour)
<t4 type="content" name="Text Panel Breakout Image" output="selective-output" process-format="true" modifiers="" format="<div class='image-container'><div class='panel-img' style='background-image: url(<t4 type=&quot;content&quot; name=&quot;Text Panel Breakout Image&quot; output=&quot;normal&quot; modifiers=&quot;&quot; formatter=&quot;path/*&quot; />);'></div></div>" />
@IcarusFW
IcarusFW / findMinMax.js
Created September 11, 2018 09:49
Find the minimum and maximum value in a series of data arrays (used with datavis plugins eg D3 to find axis ranges)
function findMinMax(arr, start) {
var min = parseInt(start[0]) || parseInt(arr[0]);
var max = parseInt(start[1]) || parseInt(arr[0]);
for (let i = 0, len=arr.length; i < len; i++) {
var v = parseInt(arr[i]);
min = (v < min) ? v : min;
max = (v > max) ? v : max;
}
@IcarusFW
IcarusFW / .gulpfile
Last active August 3, 2022 12:52
Nunjucks - JSON into Template Macro
var manageEnvironment = function(environment) {
environment.addFilter("json", function(value) {
return JSON.parse(value); // convert the complete string imported by Nunjucks into JSON and return
});
};
gulp.task("nunjucks", function() {
// .njk files in pages
return (
gulp