joellesenne

# Create new Github Pages
$ git branch gh-pages
$ git checkout gh-pages
$ echo "# This application is in production mode, more information here in develop mode" >> README.md
$ git subtree push --prefix dist origin gh-pages

$ git rm -r dist

joellesenne

# Push an existing repository from the command line
$ git remote add origin https://github.com/<User>/<Path>.git
$ git push -u origin master

joellesenne

# Create a new repository on the command line
$ echo "# name project" >> README.md
$ git init
$ git add README.md
$ git commit -m "first commit"
$ git remote add origin https://github.com/<User>/<Path>.git
$ git push -u origin master

joellesenne

# git commit -m <message>
$ git commit -m "🎉 Initial commit."

joellesenne

// Media Queries in SCSS <https://css-tricks.com/approaches-media-queries-sass/#landon-schropps-technique>

// Variables
$tablet-width: 768px;
$desktop-width: 1024px;

@mixin tablet {
  @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
    @content;
  }

joellesenne

// Sass Mixins to Kickstart Your Project <http://www.sitepoint.com/sass-mixins-kickstart-project/#vendor-prefixes>
@mixin prefix($property, $value, $vendors: webkit moz ms o) {
    @if $vendors {
        @each $vendor in $vendors {
            #{"-" + $vendor + "-" + $property}: #{$value};
        }
    }
    #{$property}: #{$value};
}

joellesenne

// SASS Mixins for CSS animations <https://joshbroton.com/quick-fix-sass-mixins-for-css-keyframe-animations/>
@mixin animation($animate...) {
    $max: length($animate);
    $animations: '';

    @for $i from 1 through $max {
        $animations: #{$animations + nth($animate, $i)};

        @if $i < $max {
            $animations: #{$animations + ", "};

joellesenne

// SASS Mixins for CSS @keyframes <https://joshbroton.com/quick-fix-sass-mixins-for-css-keyframe-animations/>
@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    }
    @-moz-keyframes #{$animationName} {
        @content;
    }
    @-o-keyframes #{$animationName} {
        @content;

joellesenne

/* SCSS ellipsis mixin <https://codepad.co/snippet/scss-ellipsis-mixin> */
@mixin ellipsis($width: 100%) {
	display: inline-block;
	max-width: $width;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* How to use

joellesenne

// CSS Opacity SASS MIxin For IE, FireFox, Chrome and Safari <https://coderwall.com/p/mca5xw/sass-opacity-mixin>
@mixin Opacity($value){
  $IEValue: $value*100;
  opacity: $value;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$IEValue+")";
  filter: alpha(opacity=$IEValue);
}

/* How to use
img.preload{