Skip to content

Instantly share code, notes, and snippets.

View krambuhl's full-sized avatar
❤️
I love you!

Eevee Kreevee krambuhl

❤️
I love you!
  • Boogie Woogie Industrial Complex
  • Portland, Oregon
  • 05:20 (UTC -07:00)
View GitHub Profile
// create media queries from min/max
@mixin respond($min: 0, $max: null, $media: screen) {
@if $min > 0 and $max {
@include respond-between($min, $max, $media) { @content };
} @else if $min == 0 and $max {
@include respond-below($max, $media) { @content };
} @else if $min and $max == null {
@include respond-above($min, $media) { @content };
}
}
@krambuhl
krambuhl / diffCollection.js
Last active August 29, 2015 14:12
diffCollection
function diffCollection(oldColl, newColl, key) {
var oldVal = _.map(oldColl, function(model) {
return model.get(key);
});
var newVal = _.map(newColl, function(model) {
return model.get(key);
});
var changed = [];
@krambuhl
krambuhl / firstdef.js
Last active August 29, 2015 14:06
gets first argument that is not undefined;
function firstdef() {
var isDefined = function(arg) { return !_.isUndefined(arg); };
return _.find(arguments, isDefined);
}
@krambuhl
krambuhl / result.js
Created September 24, 2014 05:43
gets result of an expression.
function result(expr, context) {
return typeof expr === 'function' ? expr.apply(context) : expr;
}
@krambuhl
krambuhl / equal-heights.js
Last active August 29, 2015 14:06
EqualHeights Class
var EqualHeights = (function($, _) {
function EqualHeights (el, opts) {
this.options = _.extend({ item: '.equal-item' }, opts);
this.items = $(el).find(this.options.item);
$(window).on('resize', _.bind(this.resize, this)).trigger('resize');
}
EqualHeights.prototype.resize = function() {
this.items.height(getMaxHeight(this.items));
@krambuhl
krambuhl / viewport-type.scss
Last active October 28, 2016 22:33
example of viewport based type sizing using viewport units
// requires: respond.scss
// https://gist.github.com/krambuhl/9dd229f391aceb3012b4
$vptext-viewport: 960px;
$vptext-min: 640px;
$vptext-max: 1180px;
@mixin viewport-text($font-size: 24px) {
font-size: #{($font-size / $vptext-viewport * 100) + vw};
@krambuhl
krambuhl / grid.scss
Last active August 29, 2015 14:05
updated grid version using respond.scss general media query maker
$grid-max: 12;
$grid-column: 80px;
$grid-gutter: 0;
@function gridw ($span: $grid-max, $offset: 0) {
@if $span != -1 {
@return ($grid-column * $span) + ($grid-gutter * ($span - 1)) + $offset;
}
@return -1;
@krambuhl
krambuhl / respond.scss
Last active June 22, 2018 14:44
Sass mixin for creating media queries with min/max arguments
@mixin respond($min: -1, $max: -1, $media: "all") {
$query: "only " + $media;
@if $min != -1 and $max != -1 {
$query: "only " + $media + " and (min-width: " + $min + ") and (max-width: " + ($max - 1) + ")";
} @else if $min == -1 and $max != -1 {
$query: "only " + $media + " and (max-width: " + ($max - 1) + ")";
} @else if $min != -1 and $max == -1 {
$query: "only " + $media + " and (min-width: " + $min + ")";
}
@krambuhl
krambuhl / underscore.timers.js
Last active August 29, 2015 13:57
A set of underscore mixins for timer functions.
_.mixin({
bindDelay: function(func, context, wait) {
return _.delay(_.bind(func, context || this), wait, _.last(arguments, 3));
},
bindDefer: function(func, context) {
return _.defer(_.bind(func, context || this), _.last(arguments, 2));
},
repeat: function(func, interval) {
@krambuhl
krambuhl / icon.scss
Created March 14, 2014 19:20
icon utility class. uses sass to build out sizing modifiers.
.icon {
display: inline-block;
background-size: contain;
font-size: 0;
color: transparent;
}
.icon-block {
display: block;