AllThingsSmitty

// Eliminate FOIT (Flash of Invisible Text) caused by web fonts loading slowly
// Using font events with Font Face Observer
var roboto = new FontFaceObserver('Roboto', {
  weight: 400
});
observer.check().then(function () {
  document.getElement.className += 'fonts-loaded';
});

// Load multiple fonts using a Promise

AllThingsSmitty

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
html {
  background: #444;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
  line-height: 1.4;
}
*, *:before, *:after {
  box-sizing: inherit;
}

AllThingsSmitty

// Using the unique-id() function with a simple mixin you only have to provide keyframe values, not names
@mixin animation-keyframes {
  $animation-name: unique-id();
  animation-name: $animation-name;
  @keyframes #{$animation-name} {
    @content;
  }
}
.some-element {
  animation: 10s linear infinite;

AllThingsSmitty

/*
First: determine the number of columns, ex.: 12
Second: determine the width of a single (1/12) column using the following formula:
  scw = (100 – (m * (mc – 1))) / mc
Where:
  scw = single column width
  m = margin (1.6%)
  mc = maximum columns (12)
Ex.: scw = 6.86666666667%
Lastly: use the scw to calculate the rest of the column widths using the following formula:

AllThingsSmitty

<table>
  <thead>
    <tr>
      <th>Payment</th>
      <th>Issue Date</th>
      <th>Amount</th>
      <th>Period</th>
    </tr>
  </thead>
  <tbody>

AllThingsSmitty

// Return zero if the number isn't prime
function isPrime(value) {
  for (var i = 2; i < value; i++) {
    if (value % i === 0) {
      return false;
    }
  }
  return true;
}

AllThingsSmitty

// When using appendChild() or insertBefore() on an element that's already been added to the document, the element will be removed from its place and put into the new place
var b1 = document.querySelector('.box1'),
  b2 = document.querySelector('.box2'),
  el = document.createElement('div'),
  t;

b1.appendChild(el);
t = window.setTimeout(function () {
  b2.appendChild(el);
  clearTimeout(t);

AllThingsSmitty

###1. How best to set line-height Q. You want text on your website to be double-spaced by default. Which of the following line-height values is the best way to achieve this?

200%

2em

2

double

AllThingsSmitty

// edit these
$farColor: #ffe4c7;
$nearColor: #2f4645;
$layer: 7; // make sure it is +1 the number of layered divs in the HTML
$perspective: 1;

.bg {
  background-color: $farColor;
  height: 100%;
  position: absolute;

AllThingsSmitty

@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,600,700);

$pink: #e91e63;
$paper: #efefef;
$clouds: #ecf0f1;
$cubic: cubic-bezier(.64,.09,.08,1);

html, body {
  background: $clouds;
  height: 100%;