andrewhathaway

<?php

/**
 * I just wanted PHP to be more like JavaScript, a smidge. :( 
 * 
 * *goes back to JS*
 */

class Awray
{

andrewhathaway

var Gulp        = require('gulp');
var Del         = require('del');
var Rename      = require('gulp-rename');
var RunSequence = require('run-sequence');
var Yargs       = require('yargs');

var argv = Yargs.argv;

/**
 * Build Settings

andrewhathaway

<?php

function time_elapsed($date) {
	$date_one = new DateTime($date);
	$date_two = new DateTime(date('jS F Y'));

	$diff = $date_two->diff($date_one);

	$years = plural_delegate($diff->y, 'years');
	$months = plural_delegate($diff->m, 'months');

andrewhathaway

This is a refined version of @AndrewHathaway's and @DannyLePage's javascript site pattern.

Has global methods, site wide methods, and page-specific methods.

andrewhathaway

//Work out EM for font sizes etc.

// USAGE: font-size: em(12);
// USAGE: font-size: em(12, 16);

@function em($target, $parent: strip-units($body_base_font_size)) {
  @return ($target / $parent) + em;
}

//Used for the EM function above - Removes units from a number

andrewhathaway

/*
 * Commit And Push - CAP.
 * Cap function to add, commit and push.
 * Drop this in ~/.bash_profile
 * Usage - cap 'commit message'
 *  - Andrew Hathaway
 */

cap() {
        git add . ; /* Add all changes */

andrewhathaway

div {
	height: 100px;
	width: 100px;
	
	background: rgb(64,150,238); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(64,150,238,1) 0%, rgba(64,150,238,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(64,150,238,1)), color-stop(100%,rgba(64,150,238,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(64,150,238,1) 0%,rgba(64,150,238,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(64,150,238,1) 0%,rgba(64,150,238,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(64,150,238,1) 0%,rgba(64,150,238,1) 100%); /* IE10+ */

andrewhathaway

div {
	height: 100px;
	width: 100px;
	
	background: rgb(64,150,238); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(64,150,238,1) 0%, rgba(64,150,238,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(64,150,238,1)), color-stop(100%,rgba(64,150,238,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(64,150,238,1) 0%,rgba(64,150,238,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(64,150,238,1) 0%,rgba(64,150,238,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(64,150,238,1) 0%,rgba(64,150,238,1) 100%); /* IE10+ */

andrewhathaway

body {
	font-family: 'verdana';
}
input { display: none; }

.banner {
	height: 40px;
	background: black
}

andrewhathaway

How to write a cool CSS3 progress bar

I was set the task to write a progress bar at work recently, and I couldn't really think of a way to do it at first. After a while I came up with this. I'm going to show you how to write one and if you want to see a demo there is one here. We will start with a basic progress bar and extend it as we go on.

The way I did this is pretty simple to be honest. I started off with a div. This acts as your outer 'container' which you set to the width of your choice.

HTML

<div class="meter"></div>

CSS