This is just stuff that I have put down that I find I use a lot of the time for my own reference.
$ git pull
<!-- | |
favicons (see http://www.jonathantneal.com/blog/understand-the-favicon) | |
--- | |
icon format dimensions documentation | |
---- ------ ---------- ------------- | |
apple-touch-icon PNG 152x152 https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW1 | |
icon PNG 96x96 | |
shortcut icon ICO 32x32 | |
msapplication-TileImage PNG 144x144 |
/******************************************************************************* | |
1. DEPENDENCIES | |
*******************************************************************************/ | |
var gulp = require('gulp'); // gulp core | |
sass = require('gulp-sass'), // sass compiler | |
uglify = require('gulp-uglify'), // uglifies the js | |
jshint = require('gulp-jshint'), // check if js is ok | |
rename = require("gulp-rename"); // rename files | |
concat = require('gulp-concat'), // concatinate js |
@mixin center-align($dir: false) { | |
$map: ( | |
top: ( Y ), | |
left: ( X ) | |
); | |
@if map_get($map, $dir) != null { | |
#{$dir}: 50%; | |
transform: #{"translate#{map_get($map,$dir)}(-50%)"}; | |
} @else { |
/** | |
* VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units | |
* | |
* To overcome this, create media queries that target the width, height, and orientation of iOS devices. | |
* It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing | |
* the height of element `.foo` —which is a full width and height cover image. | |
* | |
* iOS Resolution Quick Reference: http://www.iosres.com/ | |
*/ | |
<?php | |
/** | |
* Plugin Name: Gulp Sitemap Generator | |
* Plugin URI: https://gladdy.uk/blog/2014/04/13/using-uncss-and-grunt-uncss-with-wordpress/ | |
* Description: Generate a JSON list of every page on a site so it can be used with Gulp and uncss. | |
* Author: Liam Gladdy | |
* Author URI: http://gladdy.co.uk | |
* Version: 1.0 | |
*/ |
@mixin quantity-query($selector, $type, $amount, $max: null) { | |
@if $type == at-least { | |
#{$selector}:nth-last-child(n+#{$amount}), | |
#{$selector}:nth-last-child(n+#{$amount}) ~ #{$selector} { @content; } | |
} @else if $type == at-most { | |
#{$selector}:nth-last-child(-n+#{$amount}):first-child, | |
#{$selector}:nth-last-child(-n+#{$amount}):first-child ~ #{$selector} { @content; } | |
} @else if $type == between { | |
@if type-of($max) != "number" { | |
@error "Max value must be a number for quantity-query."; |
module.exports = (image, caption, className) => {
const classMarkup = className ? ` class="${className}"` : '';
const captionMarkup = caption ? `<figcaption>${caption}</figcaption>` : '';
return `<figure${classMarkup}><img src="/img/${image}" />${captionMarkup}</figure>`;
// the line below does all this in one line, but is more confusing:
// return `<figure${className ? ` class="${className}"` : ''}><img src="/img/${image}" />${caption ? `<figcaption>${caption}</figcaption>` : ''}</figure>`;
};