craigmdennis’s gists

craigmdennis / clearsans.scss

Created May 22, 2014 01:52

The correct @font-face setup for Clear Sans

	// ===================================================
	// Font Face Rules
	// ===================================================

	@font-face {
	font-family: 'Clear Sans';
	font-style: normal;
	font-weight: 100;
	src: local('ClearSans-Thin'), local('Clear Sans Thin'),
	url('../fonts/clearsans/ClearSans-Thin.eot'),

craigmdennis / index.html

Created May 11, 2014 14:21

A SASS mixin to dynamically create intrinsic ratios for responsive embedded content. For more info visit http://alistapart.com/article/creating-intrinsic-ratios-for-video

	<!-- The `data-ratio` attribute contains the width and height of the image -->

	<div data-ratio="560-300" class="responsive-wrapper">
	<img src="http://placehold.it/560x300" class="fill-container"/>
	</div>

	<div data-ratio="420-315" class="responsive-wrapper">
	<iframe width="420" height="315" src="//www.youtube.com/embed/dQw4w9WgXcQ?rel=0" frameborder="0" allowfullscreen class="fill-container"></iframe>
	</div>

craigmdennis / Gruntfile.js

Last active January 4, 2016 10:59

Gruntfile.js adapted from Yeoman Generator Webapp to handle Jade compilation.

	// Generated on 2014-03-14 using generator-webapp 0.4.8
	'use strict';

	// # Globbing
	// for performance reasons we're only matching one level down:
	// 'test/spec/{,/}.js'
	// use this if you want to recursively match all subfolders:
	// 'test/spec/*/.js'

	module.exports = function (grunt) {

craigmdennis / flexbox.less

Created October 27, 2013 11:45

Flexbox LESS mixin References: https://gist.github.com/jayj/4012969 https://gist.github.com/wzr1337/6398757

	// --------------------------------------------------
	// Flexbox LESS mixins
	// The spec: http://www.w3.org/TR/css3-flexbox
	// --------------------------------------------------

	// Flexbox display
	// flex or inline-flex
	.flex-display(@display: flex) {
	.old-flex-display(@display);
	display: ~"-webkit-@{display}";

craigmdennis / gist:6917403

Created October 10, 2013 12:17

Iterate over a breadcrumb with Jade to include 'current' page and disabled states after the current page.

	//- The breacrumb text and links
	-var menu = { 'item 1': '#', 'item 2': '#', 'item 3': '#', 'item 4' : '#', 'item 5': '#'}

	//- Allow us to override this within a child template
	block vars
	-var selected = 'item 1' //- default
	-var enabled = true //- Use links until changed to disabled, then use divs

	ol.breadcrumb
	each val, key in menu

craigmdennis / functions.php

Last active December 24, 2015 10:38

Adapted a Wordpress custom walker to add <i> & icon classes within <a> of the menu using native 'custom classes' interface.

	<?php

	class description_walker extends Walker_Nav_Menu
	{

	function start_el(&$output, $item, $depth, $args)
	{
	global $wp_query;
	$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

craigmdennis / gist:6776365

Created October 1, 2013 10:12

Instead of nested functions when animating

craigmdennis / form.html

Last active December 24, 2015 05:09

Dynamically combine form fields for progressive enhancement. TODO - Add a function to add up the maxlengths and minlengths for the new input

	<fieldset>
	<legend class="section-title">Direct Debit Details</legend>
	<div class="form-row">
	<fieldset>
	<legend>Sort Code</legend>
	<div class="input-wrap input-type-text js-combine-trigger">
	<label for="q13-1">First 2 digits of sort code</label>
	<input type="text" id="q13-1" minlength="2" maxlength="2" pattern="[0-9]" required aria-required="true">
	</div>
	<div class="input-wrap input-type-text js-combine-trigger">

craigmdennis / .gitignore_global

Last active December 23, 2015 18:49

craigmdennis / intrinsic-ratio

Last active December 23, 2015 15:19

A LESS mixin to create fluid images with no re-flow, based on intrinsic ratios and absolute positioning. Reference: http://mobile.smashingmagazine.com/2013/09/16/responsive-images-performance-problem-case-study http://alistapart.com/article/creating-intrinsic-ratios-for-video

Craig Dennis craigmdennis