tylersticka

// https://cloudfour.com/thinks/accessible-animated-gif-alternatives/

class GifLike extends HTMLElement {
  static motionQuery = window.matchMedia(
    "(prefers-reduced-motion: no-preference)"
  );

  connectedCallback() {
    this.video = this.querySelector("video");

tylersticka

.media-gallery__item-thumbnail:has(img:not([alt])) {
	position: relative;
}

.media-gallery__item-thumbnail:has(img:not([alt]))::after {
	align-items: center;
	background: rgb(191, 64, 64);
	border-radius: 4px;
	color: #fff;
	content: 'No alt';

tylersticka

/**
 * Iterate over a block a given number of times.
 *
 * Usage:
 *   <ul>
 *     {{#times 5}}<li>Item {{@index}}</li>{{/times}}
 *   </ul>
 */

var Handlebars  = require('handlebars');

tylersticka

/*
 * Format a date using Moment.
 * Usage: {{moment date format="MMMM YYYY"}}
 */

var Handlebars = require('handlebars'),
    _ = require('lodash'),
    moment = require('moment');

Handlebars.registerHelper('moment', function (context, block) {

tylersticka

// include gulp + template plugin
var gulp = require('gulp');
var template = require('gulp-template');
// include the koTemplates module locally
var koTemplates = require('./koTemplates');

// create the 'templates' task
gulp.task('templates', function () {
  // single-page app, so just pipe through index
  gulp.src('./src/templates/index.html')

tylersticka

/**
 * This project's actual gulpfile contains much more than this,
 * but these are the relevant bits.
 */

// Node libraries
var fs = require('fs');
var path = require('path');

// Gulp + plugins

tylersticka

/** 
 * Chrome 32/33 webfont issue fix.
 * Requires jQuery.
 * More info: http://blog.cloudfour.com/chrome-webfont-issues/
 */

(function($, window){
  // only proceed if this is Chrome
  if (window.navigator.userAgent.indexOf('Chrome') === -1) return;
  // only proceed if the version is 32 or greater

tylersticka

alias plbuild="php core/builder.php -gc"  # Pattern Lab: Build/Clean
alias plwatch="php core/builder.php -rw"  # Pattern Lab: Watch/Sync

tylersticka

// Native scrolling (iOS 5+, Android 4+)
.scrollable {
  overflow: auto; // Fallback for non-touch browsers
  -webkit-overflow-scrolling: touch; // Native-esque scrolling on touch-enabled webkit

  // Everything below here improves performance of scrolling. You can omit this at
  // first and add as your content becomes more complex and performance needs a boost.

  &, > * {
    -webkit-backface-visibility: hidden;

tylersticka

/**
 * fitvids.js is awesome but kind of dependent on pretty
 * ideal and predictable markup. Unfortunately, a lot of
 * services and sites seem to break it.
 *
 * This is a dirtier but more forgiving spin on the same
 * idea. It is probably worse, but it works.
 *
 * https://gist.github.com/tylersticka/5967626
 */