josephbergdoll

// Assumes all of your images are wrapped in a container with the class .js-image-container
// I use separate "js-" prepended classes so that way interactivity couplings are separate from
// visual style changes. => https://coderwall.com/p/qktuzw/decouple-javascript-classes-from-css-ones-by-using-prefix
//
// this is written with the notion that you are using markup as follows:
// <div class="img-container js-img-container">
//   <img src="../path/to/image.jpeg" data-width="[width of jpeg without px]" data-height="[height of jpeg without px]">
// </div>

// somewhere in your CSS, you want the following:

josephbergdoll

// Breakpoints
$small: new-breakpoint(max-width 767px 6);
$medium-only: new-breakpoint(min-width 768px max-width 1023px 12);
$medium-up: new-breakpoint(min-width 768px 12);
$large-only: new-breakpoint(min-width 1024px max-width 1279px 12);
$large-up: new-breakpoint(min-width 1024px 12);
$xlarge-only: new-breakpoint(min-width 1280px max-width 1799px 12);
$xlarge-up: new-breakpoint(min-width 1280px 12);
$xxlarge: new-breakpoint(min-width 1800px 12);

josephbergdoll

// Aritst Card Hover Thumb Interval
  $('.artist-card.more-thumbs').each(function() {
    var
      thumb = '.image-thumb',
      $thumb = $(this).find('.image-thumb'),
      activeClass = 'thumb-active',
      activeSelector = '.thumb-active';
    $(this).mouseenter(function() {
      var $this = $(this);
      if ($this.find(activeSelector).next(thumb).length) {

josephbergdoll

// Empty Global Styleguide (SG)

// Define ONLY type styles in the silent clases, that way they can be reused.
// Get specific with colors, alignment, etc, in the actual declarations below where these silent classes are extended.

a {
}

%sg-h1 {
}