chrisfromredfin

/// Ratios we are using.
/// @group sizing
/// @ratios my-ratios
$my-ratios: (
  'line-height': 1.4,
  'gutter': 0.5,
);
@include herman-add('ratios', 'my-ratios', $my-ratios);

chrisfromredfin

/// All the sizes that we have.
/// @group sizing
/// @sizes font-sizes {text}
$font-sizes: (
  'base': 16px,
  'important': 1.8rem,
  'largest': 3rem,
);
@include herman-add('sizes', 'font-sizes', $font-sizes);

chrisfromredfin

/// @group colors
/// @colors demo-colors
$demo-colors: (
  'alto': #d8d8d8,
  'scorpion': #5b5b5b,
  'tree-poppy': #f36c38,
  'white': white,
  'wild-sand': #f5f5f5,
  'grey-light': #d5dbe4,
);

chrisfromredfin

/// @font sans-stack (300, 300 italic, regular, 600)
///   <link href=”https://fonts.googleapis.com/css?family=Work+Sans:300,400,600" rel="stylesheet">
$sans-stack: (
  'name': 'Work Sans',
  'source': 'https://fonts.google.com/specimen/Work+Sans',
  'stack': ("Helvetica Neue", "Lucida Grande"),
);

chrisfromredfin

theme: herman
herman:
  sass:
    includepaths:
      - 'sass'
    includes:
      - 'util/mixins'

chrisfromredfin

theme: herman
herman:
 sass:
   includepaths:
     - 'sass'

chrisfromredfin

/// @example scss -
///   @import “style.scss”
///   .embed-container {
///     @include embed-container(400px, 300px);
///   }

chrisfromredfin

/// Mixins: custom re-useable but configurable tools we use.
/// @group Mixins

/// Helper mixin to drop on the wrapper for an iframe
/// that you would like to be responsive.
///
/// @group Mixins
/// @author Smashing Magazine
///
/// @param {Length} $width - Element's width

chrisfromredfin

@mixin embed-container($width, $height) {
  $ratio: ($height / $width) * 100%;

  position: relative;
  padding-bottom: $ratio;
  height: 0;
  overflow: hidden;
  max-width: 100%;

  iframe, object, embed {

chrisfromredfin

/// Components: small, re-useable components used on the site.
/// @group components

/// @name Button
/// @group Components
/// @example markup
///   <a href="#" class="button">Click me</a>
%button {
 border-radius: 5px;
 background-color: green;