Herman Config: Private Helpers
$functions (map)
$functions: (
'darken': meta.get-function('darken'),
'desaturate': meta.get-function('desaturate'),
'rgba': meta.get-function('rgba'),
'convert': '#convert-units',
);These functions will be made available to accoutrement tools for use in 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 [external]
@mixin add()
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
$brand-colors: (
'brand-orange': hsl(24, 100%, 39%),
'brand-blue': hsl(195, 85%, 35%),
'brand-pink': hsl(330, 85%, 48%) ('shade': 25%),
);
@include config.add('colors', 'brand-colors', $brand-colors);Related
Accoutrement [external]
macro link_if()
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
{% 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) }}<a href="#" data-sassdoc="font-name">stacy</a>
<span>not stacy</span>Example
a {
#{config.$link} {
color: blue;
}
}a:link, a:visited {
color: blue;
}Used By
@mixin invert-colors()
$focus
$focus: '&:hover, &:focus, &:active';Shortcut for hover, focus, and active pseudo-classes.
Example
a {
#{config.$focus} {
color: red;
}
}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
.invert-colors {
@include config.invert-colors;
}.invert-colors {
background-color: hsl(195deg, 85%, 35%);
color: #fff;
}
.invert-colors [href]:link, .invert-colors [href]:visited {
color: inherit;
}<div class="invert-colors" style="padding: 1em;">
You shall sojourn at <a href="#">Paris, Rome, and Naples</a>.
</div>Requires
Used By
List of named z-index layers for Herman’s layout. The order they are defined will be the integer they are assigned.