Skip to content

Instantly share code, notes, and snippets.


Jon Catmull JonCatmull

View GitHub Profile
View _speechbubblepointer.scss
@mixin bubblepointer($side,$size: 1,$bottom: 25%,$foreground: inherit,$background: #fff) {
@if $side == 'left' {
z-index: -1;
position: absolute;
height: 0;
padding-bottom: (7%*$size);
width: (13%*$size);
bottom: $bottom;
right: 100%;
background: $foreground;
JonCatmull / curly_swap.php
Last active Aug 29, 2015
Function to Swap words inside double curly braces for entries in an array
View curly_swap.php
function curlySwap($shortcodes,$string) {
return preg_replace_callback(
function ($match) {
global $shortcodes;
return $shortcodes[substr($match[0], 2, -2)];
JonCatmull / distance.js
Created Dec 19, 2014
Get distance between to points in JavaScript
View distance.js
function distance(x1,y1,x2,y2) {
return Math.sqrt(Math.pow((x1-x2),2)+Math.pow((y1,y2),2));
JonCatmull / _cols.scss
Created Jan 19, 2015
Special column mixins and functions allowing easy generation of column layouts
View _cols.scss
@function col($col-width-px, $container-width: $content-width-max) {
@return percentage(strip-unit($col-width-px) / strip-unit($container-width));
@mixin col($col-width-px, $container-width: $content-width-max, $gutter-px: none, $float: left) {
float: $float;
display: block;
width: col($col-width-px, $container-width);
@if ($gutter-px != 'none') {
JonCatmull / _responsive-sprite.scss
Last active Dec 21, 2016
Create a responsive sprite map with support for svg and png. Uses modernizer for png fallback.
View _responsive-sprite.scss
@mixin responsive-sprite($img, $icon-classes, $horizontal: true) {
$icon-number: ceil(length($icon-classes));
$moveby: 100% / ($icon-number - 1); // one less that actual amount
background-image: url('#{$img}');
background-position: 0 0;
background-repeat: no-repeat;
@if $horizontal {
View _grid-v1.scss
$grid_context: if($container-max-width == none, 1024px, $container-max-width) !default;
$gutter_px: 20px !default;
$max_columns:4 !default;
$gutter: percentage($gutter_px / $grid_context);
JonCatmull / gulpfile.js
Created Feb 11, 2015
Basic gulp setup for start of project
View gulpfile.js
var folders = {
sass: './resources/sass/', // Location of sass files
sassDest: './htdocs/css', // Where you want complied css files to go
js: ['./resources/js/first.js', './resources/js/plugins/*.js', './resources/js/main.js'], // js files to include (in order listed)
jsDest: './htdocs/js'
View package.json
"name": "new-web-site",
"version": "1.0.0",
"description": "Foundation for a New Web Site",
"main": "gulpfile.js",
"dependencies": {
"gulp": "^3.8.10"
"devDependencies": {
"gulp-autoprefixer": "^2.1.0",
JonCatmull / wordpress-next-prev-btns.php
Created Feb 23, 2015
Code for completely custom wordpress next and previous buttons
View wordpress-next-prev-btns.php
$prev_post = get_adjacent_post(false,'',true);
$next_post = get_adjacent_post(false,'',false);
if ( !empty( $prev_post ) )
echo '<a href="'.get_permalink($prev_post).'" class="btn arrow-left" title="'.$prev_post->post_title.'" rel="prev">Previous</a>';
JonCatmull / gmaps-example.html
Last active Aug 29, 2015
Google maps with class and data attributes
View gmaps-example.html
<div id="map-canvas-footer" style="height:300px; width:100%;" class="gMap" data-lat="<?php echo $location['lat']?>" data-lng="<?php echo $location['lng']?>"></div>
You can’t perform that action at this time.