Caleb Pierce ridgehkr
ridgehkr
/ responsive_video_embed.scss
Created
June 6, 2013 20:21
Use this SASS class to make your video embeds responsive.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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
/ 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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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
/ 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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ((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
/ text_legibility.css
Created
May 9, 2013 20:48
Improving text legibility in supported browsers
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| /* | |
| if text looks weak, use this as well: | |
| -webkit-text-stroke: 0.35px; | |
| */ | |
| } |
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…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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
/ 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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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') | |
| } |
NewerOlder