mattnish
/ fresh-url.js
Last active
August 29, 2015 14:27
Using Wistia's Fresh-Url with Rails' Turbolinks
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
| !function ($, window, document, undefined) { | |
| "use strict"; | |
| var FreshUrl; | |
| FreshUrl = (function() { | |
| FreshUrl.libraries = { | |
| googleAnalytics: { | |
| present: function() { |
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
| .class-fucking-up { | |
| .animation(display-hack .1s 1s 1 forwards); | |
| } |
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
| ;(function ( $, window, document, undefined ) { | |
| // Affix Classes on Scroll | |
| var inc = 0; | |
| $.fn.affix = function(options){ | |
| var options = options || {}; | |
| return this.each(function() { | |
| var $this = $(this), | |
| data = $this.data('plugin_affix'); | |
| if(!data) { | |
| data = new Affix(this, options); |
mattnish
/ mobile-input-fix
Last active
August 29, 2015 14:06
Hides fixed position elements on the page when the user focuses on inputs on mobile
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
| /* | |
| Add this on fixed position element you want to hide when the user focuses on inputs on mobile. | |
| .mobileFixForFixedEls & { | |
| @include opacity(0); | |
| @include transform(translateZ(0)); | |
| } | |
| OR some other styling that best suits the situation like... | |
| .mobileFixForFixedEls & { |
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
| // Should be used to modify the default spacing between objects (not between nodes of * the same object) | |
| // p,m = padding,margin | |
| // a,t,r,b,l = all,top,right,bottom,left,horizontal,vertical | |
| // x,s,m,l,n = extra-small(@x),small(@s),medium(@m),large(@l),none(0px) | |
| @x: 3px; | |
| @s: 5px; | |
| @m: 10px; | |
| @l: 20px; | |
| @xl: 40px; |
mattnish
/ rotating-spinner
Created
November 6, 2013 22:58
CSS for a rotating spinner that's 100px x 100px
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
| .spinner{ | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| margin-left: -50px; | |
| margin-top: -50px; | |
| z-index: 1; | |
| -webkit-animation: rotating 1s linear infinite; | |
| -moz-animation: rotating 1s linear infinite; | |
| -o-animation: rotating 1s linear infinite; |
mattnish
/ shrink-container
Last active
December 26, 2015 13:49
This is a animation to shrink down the size of the page's wrapper container to show a modal window on top. It gives the page a cool effect when trying to tell the user to focus on the content above. Just put in the 2 divs around the content and add the class shrinkDown when your trigger is clicked.
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
| .outerContainer{ | |
| -webkit-perspective: 800px; | |
| -moz-perspective: 800px; | |
| perspective: 800px; | |
| background:#212121; | |
| } | |
| .container{ | |
| -webkit-transform-style: preserve-3d; | |
| -webkit-transform-origin: 50% 50%; | |
| -moz-transform-style: preserve-3d; |
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
| /* | |
| RESPONSIVE VIDEO CONTAINER | |
| THANKS TO ZURB FOUNDATION FRAMEWORK | |
| */ | |
| .flex-video { | |
| position: relative; | |
| padding-top: 25px; | |
| padding-bottom: 67.5%; | |
| height: 0; | |
| margin-bottom: 16px; |