Skip to content

Instantly share code, notes, and snippets.

@thealscott
thealscott / animated-background.css
Created February 9, 2017 15:12
Animated tiled background
@keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: -200px 0; }
}
.background {
display: block;
height: 200px;
width: 100%;
background: url(../assets/img/pattern.svg);
@thealscott
thealscott / gist:c51011a4e4855d7fe1eb
Created February 12, 2016 16:36
more reliable touch detection
function isTouchDevice() {
return (('ontouchstart' in window)
|| (navigator.MaxTouchPoints > 0)
|| (navigator.msMaxTouchPoints > 0));
}
// .-"```'.
// / \ \
// / / `\__/ ,________ _
// | .' _ _| '----)==)`<
// \(\ 6 6 `~~\__)
// | \ _\ |
// |\ `~`= `/
// | '.___.'
// .'` \ |_
// '-__ / `-
@thealscott
thealscott / gist:d54314c92b7b5aaf839a
Created June 12, 2015 11:48
Assign random colors from an array
$colors: $color-vivid-red,$color-vivid-red-medium,$color-vivid-red-dark,
$color-dark-blue,$color-dark-blue-medium,$color-dark-blue-dark,
$color-moderate-blue,$color-moderate-blue-medium,$color-moderate-blue-light,
$color-vivid-orange,$color-vivid-orange-medium,$color-vivid-orange-light;
$colors-length: length($colors);
background-color: nth($colors, random($colors-length));
@for $i from 1 through 4 {
&:nth-child(n + #{$i}) {
@thealscott
thealscott / gist:41aaa8fc755f67ffaab8
Created January 7, 2015 17:26
Method for returning IE version based on UA string
function getIEVersion() {
var ua = window.navigator.userAgent,
msie = ua.indexOf("MSIE "),
version = false;
if (msie > 0) {
// If Internet Explorer, return version number
version = (parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
}
@thealscott
thealscott / gist:999dfae86a6c5a8ecc17
Last active August 29, 2015 14:11
SASS mixin for REM based font sizing with a pixel value fallback for IE8
@mixin font-size($size, $modifier:1.6) {
/* For optimal use, adjust the default modifier value until it gives you the
same pixel value as the computed pixel value you get from using REMs.
If your root font-size is 100%, this will be 1.6 */
// IE 8 fallback in pixels
$pixel-size: ($size * 10) * $modifier;
font-size: #{$pixel-size}px;
// fontsize in REM
@thealscott
thealscott / gist:5773030249dbe23ccd04
Last active August 29, 2015 14:11
SASS mixin for prefixing calc()
@mixin calc($property, $operation) {
#{$property}: -webkit-calc(#{$operation});
#{$property}: -moz-calc(#{$operation});
#{$property}: calc(#{$operation});
}
// Make sure to pass your operation as a string, or else it will cause compile errors as SASS will try and evaluate it.
alias sub='open -a "Sublime Text"'
alias currentbranch='git rev-parse --abbrev-ref HEAD'
alias testnomigrations='forage test --settings=yunojuno.settings.test_settings.skipmigrations --verbosity=2'
export NVM_DIR="/Users/alasdairscott/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
# Git/SVN PS1
parse_git_branch () {
@thealscott
thealscott / gist:6afe9d1037951619b379
Created July 7, 2014 14:28
Get a list of changed files from Git
git diff --name-only HEAD~10 HEAD~5
@thealscott
thealscott / gist:11392835
Created April 29, 2014 07:22
Iterating over elements and applying marker class to achieve nth-of-class selection
<?php
$elements = array(
array(
'id' => 1,
'is_test' => false
),
array(
'id' => 2,
'is_test' => true
),