JSFiddle

  • Responsive SASS/CSS Grid (In Browser Development) #47 is the latest revision

    CSS Grid - 12 Columns with Gutters - 15px

    $("button.btn-success").click(function() {
      $(".wrapper").toggle('slow');
    });
    
  • Sass Colour Palette Guide

    Lighten and Darken Functions for colour palettes - Blue, Red, Shades

    <section class="container">
      <div class="col-1">
        <p>1</p>
      </div>
      <div class="col-2">
        <p>2</p>
      </div>
      <div class="col-3">
        <p>3</p>
      </div>
      <div class="col-4">
        <p>4</p>
      </div>
      <div class="col-5">
        <p>5</p>
      </div>
    </section>
    <section class="container-two">
      <div class="col-6">
        <p>6</p>
      </div>
      <div class="col-7">
        <p>7</p>
      </div>
      <div class="col-8">
        <p>8</p>
      </div>
      <div class="col-9">
        <p>9</p>
      </div>
      <div class="col-10">
        <p>10</p>
      </div>
    </section>
    
    <section class="container-three">
      <div class="col-11">
        <p>11</p>
      </div>
      <div class="col-12">
        <p>12</p>
      </div>
      <div class="col-13">
        <p>13</p>
      </div>
      <div class="col-14">
        <p>14</p>
      </div>
      <div class="col-15">
        <p>15</p>
      </div>
      <div class="col-16">
        <p>16</p>
      </div>
      <div class="col-17">
        <p>17</p>
      </div>
      <div class="col-18">
        <p>18</p>
      </div>
      <div class="col-19">
        <p>19</p>
      </div>
      <div class="col-20">
        <p>20</p>
      </div>
    </section>
    
  • Sass Buttons #18 is the latest revision

    Mixins- Border Radius & Darken Functions

    <section class="container">
      <button class="btn brand-success">
        Save
      </button>
      <button class="btn brand-info">
        Update
      </button>
      <button class="btn brand-danger">
        Delete
      </button>
    </section>
    
  • While Loop Increment Operator

    JS

    i = 0
    nums = [];
    while (i < 10) {
      nums[i] = i;
      i++;
    }
    
  • switch(true){} Evaluates Just like an if else statement

    Switch Statement in JavaScript

    var orderTotal = 99.99;
    var discount;
    switch (true) {
      case orderTotal >= 50 && orderTotal < 75:
        discount = 10;
        break;
      case orderTotal >= 75 && orderTotal < 100:
        discount = 20;
        break;
      case orderTotal >= 100:
        discount ...
  • 2 . I Love The Beach - Responsive Images - Picturefill.js <picture> & srcset=""

    background-image <img> Center Image & Text - Animation - VH VW - SASS On Load - Full width & Height - JQuery - CSS - Flexbox - Transform & @Keyframes - align-items - justify-content

    $('span').addClass('scaledIt');
    
  • 2. I Love Code! (% Percentage) #3 is the latest revision

    background-image <img> Center Image & Text - Animation - VH VW - SASS On Load - Full width & Height - JQuery - CSS - Flexbox - Transform & @Keyframes - align-items - justify-content

    $('span').addClass('scaledIt');
    
  • 2. I Love Code! (% Percentage)

    background-image <img> Center Image & Text - Animation - VH VW - SASS On Load - Full width & Height - JQuery - CSS - Flexbox - Transform & @Keyframes - align-items - justify-content

    $('span').addClass('scaledIt');
    
  • I Love Coffee! #2 is the latest revision

    background-image <img> Center Image & Text - Animation - VH VW - SASS On Load - Full width & Height - JQuery - CSS - Flexbox - Transform & @Keyframes

    $('span').addClass('scaledIt');
    
  • Menu Navigation ul li a Animation

    The usual suspects........

    var move = $('nav ul li a');
    var text = "You have been destroyed! ha ha ha..."
    move.on('click', function(index ...