Configuring Bonkstrap's behavior with Sass

Compiling

Bonkstrap offers a collection of Sass modules, with a central entry point at sass/bonkstrap.scss. The library can be compiled quite simply from the command line:

$ sass bonkstrap.scss ../css/style.css [--watch]

Bonkstrap may also be compiled using Docker with BuildKit:

$ DOCKER_BUILDKIT=1 docker build -o css .

If you intend to configure Bonkstrap (described below) and integrate it into a Docker build, the recommended method is to copy the Dockerfile included here into your project's Dockerfile and copy in your configuration files.

You can include the bulk of Bonkstrap into your own Sass project with the @use directive, and you can override several variables to choose your own color scheme and other properties:

@use 'bonkstrap' with (
	$fg: #222,
	$bg: #eee,
	$accent: #ff0091,
	$bracket: darkblue,
	$tag: darkgreen,
	$key: darkred,
	$value: darkmagenta,
	$ui-transition: 0.5s linear
);

This example can be found in sass/alt.scss, or compiled as css/alt.css. You can preview the styles above at this clone of the default styles page. I suggest waiting until you've read through the original copy first, since the alternate styles are more of a demonstration of power and aren't as pretty. All customizable variables are located in sass/constants.scss and sass/syntax/colors.scss.

Modular system

Bonkstrap's styles are organized into modules, most of which roughly correspond with the element groupings at MDN's HTML elements reference. These groupings are also used in the documentation on Bonkstrap's default styles.

Placeholder selectors ("shared
/extended properties")

Bonkstrap makes use of placeholder selectors internally. For example, anywhere that a monospace font is used, a %mono meta-style is extended, which is particularly useful for adjusting the relative size of the monospace font to match the surrounding text more smoothly. Moreover, anywhere that a %mono-extending element contains an %italic-extending element (that is, whenever we've got italics inside our monospace), we add a small amount of margin-right to keep from bumping into whatever comes after it. [After constraining the monospace font to a particular face rather than the system's choice, these modifications are no longer necessary. However, since the library was designed using these placeholder selectors, updating the relevant styles everywhere was trivial.]

Theme colors

Almost all colors used in Bonkstrap are derived from three variables in the file constants.scss: $fg, $bg, and $accent, which are the foreground (text), background, and undiluted (bright) accent colors. Several variants and combinations derived from these may be overridden individually; see constants.scss for a complete list. However, the algorithms that determine the variant colors are designed to hold up well in the general case, for both light and dark themes. Choose a bright accent color; it will be diluted automatically where a bright color would be inappropriately distracting.

Vendor prefix mixin

There's a mixin for adding arbitrary vendor prefixes to blocks of styles. It works like this:

.bonk-static {
	@include prefix((transform: rotate(30deg)), webkit moz);
}

This will generate rules for the transform, -webkit-transform, and -moz-transform properties. You can specify multiple comma-separated rules and space-separated prefixes to your heart's content.