- @mentions, #refs, links, formatting, and
tagssupported - list syntax required (any unordered or ordered list supported)
- this is a complete item
- this is an incomplete item
Erik Flowers erikflowers
erikflowers
/ Remove sticky for mobile.coffee
Created
January 26, 2013 05:13
A snippet of coffeescript I am using to disable any sticky header/nav when on a mobile device. Viewport size was not as reliable when dealing with landscape tablets and desktop browsers having the same viewport, but one needing sticky and another not.
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
| $(document).ready detectMobileDisable = -> | |
| ua = navigator.userAgent.toLowerCase() | |
| if (ua.indexOf("android") > -1) or (ua.indexOf("iphone") > -1) or (ua.indexOf("ipod") > -1) or (ua.indexOf("ipad") > -1) | |
| $(document).ready -> | |
| $("#element_to_unstick").addClass "noStick" | |
| $("#element_that_needs_buffer_offset").addClass "noBuffer" |
erikflowers
/ gist:5230313
Created
March 24, 2013 03:07
super simple background-size: cover so CSS backgrounds will always be maximized, if your browser supports it.
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
| .background-cover(@cover: cover) { | |
| -webkit-background-size: @cover; | |
| -moz-background-size: @cover; | |
| -o-background-size: @cover; | |
| background-size: @cover; | |
| } |
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
| .expanded { | |
| > label { | |
| background: #ffffff; /* Old browsers */ | |
| background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* IE10+ */ | |
| background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */ |
erikflowers
/ hsl_hsla.sublime-snippet
Created
May 10, 2013 00:17
hsl and hsla sublime text 2 snippets
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
| <!-- HSL snippet --> | |
| <snippet> | |
| <content><![CDATA[ | |
| hsl(${1:0}, ${2:100}%, ${3:100}%) | |
| ]]></content> | |
| <tabTrigger>hsl</tabTrigger> | |
| <scope>source.css, source.scss, source.sass, source.less</scope> | |
| <description>hsl()</description> | |
| </snippet> |
erikflowers
/ font-awesome.sublime-completions
Created
May 25, 2013 20:21
Font-Awesome Sublime Text 2 array of completions. Used for .jade files but can be modified. Used here by just typing "ico..." and the list appears in sublime. Handy for finding things by guessing "Hmm, is there a groups icon? i.icon-g..." and using the arrow keys to look around. Or just start typing anything like "ambu.." and that will bring up …
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
Show hidden characters
| { | |
| "scope": "source.jade", | |
| "completions": | |
| [ | |
| "icon-adjust", | |
| "icon-align-center", | |
| "icon-align-justify", | |
| "icon-align-left", |
erikflowers
/ gist:5864045
Last active
December 18, 2015 23:49
erikflowers
/ big-tweet-button.txt
Created
August 8, 2013 04:46
A stylized, large tweet button that is made for use in Wordpress that is using Bootstrap and Font Awesome
erikflowers
/ gist:6247215
Created
August 16, 2013 04:01
When using only mixins to make the columns, without a mixin at the mobile base level, the div doesn't have the styles that it would when used in HTML: position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
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
| .left { | |
| // What goes here? | |
| @media(min-width: @screen-tablet) { | |
| .make-sm-column(6); | |
| } | |
| @media(min-width: @screen-desktop) { |
erikflowers
/ Bootstrap-3-Smallest-Column-Mixin
Last active
December 21, 2015 06:19
If you are building your Bootstrap 3 grid entirely using mixins, you need to declare a base column mixin for proper, full width columns at the smallest level. Otherwise, they lack the proper padding, min-height, and position as the same HTML markup column would have by default. This is used by adding .make-column(); at the base level before 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
| // Generate a mixin for mobile full width columns, to maintain the same attributes | |
| .make-column(@gutter: @grid-gutter-width) { | |
| position: relative; | |
| // Prevent columns from collapsing when empty | |
| min-height: 1px; | |
| // Inner gutter via padding | |
| padding-left: (@gutter / 2); | |
| padding-right: (@gutter / 2); | |
| } |
erikflowers
/ allmedia.sublime-snippet
Created
September 2, 2013 21:54
Need to add some less for each bootstrap 3 media query size? Just type "allmedia" and tab, and here you go!
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
| <snippet> | |
| <content><![CDATA[ | |
| @media(min-width: @screen-tablet) { | |
| $1 | |
| } | |
| @media(min-width: @screen-desktop) { | |
| $1 | |
| } | |
| @media(min-width: @screen-lg-desktop) { | |
| $1 |