Caleb Pierce ridgehkr
ridgehkr
/ layers.scss
Created
October 4, 2016 19:57
A way of managing z-index values to keep them from getting out of control
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
| // Define a map of z-index layers. Utilized by layer() | |
| $layers: ( | |
| foreground: 1, | |
| local-hero: 2, | |
| local-superhero: 3, | |
| global-hero: 4, | |
| global-superhero: 5, | |
| ); | |
| /* |
ridgehkr
/ compass_animation.scss
Created
December 2, 2013 15:46
Compass mixins for generating CSS animations and keyframes
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
| /* | |
| * Compass doesn't have an animation mixin either. Here's one: | |
| * | |
| * Example usage: | |
| * @include animation(10s, 5s, changecolour) | |
| */ | |
| @mixin animation($delay, $duration, $animation) { | |
| @each $i in webkit, moz, o { | |
| -#{$i}-animation-delay: $delay; |
ridgehkr
/ radial-dropshadow.scss
Created
September 6, 2013 14:36
CSS3 radial dropshadow (requires compass)
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
| // drop-shadow for bottom of element | |
| .bottom-drop-shadow { | |
| position:relative; | |
| background: #fff; | |
| &:after { | |
| content:""; | |
| position:absolute; | |
| z-index:-1; | |
| bottom: 0; | |
| width: 90%; |
ridgehkr
/ detect_ie_version.js
Created
August 31, 2013 13:38
Detect the user's IE version and add that class to the html tag. JS version of https://gist.github.com/ridgehkr/5985810
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
| var isIE8, test_version; | |
| test_version = 8; | |
| isIE8 = (document.documentMode != null) && document.documentMode === test_version; | |
| if (isIE8) { | |
| return document.documentElement.className += ' ie8'; | |
| } |
ridgehkr
/ bugherd-nonblocking.html
Last active
December 22, 2015 00:38
Non-blocking BugHerd script. Replace your synchronous BugHerd script with this one to speed up your page up-front load time. Also a bit simpler than the code BugHerd gives you.
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
| <!-- replace XXXXXX with the Project Key BugHerd gives you in their version of this script --> | |
| <script>window._bugHerd||document.write('<script src="//www.bugherd.com/sidebarv2.js?apikey=XXXXXX"><\/script>')</script> |
ridgehkr
/ detect_ie_version.coffee
Last active
December 19, 2015 16:39
Detect IE versions in JS without conditional compliation. If there's a match, then the IE version class is added to the html tag.
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
| test_version = 10 # which version of IE to test for | |
| isIE10 = document.documentMode? and document.documentMode == test_version | |
| if isIE10 then document.documentElement.className += ' ie10' |
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.
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
| // container for evenly-spaced grid items | |
| .l-spaced-grid { | |
| text-align: justify; | |
| font-size: 0; | |
| &:after { | |
| content: ''; | |
| display: inline-block; | |
| width: 100%; | |
| } | |
| } |
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) |
NewerOlder