Shortcuts

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.

Installation

To get started, install the @hacss/shortcuts package:

npm install @hacss/shortcuts

Then create a hacss.config.js file that exports a configuration from @hacss/shortcuts:

const shortcuts = require("@hacss/shortcuts");
module.exports = shortcuts();

Usage

The Shortcuts package is essentially just an ordinary Hacss configuration and includes a number of breakpoints and variables. Review the syntax and configuration guides for more information.

Available Shortcuts

Colors

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.

$blue05

$blue10

$blue20

$blue30

$blue40

$blue50

$blue60

$blue70

$blue80

$blue90

$blue95

$gray05

$gray10

$gray20

$gray30

$gray40

$gray50

$gray60

$gray70

$gray80

$gray90

$gray95

$green05

$green10

$green20

$green30

$green40

$green50

$green60

$green70

$green80

$green90

$green95

$orange05

$orange10

$orange20

$orange30

$orange40

$orange50

$orange60

$orange70

$orange80

$orange90

$orange95

$pink05

$pink10

$pink20

$pink30

$pink40

$pink50

$pink60

$pink70

$pink80

$pink90

$pink95

$purple05

$purple10

$purple20

$purple30

$purple40

$purple50

$purple60

$purple70

$purple80

$purple90

$purple95

$red05

$red10

$red20

$red30

$red40

$red50

$red60

$red70

$red80

$red90

$red95

$yellow05

$yellow10

$yellow20

$yellow30

$yellow40

$yellow50

$yellow60

$yellow70

$yellow80

$yellow90

$yellow95

Lengths

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 1rem.

$len512

$len448

$len384

$len320

$len256

$len224

$len192

$len176

$len160

$len144

$len128

$len112

$len96

$len80

$len64

$len56

$len48

$len40

$len32

$len24

$len20

$len16

$len12

$len8

$len4

$len2

$len1

Typography

Use these variables with the font shorthand 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.

$h1

Testing

$h2

Testing

$h3

Testing

$h4

Testing

$h5

Testing

$h6

Testing

$body1

Testing

$body2

Testing

$caption

Testing

$button

Testing

Box Shadows

These work with the box-shadow property and can be used to emphasize an element by adding elevation.

$sm

$md

$lg

$xl

$xxl

$inner

Borders

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.

$border1

$border2

$border4

$border8

Corner Radii

The corner radius variables work with the border-radius property and its various constituent properties (border-top-left-radius, border-top-right-radius, etc.)

$xs

$sm

$md

$lg

$full

Focus Outlines

Custom focus outlines are often achieved with the box-shadow 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 an 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 here.

Button

box-shadow:$outline-sm-blue50;

Style

SmallLargeRing

Outline Color

Surface Color

Customization

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 and/or fontFamily.

`colors`

The 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 include variables $red500, $outline-sm-red500, and $outline-lg-red500.

Note that the default color palette above is provided when colors is not specified.

`fontFamily`

The 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 variable explicitly.