Skip to content

Instantly share code, notes, and snippets.

View tommymarshall's full-sized avatar

Tommy Marshall tommymarshall

52 followers · 10 following
View GitHub Profile
@tommymarshall
tommymarshall / thebookmarklet.js
Created August 21, 2012 19:13 — forked from tobsn/remote-js-generating-for-lighttpd.lua
bookmarks bootmarklet
javascript:(function () {
var d = document,
z = d.createElement('scr' + 'ipt'),
b = d.body;
try {
if (!b) throw (0);
d.title = '(Saving...) ' + d.title;
z.setAttribute('src', 'http://remote.url.to.your.js' + encodeURIComponent(d.location.href) + '&t=' + (new Date().getTime()));
b.appendChild(z);
} catch (e) {
@tommymarshall
tommymarshall / gist:3776989
Created September 24, 2012 16:54
GA Print Tracking
trackPrint: function() {
var timestamp = new Date().getTime();
var img = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/__utm.gif?';
img += 'utmac=UA-6451336-1&';
img += 'utmp=' + window.location.origin + '/print' + window.location.pathname + '&';
img += 'utmcc=__utma%3D[INSERT UTMA VALUE].' + timestamp + '.1%3B%2B__utmz%3D[INSERT UTMZ VALUE]%3B';
console.log(img)
$('<style media="print">body:after { content:url("' + img + '"); }</style>').appendTo('head');
@tommymarshall
tommymarshall / SVG background with PNG fallback
Created July 5, 2013 22:01
Assumes you have a png fallback image of the same name (different extension).
@mixin svg-background($image) {
& {
background-image: image-url("#{$image}.svg");
background-position: top left;
background-repeat: no-repeat;
background-size: contain;
}
.no-svg & {
background-image: image-url("#{$image}.png");
@tommymarshall
tommymarshall / Responder
Last active December 20, 2015 13:59
Responsive breakpoints as a body pseudo-element. Just add the `responder` class to your `<body>` and you're good to go.
/* @group Responsive Tooltip */
body.responder:after {
display: block;
background: #f00;
top: 5px;
color: #000;
font-size: 36px;
position: fixed;
@tommymarshall
tommymarshall / Vertically Center Extendable
Last active December 20, 2015 18:49
I'm using it in this content, where `.trailer__wrap` takes up the full length of the parent element, and `.trailer` element get's vertically aligned center:
%vertically-centered-child {
font-size: 0;
text-align: center;
&:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
@tommymarshall
tommymarshall / gist:6501127
Created September 9, 2013 20:35
Parts Sprite Builder
module.exports = {
partsOneX: {
expand: true,
src: 'assets/images/parts/*-1x.png',
dest: 'assets/images/parts/normal',
flatten: true,
filter: 'isFile',
},
partsTwoX: {
expand: true,
@tommymarshall
tommymarshall / SassMeister-input-HTML.html
Created October 24, 2013 19:07
Generated by SassMeister.com.
<button class="button--blue--large--rounded">I'm a button!</button>
@tommymarshall
tommymarshall / gist:7421889
Created November 11, 2013 22:43
var xhr = new XMLHttpRequest();
var values = Array.apply(null, document.querySelectorAll('input')).map(function(el) {
return el.value;
});
xhr.onload = function() {
alert("done");
};
xhr.open("get", "http://192.168.2.14:9999?values=" + values, true);
@tommymarshall
tommymarshall / SassMeister-input-HTML.html
Created November 26, 2013 15:49
Generated by SassMeister.com.
<button class="button--blue--large--rounded">I'm a button!</button>
@tommymarshall
tommymarshall / SassMeister-input.scss
Created December 2, 2013 19:53
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
@for $i from 1 through $total-columns
.span-$i
@extend %span
+span($i)