Skip to content

Instantly share code, notes, and snippets.

View JonCatmull's full-sized avatar

Jon Catmull JonCatmull

View GitHub Profile
@JonCatmull
JonCatmull / _speechbubblepointer.scss
Last active August 29, 2015 14:09
A Pen by Jon Catmull.
@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
JonCatmull / curly_swap.php
Last active August 29, 2015 14:10
Function to Swap words inside double curly braces for entries in an array
<?php
function curlySwap($shortcodes,$string) {
return preg_replace_callback(
'/\{\{(\w+)\}\}/',
function ($match) {
global $shortcodes;
return $shortcodes[substr($match[0], 2, -2)];
},
$string
);
@JonCatmull
JonCatmull / distance.js
Created December 19, 2014 16:13
Get distance between to points in JavaScript
function distance(x1,y1,x2,y2) {
return Math.sqrt(Math.pow((x1-x2),2)+Math.pow((y1,y2),2));
}
@JonCatmull
JonCatmull / _cols.scss
Created January 19, 2015 11:12
Special column mixins and functions allowing easy generation of column layouts
@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
JonCatmull / _responsive-sprite.scss
Last active December 21, 2016 10:20
Create a responsive sprite map with support for svg and png. Uses modernizer for png fallback.
@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 {
/*------------------------------------*\
$DEFAULT STRUCTURE
\*------------------------------------*/
$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
JonCatmull / gulpfile.js
Created February 11, 2015 09:19
Basic gulp setup for start of project
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'
}
{
"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
JonCatmull / wordpress-next-prev-btns.php
Created February 23, 2015 10:07
Code for completely custom wordpress next and previous buttons
<?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>';
}
else
{
@JonCatmull
JonCatmull / gmaps-example.html
Last active March 8, 2021 19:15
Google maps with class and data attributes
<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>