Skip to content

Instantly share code, notes, and snippets.

View jameslutley's full-sized avatar
🎯
Focusing

James Lutley jameslutley

🎯
Focusing
32 followers · 52 following
View GitHub Profile
@jameslutley
jameslutley / gist:2952230
Created June 19, 2012 03:58 — forked from harryfk/gist:2823191
Sass based, fluid grid
// the basics
*
+box-sizing(border-box)
@mixin width($percent, $alignment: null)
@if $percent == 33
$percent: 33.334
@if $percent == 66
$percent: 66.667
@jameslutley
jameslutley / getElementsByClassName.polyfill.js
Created August 15, 2012 07:18 — forked from eikes/getElementsByClassName.polyfill.js
Polyfill for getElementsByClassName
// Add a getElementsByClassName function if the browser doesn't have one
// Limitation: only works with one class name
// Copyright: Eike Send http://eike.se/nd
// License: MIT License
if (!document.getElementsByClassName) {
document.getElementsByClassName = function(search) {
var d = document, elements, pattern, i, results = [];
if (d.querySelectorAll) { // IE8
return d.querySelectorAll("." + search);
@jameslutley
jameslutley / README.md
Created October 24, 2012 02:29 — forked from necolas/README.md
Experimenting with component-based HTML/CSS naming and patterns

Template Components

Used to provide structural templates.

Pattern

t-template-name
t-template-name--modifier-name
t-template-name__subcomponent-name--subcomponent-modifier-name
@jameslutley
jameslutley / blackandwhiteimages.php
Created October 26, 2012 03:58
Generate B + W images in WordPress
<?php
add_image_size('thumbnail-bw', 400, 0, false);
add_filter('wp_generate_attachment_metadata','bw_images_filter');
function bw_images_filter($meta) {
$file = wp_upload_dir();
$file = trailingslashit($file['path']).$meta['sizes']['thumbnail-bw']['file'];
list($orig_w, $orig_h, $orig_type) = @getimagesize($file);
$image = wp_load_image($file);
imagefilter($image, IMG_FILTER_GRAYSCALE);
@jameslutley
jameslutley / gist:4188017
Created December 2, 2012 10:05 — forked from paulirish/gist:4158604
Learn JavaScript concepts with recent DevTools features

Learn JavaScript concepts with the Chrome DevTools

Authored by Peter Rybin , Chrome DevTools team

In this short guide we'll review some new Chrome DevTools features for "function scope" and "internal properties" by exploring some base JavaScript language concepts.

Closures

Let's start with closures – one of the most famous things in JS. A closure is a function, that uses variables from outside. See an example:

@jameslutley
jameslutley / sectioningcontenttest.html
Created December 9, 2012 00:40 — forked from adactio/sectioningcontenttest.html
Illustration of sectioning content and the outline algorithm in HTML5.
<!DOCTYPE html>
<html lang="en">
<title>Sectioning Content test</title>
<h1>This is an h1</h1>
<p>That h1 is the heading for the body (a sectioning root).</p>
<div>
<h1>This is another h1</h1>
<p>That h1 is inside a div so it is no different than the first h1.</p>
</div>
<section>
@jameslutley
jameslutley / _base.sass
Created December 9, 2012 23:29 — forked from andresgutgon/_base.sass
Susy set up
// Imports -------------------------------------------------------------------
@import "compass/reset"
@import "compass/typography"
@import "compass/css3"
@import "compass/layout"
@import "compass/utilities"
@import "compass/typography/vertical_rhythm"
//Grid ------------------------------------------------------------------
//Sorry susy has to be imported
@jameslutley
jameslutley / gist:4247498
Created December 9, 2012 23:30 — forked from pdewouters/gist:3277854
susy layout with ie8 fallback
* { outline: 1px solid red; }
@include border-box-sizing();
body {
//@include baseline-grid-background($base-line-height);
}
#page {
//@include susy-grid-background;
@include container;
@jameslutley
jameslutley / _magic.scss
Created December 17, 2012 12:06 — forked from mirisuzanne/_magic.scss
//-----------------------------------------------------------------------------
// Grid Settings
$total-columns : 4;
$column-width : 4.5em;
$gutter-width : 1.5em;
$grid-padding : $gutter-width;
//-----------------------------------------------------------------------------
// Responsive Variables
@jameslutley
jameslutley / _magic.scss
Created December 17, 2012 12:07 — forked from Sulcalibur/_magic.scss
//-----------------------------------------------------------------------------
// Grid Settings
$total-columns : 4;
$column-width : 4.5em;
$gutter-width : 1.5em;
$grid-padding : $gutter-width;
//-----------------------------------------------------------------------------
// Responsive Variables