Herman 3.0.0

Herman Config: Private Helpers

$functions (map)

scss
$functions: (
  'darken': get-function('darken'),
  'desaturate': get-function('desaturate'),
  'rgba': get-function('rgba'),
  'convert': 'convert-units'
);

These functions will be made available to accoutrement-color & accoutrement-scale tools, for use in the $colors and $sizes configuration maps. Register additional functions as needed, or establish alias names for existing functions.

Map Properties

<alias>: (function | string)

Use get-function() to capture a first-class function, or use a string to reference existing functions and alias-keys

Related

Accoutrement-Color [external]

Accoutrement-Scale [external]

@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