Skip to content

Instantly share code, notes, and snippets.

View clayb's full-sized avatar

clayb

2 followers · 3 following
  • New York
View GitHub Profile
@clayb
clayb / countdown-clock.html
Created December 27, 2018 19:09 — forked from peternatewood/countdown-clock.html
A simple, efficient countdown clock. No jQuery required.
<!DOCTYPE html>
<html>
<head>
<title>Countdown Clock</title>
<meta charset="utf-8"/>
<style type="text/css">
#countdown-container {
display: -ms-flex;
display: -moz-flex;
display: -webkit-flex;
@clayb
clayb / woocommerce_thank_you_data_layer.php
Created December 7, 2018 20:41 — forked from mejdzer/woocommerce_thank_you_data_layer.php
<?php
/**
* Render dataLayer on a WooCommerce thank you page.
* This file should be added at the end of Theme Functions (functions.php)
*
* Official Class descriptions:
* https://docs.woocommerce.com/wc-apidocs/class-WC_Abstract_Order.html
* https://docs.woocommerce.com/wc-apidocs/class-WC_Order.html
* https://docs.woocommerce.com/wc-apidocs/class-WC_Order_Item.html
* https://docs.woocommerce.com/wc-apidocs/class-WC_Abstract_Legacy_Order.html
@clayb
clayb / resetInlineDisplay.js
Created October 22, 2018 17:00
Reset Inline dislplay styles
function resetInlineDisplay() {
for (var i = 0; i < arguments.length; i++) {
arguments[i].css('display', '');
}
}
// example usage
var navEls = $('.nav-link-text, #nav-overlay');
var navLinks = $('.nav-links');
// remove inline styles for display
@clayb
clayb / _base.scss
Created May 22, 2018 20:15
Typical base scss setup with variables and mixins
@import "compass/reset";
@import "compass/utilities/general/clearfix";
@import "compass/css3";
@import "breakpoint";
// Colors
$color-red: #C84942;
$color-red-hover: #B6312A;
$color-pink: #E9B7B4;
@clayb
clayb / gist:4df572f661f94320f4067d362f3d89fc
Last active March 16, 2017 17:21
Convio Optimizely Form Submission/Revenue Tracking
<!-- START optimizely Total Revenue Goal -->
<script type="text/javascript">
var donationAmount = '[[E130:"[[S120:dc:giftAmount]]" "$" "" replaceall]]';
donationAmount = donationAmount.replace(/,/g, '') * 100;
window.optimizely = window.optimizely || [];
window.optimizely.push(['trackEvent', 'donation_success', {'revenue': donationAmount}]);
</script>
<!-- END optimizely Total Revenue Goal -->
@clayb
clayb / classes.js
Created December 8, 2016 21:10
pure javascript add class and remove class functions
var els = document.getElementsByClassName('current-class-name');
removeClass(els, 'current-class-name');
addClass(els, 'new-class-name');
var el = document.getElementById('current-class-name');
removeClass([el], 'current-class-name');
addClass([el], 'new-class-name');
function addClass(elements, className) {
for (var i = 0; i < elements.length; i++) {
@clayb
clayb / social-share-links.html
Created April 28, 2016 21:38
share links for Facebook and Twitter
@clayb
clayb / retina-sprites.scss
Last active June 3, 2016 15:31
Retina Sprites mixin by Gaya Kessler, modified to allow sprite scaling.
/*
* Retina Sprites for Compass
* by: Gaya Kessler
* last update: 03/11/14
*
* Usage:
* 1. create two folders in your image directory (in this case 'icons' and 'icons-2x').
* 2. adjust the foldernames defined below if you use different names.
* 3. create sprite images for pixel ratio 1 screens and put them in the first folder.
* 4. create sprite images for pixel ratio 2 screens and put them in the second folder, use the same filenames.
@clayb
clayb / compass-centering.scss
Last active May 22, 2018 18:36
Vertical and Horizontal Centering Mixins with Compass
// vertcal and horizontal alignment
// Flexbox Method: uses flexbox to horizontally and vertically center child element (this may be less buggy than the centering mixins below)
@mixin flex-center-child-elements {
display: flex;
justify-content: center;
align-items: center;
}
// Transform Method: sometimes blurry
@clayb
clayb / px-to-em.scss
Created April 29, 2015 19:27
Px to EM mixin
// Mixin to convert px to em
$base-font-size: 16px;
@function em($px, $base: $base-font-size) {
@return ($px / $base) * 1em;
}