elyseholladay

$(document).ready(function(){
	var animals = [];

	$.getJSON( "https://mks-frontend-gallery.herokuapp.com/", function( json ) {
	  for (var i in json) {
	  	$(".gallery").append("<div class='large-4 small-6 columns " + json[i].animals.join(" ") + "'><img src=" + json[i].url + "></div>");
	  }
	  var ids = [];
	  $.each( json, function ( key, val ) {
	    

elyseholladay

# set up Sublime as default editor and "subl ." command
export PATH=/bin:/sbin:/usr/bin:/usr/local/sbin:/usr/local/bin:$PATH
export EDITOR='subl -w'

#!/usr/bin/env bash

# Make my prompt AWESOMESAUCE
__powerline() {

    # EMOJI YO

elyseholladay

Theory

We subscribe to the following high-level theories in our Sass code:

Keep functional Sass separate from presentational styles

Keeping functional Sass separate from presentational Sass is important in order to maintain readability, search-ability and scaleability of your code. Patterns like placing mixins in the same file as presentational Sass leads to overly complex files to scan and opportunities for accidental pollution of your processed CSS. Source: http://gist.io/4436524

Sass is a CSS assistant.

"Sass is not a replacement for CSS, it’s more like having a CSS assistant who will help you write your code. So when you’re ready to really put it to work I recommend occasional sanity checks on the resulting CSS to see if this “assistant” has created too much repeated code or if the selectors are getting too complicated. Refactoring your Sass will help keep your code clean and you’ll start learning how you can make the best use of it."

elyseholladay

// -------------------------------------------------------------- //
// COLORS ------------------------------------------------------- //
// -------------------------------------------------------------- //


$black: #000000
$greydark: #464646
$greymedium: #686868
$grey: #9d9d9d
$greylight: #adadad

elyseholladay

// -------------------------------------------------------------- //
// APPLICATION GLOBAL ------------------------------------------- //
// -------------------------------------------------------------- //
// These files need app-required.sass (theme and variables and mixins)
// to load. The files imported here are global CSS that will apply to
// all applications and, ideally, never need to be recompiled per app.

@import app-required.sass // import the stuff required for compile

// Styles

elyseholladay

<button class="button_primary">Post</button>
<button class="button_primary button_disabled">Approve</button>
<button class="button_secondary">Edit</button>
<button class="button_tertiary">Cancel</button>
<button class="button_text">Unsubscribe</button>

elyseholladay

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----


// variables
$white: #fff;
$black: #000;
$greydark: lighten($black,50%);

elyseholladay

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

%button {
    display: inline-block;
    box-sizing: border-box;
    margin: 0 20px 0 0;
    padding: .25em 1em;

elyseholladay

// Variables
$black: #000000;
$greydark: lighten($black,28%); // #424242
$greymedium: lighten($black,40.75%); // #686868
$greylight: lighten($black,68%); // #adadad
$greypale: lighten($black,80%); // #cccccc
$white: #ffffff;

// Site colors
$turquoise: darken(rgb(97,210,214),20%);

elyseholladay

// Simple Responsive Grid
// based on Chris Eppstein's SASS responsive layouts
// http://chriseppstein.github.com/blog/2011/08/21/responsive-layouts-with-sass/

// -------------------------------------------------------------- //
// DESKTOP - LARGE - %desktop-large ----------------------------- //
// -------------------------------------------------------------- //
// 1024px and up to 1280px at which it becomes fixed

@media all and (min-width: 1024px)