paulozoom

(function($) {
  $.fn.animateCss = function(animation, onEndCallback) {
    return this.each(function() {
      $(this)
        .addClass("animated "+animation)
        .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
          $(this).removeClass(animation);
          if (typeof onEndCallback === 'function') { onEndCallback(); }
        });
    });

paulozoom

Keybase proof

I hereby claim:

• I am paulozoom on github.
• I am paulozoom (https://keybase.io/paulozoom) on keybase.
• I have a public key whose fingerprint is 1354 7315 3425 8DF1 AA51 E69D 3740 DB22 3707 EF60

To claim this, I am signing this object:

paulozoom

.ratio {
  display: block;
  position: relative;
  height: 0;
  padding: 0;
}

// Nesting for variable scoping
.ratio-- {
  // Named ratios

paulozoom

///
/// Calculates the color of a linear gradient at a specific point.
///
/// @param {Color}  $start  - gradient’s start color
/// @param {Color}  $end    - gradient’s end color
/// @param {Number} $point  - point of the gradient (between 0 and 1, or 0% and 100%) at which we want the color
/// @return {Color}
///
/// @example scss
///   background-color: gradient-color-at(#BBE087, #DCDE85, 0.4);

paulozoom

// Breakpoints
$bps: (
  s: 400px,
  m: 568px,
  l: 780px,
  xl: 1025px
);

// Mobile-first media query
@mixin media-from($start) {

paulozoom

/// Named Font Weights
///
/// @param {string} $name
///   the name of the weight, as such:
///   * thin
///   * extralight
///   * light
///   * book / regular
///   * medium
///   * semibold

paulozoom

<!-- loadCSS with async -->
<script async="async" src="/assets/loadcss.js" type="text/javascript"></script>

<!-- preload the fonts -->
<link as="style" href="https://cloud.typography.com/[…].css" onload="this.rel='stylesheet'" rel="preload" />

<!-- non-JS fallback -->
<noscript>
  <link href="https://cloud.typography.com/[…].css" media="screen" rel="stylesheet" type="text/css" />
</noscript>