This is a refined version of @AndrewHathaway's and @DannyLePage's javascript site pattern.
Has global methods, site wide methods, and page-specific methods.
<?php | |
/** | |
* I just wanted PHP to be more like JavaScript, a smidge. :( | |
* | |
* *goes back to JS* | |
*/ | |
class Awray | |
{ |
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 |
<?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'); |
This is a refined version of @AndrewHathaway's and @DannyLePage's javascript site pattern.
Has global methods, site wide methods, and page-specific methods.
//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 |
/* | |
* 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 */ |
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+ */ |
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+ */ |
body { | |
font-family: 'verdana'; | |
} | |
input { display: none; } | |
.banner { | |
height: 40px; | |
background: black | |
} |
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.
<div class="meter"></div>