Skip to content

Instantly share code, notes, and snippets.

View gist:8701060
.left {
text-align: center;
}
@media (min-width: 768px) {
.left {
text-align: left;
}
}
.center {
text-align: center;
@erikflowers
erikflowers / gist:8545409
Created Jan 21, 2014
experiment in non-responsifying Bootstrap 3, for whatever reason.... :(
View gist:8545409
// 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
View gist:8231344
$(document).ready stickyAside = ->
top = $(".sticky").offset().top
$(window).scroll ->
if $(this).scrollTop() > top - 40
$(".sticky").addClass "stick image"
else
$(".sticky").removeClass "stick image"
@erikflowers
erikflowers / gist:6710391
Created Sep 26, 2013
Quick add no styles to a UL - either inline or block
View gist:6710391
.ul-inline-no-style() {
margin: 0px;
list-style: none;
.clearfix;
li {
float: left;
display: block;
}
}
@erikflowers
erikflowers / gist:6710372
Created Sep 26, 2013
An easy way to include just super standard 1px text shadows. No frills.
View gist:6710372
.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;
}
View css text select highlight
// This is the mixin
.highlight(@backgroundColor, @textColor) {
::selection, -moz::selection {
background: @backgroundColor;
color: @textColor;
}
}
// This is how you use it
@erikflowers
erikflowers / allmedia.sublime-snippet
Created Sep 2, 2013
Need to add some less for each bootstrap 3 media query size? Just type "allmedia" and tab, and here you go!
View allmedia.sublime-snippet
<snippet>
<content><![CDATA[
@media(min-width: @screen-tablet) {
$1
}
@media(min-width: @screen-desktop) {
$1
}
@media(min-width: @screen-lg-desktop) {
$1
@erikflowers
erikflowers / fixed-screen-layered-background.less
Last active Jan 31, 2019
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:
View fixed-screen-layered-background.less
.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
erikflowers / Bootstrap-3-Smallest-Column-Mixin
Last active Dec 21, 2015
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 …
View Bootstrap-3-Smallest-Column-Mixin
// 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
erikflowers / gist:6247215
Created Aug 16, 2013
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;
View gist:6247215
.left {
// What goes here?
@media(min-width: @screen-tablet) {
.make-sm-column(6);
}
@media(min-width: @screen-desktop) {