Skip to content

Instantly share code, notes, and snippets.

View ridgehkr's full-sized avatar

Caleb Pierce ridgehkr

2 followers · 2 following
View GitHub Profile
@ridgehkr
ridgehkr / placeholder-image.jade
Created March 27, 2014 17:49
Image placeholder mixin for Jade using the placehold.it image service
//- Generate a placeholder image from placehold.it
//- ----------------------------------
//- Parameters:
//- width: image width in pixels
//- height: image height in pixels
//- text (optional): text inside image
//- ----------------------------------
//- Usage:
//- +image(200, 120, 'Example')
//- ----------------------------------
@ridgehkr
ridgehkr / breakpoints.coffee
Last active August 29, 2015 14:01
Enquire.js w/ Foundation breakpoint classes
# Breakpoint class
# provides a way to manage and access breakpoint values for use in media queries
# read in more detail about this at https://medium.com/@caleb.pierce/coffeescript-for-responsive-websites-3398abd5e2bd
class Breakpoint
constructor: (@lower_bound, @upper_bound = "") ->
@screen = "only screen"
# returns a min-width style media query breakpoint
up: ->
@ridgehkr
ridgehkr / .bowerrc
Last active August 29, 2015 14:04
Starter Gulp Project (compiles Sass, CoffeeScript and JavaScript, Jade)
{
"directory": "bower_components"
}
@ridgehkr
ridgehkr / zepto-yepnope_with-fallback.coffee
Last active December 16, 2015 07:09
Using yepnope in CoffeeScript to test for Zepto compatibility with a fallback to jQuery
yepnope [
{
# if IE, we need jQuery. Otherwise, Zepto will do just fine
test: '__proto__' of {}
yep: '//cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js'
nope: '//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js'
complete: ->
# use local jQuery fallback if neither Zepto nor jQuery loaded
!Zepto? and !window.jQuery? and yepnope('js/libs/jquery-1.9.1.min.js')
}
@ridgehkr
ridgehkr / kill_compatibility_mode.html
Created May 7, 2013 13:17
Use this code in your document head to disable Compatibility Mode in IE 9 and older while still getting IE version classes. Anything that comes before the meta tag disabling Compatibility Mode will in turn cause IE to ignore that meta directive. Conditional comments around the opening body tag gets around this problem, so that's what I've done i…
<!DOCTYPE html>
<html lang='en' class='no-js'>
<head>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<!-- title, other meta, style, and script tags follow here -->
<!-- if you need detection for >= IE10, use my script here: https://gist.github.com/ridgehkr/5985810 -->
</head>
<!--[if IE 7]> <body class="ie7 lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <body class="ie8 lt-ie9"> <![endif]-->
@ridgehkr
ridgehkr / text_legibility.css
Created May 9, 2013 20:48
Improving text legibility in supported browsers
body {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/*
if text looks weak, use this as well:
-webkit-text-stroke: 0.35px;
*/
}
@ridgehkr
ridgehkr / fix_iOS_rotation.coffee
Created May 17, 2013 19:25
correct a screen-zoom issue on rotation in iOS - rewritten in CoffeeScript // by @mathias, @cheeaun and @jdalton // modified by @jpamental and @ridgehkr
((doc)->
addEvent = 'addEventListener'
type = 'gesturestart'
qsa = 'querySelectorAll'
scales = [1, 1]
meta = if qsa of doc then doc[qsa]('meta[name=viewport]') else []
fix = ->
meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1]
doc.removeEventListener(type, fix, true)
@ridgehkr
ridgehkr / ios_scale_fix.css
Created May 17, 2013 19:28
Fix an orientation scale bug in iOS. MUST come last in your CSS // ht @jpamental
/* Make sure this is last - helps correct for an orientation scale bug in iOS */
@media screen and (orientation:landscape) and (device-width:320px) and (device-height: 480px) {
body {
width: 480px;
}
}
@ridgehkr
ridgehkr / responsive_video_embed.scss
Created June 6, 2013 20:21
Use this SASS class to make your video embeds responsive.
.video-embed {
position: relative;
padding-bottom: 56.25%; // a 16x9 video's height is 56.25% of its width
height: 0;
object, embed, iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
@ridgehkr
ridgehkr / spaced_grid.scss
Created June 12, 2013 19:17
Grid of evenly-spaced items using text-align: justify. No need to set spacing in between columns! Changing grid item width and bottom margin is the only thing you need to tweak inside your media queries to redefine columns-per-row for different breakpoints.
// container for evenly-spaced grid items
.l-spaced-grid {
text-align: justify;
font-size: 0;
&:after {
content: '';
display: inline-block;
width: 100%;
}
}