Skip to content

Instantly share code, notes, and snippets.

Avatar

Ben Frain benfrain

View GitHub Profile
@benfrain
benfrain / SublimeLinterUser.js
Last active Aug 29, 2015
SublimeLinterUserSettings.js
View SublimeLinterUser.js
{
"user": {
"debug": false,
"delay": 0.25,
"error_color": "D02000",
"gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",
"gutter_theme_excludes": [],
"lint_mode": "background",
"linters": {
"csslint": {
@benfrain
benfrain / assetLoad.js
Created Feb 20, 2014
Non jQuery add CSS file to head based (using Modernizr as the switch here but use whatever)
View assetLoad.js
;(function assetLoad(){
var ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "css/SVG-data-uris.css";
var ssPNG = document.createElement("link");
ssPNG.type = "text/css";
ssPNG.rel = "stylesheet";
ssPNG.href = "css/PNG-data-uris.css";
@benfrain
benfrain / index.html
Last active Aug 29, 2015
Changing SVG in object based on events
View index.html
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Chart test</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {
height: 2000px;
@benfrain
benfrain / screen-co-ordinates.js
Created Feb 24, 2014
Nice simple screen size and co-ordinates with vanilla JS
View screen-co-ordinates.js
// Get dimensions:
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight || e.clientHeight || g.clientHeight;
// Scroll pos
var top = window.pageYOffset || document.documentElement.scrollTop;
@benfrain
benfrain / Gruntfile.js
Created Mar 20, 2014
Gruntfile.js and package.json for G-Unit
View Gruntfile.js
module.exports = function(grunt) {
// Time everything
require('time-grunt')(grunt);
/*
Start tasks
*/
var sassFolder = 'sass/**/*.scss';
var liveReloadWatchItems = [
'*.html',
@benfrain
benfrain / svg-fallback.css
Last active Aug 29, 2015
Simple SVG/PNG fallback
View svg-fallback.css
background-image: url('../images/logo.png');
background-image: url('../images/logo.svg'), none;
/* Works because there is parity between SVG support and multiple backgrounds – more info: http://css-tricks.com/svg-fallbacks/ */
/* Update 10/4/2014 - from my own testing there are instances where this fails. For example, Android 2.3 */
/* ####################################################
Use With Caution
@benfrain
benfrain / clearfix.scss
Last active Aug 29, 2015
Clearfix (Sass and CSS variants)
View clearfix.scss
// ====================================================================
// Micro clearfix (Sass)
// ====================================================================
@mixin cf {
&:before,
&:after {
content: "";
display: table;
}
&:after {
@benfrain
benfrain / Globals.js
Created Apr 22, 2014
Quickly find any Global JS variables
View Globals.js
console.log(Object.keys(window));
@benfrain
benfrain / jsInjection.js
Created May 21, 2014
Wordpress: Add a JS file only on certain custom post types
View jsInjection.js
function build_js(){
if (is_singular( array( 'patterns' ) )) {
wp_enqueue_script( 'Pattern_Injector', get_template_directory_uri() . '/assets/js/patternInjector.js', '', '1.0.0', true );
}
}
add_action('wp_enqueue_scripts', 'build_js');
@benfrain
benfrain / no-hash-link.js
Created May 23, 2014
Stop default action on any a tag with a hash link
View no-hash-link.js
You can’t perform that action at this time.