Erik Flowers erikflowers
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 hidden or 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 hidden or 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
/ fixed-screen-layered-background.less
Last active
January 31, 2019 10:48
A Less mixin for layering 2 images in a background, and using "background-cover" so the bottom layer is always full size. Good for scrolling fixed backgrounds where you want a screen or other element on top. Here's a 2x2 pixel grid to get you started: http://www.helloerik.com/downloads/grid.png.zip See an example here:
This file contains hidden or 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-layers(@top, @bottom) { | |
| background: url(@top), url(@bottom); | |
| background-position: top center, top center; | |
| background-attachment: fixed, fixed; | |
| background-repeat: repeat, repeat; | |
| -webkit-background-size: auto, cover; | |
| -moz-background-size: auto, cover; | |
| -o-background-size: auto, cover; | |
| background-size: auto, cover; | |
| } |
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 hidden or 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 |
This file contains hidden or 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
| // This is the mixin | |
| .highlight(@backgroundColor, @textColor) { | |
| ::selection, -moz::selection { | |
| background: @backgroundColor; | |
| color: @textColor; | |
| } | |
| } | |
| // This is how you use it |
erikflowers
/ gist:6710372
Created
September 26, 2013 06:01
An easy way to include just super standard 1px text shadows. No frills.
This file contains hidden or 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
| .textShadowBlack(@shadow: 0 1px 0px rgba(0,0,0,1)) { | |
| text-shadow: @shadow; | |
| } | |
| .textShadowWhite(@shadow: 0 1px 0px rgba(255,255,255,1)) { | |
| text-shadow: @shadow; | |
| } |
erikflowers
/ gist:6710391
Created
September 26, 2013 06:03
Quick add no styles to a UL - either inline or block
This file contains hidden or 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
| .ul-inline-no-style() { | |
| margin: 0px; | |
| list-style: none; | |
| .clearfix; | |
| li { | |
| float: left; | |
| display: block; | |
| } | |
| } |
erikflowers
/ gist:8231344
Created
January 3, 2014 02:10
This file contains hidden or 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 stickyAside = -> | |
| top = $(".sticky").offset().top | |
| $(window).scroll -> | |
| if $(this).scrollTop() > top - 40 | |
| $(".sticky").addClass "stick image" | |
| else | |
| $(".sticky").removeClass "stick image" |
erikflowers
/ gist:8545409
Created
January 21, 2014 18:28
experiment in non-responsifying Bootstrap 3, for whatever reason.... :(
This file contains hidden or 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
| // Media queries breakpoints | |
| // -------------------------------------------------- | |
| // Extra small screen / phone | |
| // Note: Deprecated @screen-xs and @screen-phone as of v3.0.1 | |
| @screen-xs: 480px; | |
| @screen-xs-min: @screen-xs; | |
| @screen-phone: @screen-xs-min; | |
| // Small screen / tablet |
erikflowers
/ gist:8701060
Created
January 30, 2014 01:35
This file contains hidden or 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 { | |
| text-align: center; | |
| } | |
| @media (min-width: 768px) { | |
| .left { | |
| text-align: left; | |
| } | |
| } | |
| .center { | |
| text-align: center; |