rpullinger

<div class="g">
  <div class="gi one-half">one-half</div>
  <div class="gi one-half">one-half</div>
  <div class="gi one-quarter">one-quarter</div>
  <div class="gi one-quarter">one-quarter</div>
  <div class="gi one-quarter">one-quarter</div>
  <div class="gi one-quarter">one-quarter</div>
  <div class="gi">1</div>
  <div class="gi">1</div>
  <div class="gi">1</div>

rpullinger

/*------------------------------------*\
    MEDIA QUERIES
\*------------------------------------*/

/**
 * Wraps the content in a min width media query
 *
   `@include breakpoint(200px){
       .example{
           font-size: 20px;

rpullinger

// Init npm if not already
npm init

// Install gulp and plugins
npm install gulp gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-clean gulp-concat gulp-notify gulp-cache gulp-livereload tiny-lr --save

// Gulp!
gulp styles
gulp js
gulp watch

rpullinger

Initial Setup

Theses are things that you run once. The log format and PS1 are my personal preferences so may need changing up for your needs.

Colors in git ui

git config --global color.ui true

Make git log prettier

git config --global format.pretty "%C(white dim) %h %C(yellow) %ar %C(cyan) %an %Creset %s"

rpullinger

<div class="keep-square">
    <div class="image-container">
        <img class="content" src="http://www.placehold.it/300x200" alt="Image of Test" />
    </div>
</div>

<div class="keep-square">
    <div class="image-container">
        <img class="content" src="http://www.placehold.it/200x300" alt="Image of Test" />
    </div>