Daniel Furze furzeface

## google-analytics-custom-event-tracking-function.js
// Wrap it so if GA is not initialised it doesn't go 'undefined'!
function analytics_custom_event_tracker(name, event, label)
{
    if (typeof ga === 'function')
    {
        return ga('send', 'event', name, event, label);
    }
}


## Anchor CMS config bootstrap
//Goes in your anchor/config/db.php file

//$$REPLACE_THESE$$ with your demo and live db details

switch ($_SERVER['SERVER_NAME']) {

    case 'demo.domain.com': //eg. 'demodaniel.furzeface.com' for me
        return array(
            'default' => 'mysql',
            'prefix' => 'anchor_', //change if you want

## removing-gist-styles.js
var domLinks = document.getElementsByTagName('link'); // Get all the <link>'s
    // Will most likely find stylesheets but will find any with rels eg rel="canonical/author/external..."
    // Unfortunately we can't just traverse the <head> as the Gist stylesheet is embedding with the Gist in your pages <body>

    var gistLinks = [];

    for (var i = 0, l = domLinks.length; i < l; i++)  {//loop 'em
        var el = domLinks[i]; //current link
        // If 'gist' is in the href -
        if (el.href.indexOf('gist') > -1) {

## GitHub Gist Basic Styles
.gist {
  color: #000;

  .render-container {
    .render-viewer-error,
    .render-viewer-fatal,
    .octospinner {
      display: none;
    }
  }

## lovely-media-queries.css
//=Variables
//=Media Queries
$breakpoint-tiny: 20em;
$breakpoint-small: 30em;
$breakpoint-medium: 50em;
$breakpoint-extra-medium: 65em; //lol
$breakpoint-large: 80em;
$breakpoint-extra-large: 100em;

//=Global Styles

## standard-media-queries.css
@media all and (min-device-width : 320px)
and (max-device-width : 480px) {
/*style all the things*/
}


@media all and (max-width : 320px) {
/*style all the things*/
}

## replace-svg-with-png.js
// Use Modernizr to check
if (!Modernizr.svg) {
    // Using jQuery
    $('img').each(function () { // Could also be more specific if you know where the svg's will be e.g. $('#work-content img')
        var $img = this, // Cache current image DOM element in a variable
            src = $img.src.split('.'), // Split the source
            extension = src[src.length - 1]; // Make sure it's the last part of the split string

        if (extension === 'svg') {
            src[src.length - 1] = 'png'; // If it's svg, do all the things

## show-which-media-query.css
.query {
    position:absolute;
    top: 5px;
    left: 5px;
}

.query:after{
    content: "[YOUR MEDIA QUERY HERE]";
}

## text overflow ellipsis
/*HTML (the easy part)*/
<ul>
    <li>Daniel Furze</li>
    <li class="ellipsis">Mc Testerson Longname IV</li>
</ul>

/*CSS (still a pretty easy part)*/
.ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
	// Wrap it so if GA is not initialised it doesn't go 'undefined'!
	function analytics_custom_event_tracker(name, event, label)
	{
	if (typeof ga === 'function')
	{
	return ga('send', 'event', name, event, label);
	}
	}
	//Goes in your anchor/config/db.php file

	//$$REPLACE_THESE$$ with your demo and live db details

	switch ($_SERVER['SERVER_NAME']) {

	case 'demo.domain.com': //eg. 'demodaniel.furzeface.com' for me
	return array(
	'default' => 'mysql',
	'prefix' => 'anchor_', //change if you want
	var domLinks = document.getElementsByTagName('link'); // Get all the <link>'s
	// Will most likely find stylesheets but will find any with rels eg rel="canonical/author/external..."
	// Unfortunately we can't just traverse the <head> as the Gist stylesheet is embedding with the Gist in your pages <body>

	var gistLinks = [];

	for (var i = 0, l = domLinks.length; i < l; i++) {//loop 'em
	var el = domLinks[i]; //current link
	// If 'gist' is in the href -
	if (el.href.indexOf('gist') > -1) {
	.gist {
	color: #000;

	.render-container {
	.render-viewer-error,
	.render-viewer-fatal,
	.octospinner {
	display: none;
	}
	}
	//=Variables
	//=Media Queries
	$breakpoint-tiny: 20em;
	$breakpoint-small: 30em;
	$breakpoint-medium: 50em;
	$breakpoint-extra-medium: 65em; //lol
	$breakpoint-large: 80em;
	$breakpoint-extra-large: 100em;

	//=Global Styles
	@media all and (min-device-width : 320px)
	and (max-device-width : 480px) {
	/style all the things/
	}


	@media all and (max-width : 320px) {
	/style all the things/
	}
	.query {
	position:absolute;
	top: 5px;
	left: 5px;
	}

	.query:after{
	content: "[YOUR MEDIA QUERY HERE]";
	}
	/HTML (the easy part)/
	<ul>
	<li>Daniel Furze</li>
	<li class="ellipsis">Mc Testerson Longname IV</li>
	</ul>

	/CSS (still a pretty easy part)/
	.ellipsis{
	overflow: hidden;
	text-overflow: ellipsis;