Build your site faster with Hacss Shortcuts
With the optional Shortcuts package, you can immediately focus on building your site without creating a Hacss configuration or worrying about the lower-level units of your design. The Shortcuts package provides a configuration that is ready to use or extend, complete with a color palette, fonts, spacing presets, shadows, and more.
To get started, install the
Then create a
hacss.config.js file that exports a configuration from
const shortcuts = require("@hacss/shortcuts");module.exports = shortcuts();
The color palette includes several base colors, each with a full range of shades and tints. It provides a number of options that is small enough to promote consistency throughout your site yet large enough to satisfy most use cases.
These length abstractions improve the consistency of your layout by providing a
finite set of options for padding, margins, and other length properties. They
also allow you to think in terms of pixels while actually mapping to relative
units behind the scenes: For example,
$len16 has an underlying value of
Use these variables with the
property. Not only is this more convenient than setting constituent properties
individually, but also it improves typographical consistency throughout your
site. If you need to override a constituent property, you can always use a rule
priority as explained in the syntax guide.
These work with the
box-shadow property and can be used to emphasize an
element by adding elevation.
Like the length shortcuts, border widths are limited in number and aliased in terms of pixels, so choosing the right border width for your use case requires little effort.
The corner radius variables work with the
border-radius property and its
various constituent properties (
Custom focus outlines are often achieved with the
property. The Shortcuts package offers a large set of outline box shadows based
on its color palette.
Before applying these, you should suppress the browser's default outline using
outline:$none; class. The
$none variable provides a transparent outline
rather than removing it completely, providing a better experience in Windows
High Contrast Mode as explained
You might have noticed earlier that the
@hacss/shortcuts module exports a
function that returns a Hacss configuration. This allows you to provide a custom
color palette (upon which color and focus outline variables are based) and
font family (upon which font variables are based). To do so, just pass an
argument consisting of an object with keys
colors map will be included in the Hacss configuration such that each key
will be available as a variable and will be used to generate focus outline
variables. For example, given a key
red500, the resulting configuration will
Note that the default color palette above is provided when
colors is not
fontFamily value is used in font variables. You can provide a string to be
used in all font variables; or, you can provide a map to change the font family
of each font variable listed above.
In the latter case, use each font variable name listed in the Typography
section above, e.g.
body2, as the keys for the map. You can also include a
default key as a fallback in case you don't want to customize each font