chrisfromredfin

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

chrisfromredfin

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

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

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

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

/// 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

/// @group components
/// @name buttonset
/// @example njk
///   {% set items = [{"name": "do something", "label": "open"}, {"name": "do something else", "label": "close"}] %}
///   {% include 'buttonlist.njk' %}
///
.buttonset {
  li {
    display: inline-block;
    list-style-type: none;

chrisfromredfin

{% block content %}
<ul class="buttonset">
  {% for item in items %}
  <li><a class="button" title="{{ item.name }}">{{ item.label }}</a></li>
  {% endfor %}
</ul>
{% endblock %}

chrisfromredfin

/// @name buttonset
/// @example njk
///   {% import 'buttonset.macro.njk' as mymacro %}
///   {{ mymacro.buttonset([{"name": "do something", "label": "open"}, {"name": "do something else", "label": "close"}]) }}

chrisfromredfin

{% macro buttonset(items) %}
<ul class="buttonset">
  {% for item in items %}
  <li><a class="button" title="{{ item.name }}">{{ item.label }}</a></li>
  {% endfor %}
</ul>
{% endmacro %}