Herman 2.0.0

Herman Config: Private Helpers

@mixin config()

Internal utility for managing Herman and Accoutrement maps in one single mixin. In preparation for the Sass 3.5+ modular syntax, this can only be done in the project being documented, and is not included as part of the Herman API.

Parameters

$type: (string)

The type of data being added, e.g. color/s, font/s, ratio/s, size/s.

$name: (string)

The reference key for accessing this data. This should generally be the same as the variable name – e.g. 'brand-colors' for the $brand-colors variable.

$value: (map)

The map data to be added to both Accoutrement globals and Herman export.

Example

scss
$brand-colors: (
  'brand-orange': hsl(24, 100%, 39%),
  'brand-blue': hsl(195, 85%, 35%),
  'brand-pink': hsl(330, 85%, 48%) ('shade': 25%),
);

@include config('colors', 'brand-colors', $brand-colors);

Related

Accoutrement-Color [external]

Accoutrement-Type [external]

Accoutrement-Scale [external]

Requires

@mixin herman-add()

This Nunjucks utility macro returns either an anchor tag, or span, depending on the truthyness of the url argument.

  • content :: {string}
    The text/html contents of the link.
  • url=none :: {string | none}
    The link-target URL, if any is available. When there is no URL provided, we return a span.
  • attrs={} :: {dictionary}
    A dictionary of arbitrary html attributes to include on the returned link or span.

Example

njk
{% import 'utility.macros.njk' as utility %}
{{ utility.link_if(content='stacy', url='#', attrs={'data-sassdoc': 'font-name'} ) }}
{{ utility.link_if(content='not stacy', url=none) }}
html compiled
<a href="#" data-sassdoc="font-name">stacy</a>

<span>not stacy</span>

$focus

scss
$focus: '&:hover, &:focus, &:active';

Shortcut for hover, focus, and active pseudo-classes.

Example

scss
a {
  #{$focus} {
    color: red;
  }
}
css compiled
a:hover, a:focus, a:active {
  color: red;
}

@mixin invert-colors()

Invert the colors of a block, creating light-on-dark text and links.

Examples

scss
.invert-colors {
  @include invert-colors;
}
css compiled
.invert-colors {
  background-color: #0d7fa5;
  color: #fff;
}

.invert-colors [href]:link, .invert-colors [href]:visited {
  color: inherit;
}
html
<div class="invert-colors" style="padding: 1em;">
  You shall sojourn at <a href="#">Paris, Rome, and Naples</a>.
</div>

Requires

Used By

$z-index

scss
$z-index: (
  'main',
  'sidebar',
  'banner',
);

List of named z-index layers for Herman’s layout. The order they are defined will be the integer they are assigned.

Related