Skip to content

Instantly share code, notes, and snippets.

Phil Ricketts replete

Block or report user

Report or block replete

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@replete
replete / stringToTemplate.ES6.js
Created Nov 22, 2015
Allows strings to be parsed as if they were ES6 `template string interpolations`.
View stringToTemplate.ES6.js
// phil@replete.nu
// Method for rendering normal strings as if they were ES6 `template strings like ${this}`
String.prototype.toTemplate = function() { return this.replace(/(\$\{.*?\})/g, m => eval('`'+m+'`')) };
View gist:d70820808bf94f8763da
/*
* Minimal classList shim for IE 9
* By Devon Govett
* MIT LICENSE
*/
if (!("classList" in document.documentElement) && Object.defineProperty && typeof HTMLElement !== 'undefined') {
Object.defineProperty(HTMLElement.prototype, 'classList', {
get: function() {
@replete
replete / FindDynamicUnCSSClasses.js
Created May 11, 2015
Add this code to your site. Open your console. Click everything interactive. Copy CSS classes into UnCSS ignore list.
View FindDynamicUnCSSClasses.js
(function(){
'use strict';
// Feature Detection
var MutationObserver = (function () {
var prefixes = ['WebKit', 'Moz', 'O', 'Ms', ''];
for(var i=0; i < prefixes.length; i++) {
if(prefixes[i] + 'MutationObserver' in window) {
return window[prefixes[i] + 'MutationObserver'];
}
@replete
replete / _lt-ie8-foundation-box-sizing.scss
Created Oct 21, 2013
Zurb Foundation Grid 4/5 IE7 support.
View _lt-ie8-foundation-box-sizing.scss
@charset "UTF-8";
/*---------------------------------------------------------------
IE6-7 Box-sizing polyfill, for Zurb ruleset
ˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍ
https://gist.github.com/replete/7082518
1) Requires box-sizing.htc from https://github.com/Schepp/box-sizing-polyfill
˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭*/
@replete
replete / _lt-ie9-foundation-grid.scss
Last active May 26, 2017
Foundation Zurb Grid 4/5 in IE7 & IE8.
View _lt-ie9-foundation-grid.scss
@charset "UTF-8";
/*---------------------------------------------------------------
IE78 - Zurb Foundation 4 Grid
ˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍ
https://gist.github.com/replete/7082477
(an enhanced fork of https://gist.github.com/zurbchris/5068210 )
1) Make sure $row-width-px = your max large breakpoint row width (e.g. 960px)
@replete
replete / zurb-foundation-4-orbit-thumbnails.html
Created Oct 14, 2013
Add thumbnails to Orbit Bullets in Zurb Foundation 4.
View zurb-foundation-4-orbit-thumbnails.html
<!DOCTYPE html>
<html class="no-js" lang="en"><head>
<head>
<title>Zurb Foundation 4 Orbit Thumbnails</title>
</head>
<body>
<style type="text/css">
.orbit-bullets.has-thumbs {
padding-left: 0;
bottom: 0;
@replete
replete / _block-grid-5.scss
Created Sep 19, 2013
Zurb Foundation 5's missing block-grid (for 4.3)
View _block-grid-5.scss
//
// Block Grid Variables
//
$include-html-grid-classes: $include-html-classes !default;
// We use this to control the maximum number of block grid elements per row
$block-grid-elements: 12 !default;
$block-grid-default-spacing: emCalc(20) !default;
// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
@replete
replete / _block-grid-5-custom.scss
Created Sep 14, 2013
I've re-aligned Zurb 4.3/5's (mainly adds 'medium') grid and block-grid to activate with corresponding media query breakpoints. See my full post at https://github.com/zurb/foundation/issues/3261
View _block-grid-5-custom.scss
// I've updated the Zurb4.3/5 Grid/block-grid systems to be in line with my suggestions at https://github.com/zurb/foundation/issues/3261
// http://github.com/replete
//
// Block Grid Variables
//
$include-html-grid-classes: $include-html-classes !default;
// We use this to control the maximum number of block grid elements per row
$block-grid-elements: 12 !default;
@replete
replete / getLayoutBreakpoint.js
Last active Dec 21, 2015
Conditional CSS Breakpoints: CSS screen-width Media Queries 'synced' with Javascript. Stores breakpoint name via CSS font-family on <head>. IE7+
View getLayoutBreakpoint.js
/*
LayoutBreakpoints - Sync JS with your CSS media queries - yay!
After painfully discovering that there is no hope for IE7 (and others) to read
content properties with generated content, I resolved to this solution.
If it doesn't work for you, you could easily change getElementsByTagName to
getElementsById and pop an ID attribute onto an element of your choosing.
See an example here: http://replete.github.io/FitTextNow/example.html (view-source)
@replete
replete / _easing.scss
Last active Dec 21, 2015
CSS3 Cubic-bezier translations of typical easing classes, in SASS variable syntax.
View _easing.scss
/*---------------------------------------------------------------
CSS Easing
ˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍ
https://gist.github.com/replete/6333588
Vanilla: #id { transition: 350ms all $ease }
Compass: #id { @include transition(350ms all $ease) }
˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭*/
You can’t perform that action at this time.