v0.6.8

Added missing border-{n} utilities.

Unlike Tailwind CSS, there is no default border utility, so you must specify a number between 0-8.

v0.6.7

Duomo CSS now includes an index.scss file so you can customize Duomo.

As a consumer, you would:

• yarn add --dev sass @zaydek/duomo
• yarn sass --load-path node_modules/@zaydek/duomo
• @use "duomo" with (...);

In the future this will be likely automated with a bundled command-line tool.

An example of a real-world user journey (using Next.js) looks like this:

yarn sass
  --load-path node_modules/@zaydek/duomo
  --no-source-map
    src/stylesheets/index.scss
    public/static/index.css

This would compile src/stylesheets/index.scss to public/static/index.css.

v0.6.6

Updated default breakpoints:

$xs: 32 * 16 !default; // ->  512
$sm: 40 * 16 !default; // ->  640
$md: 48 * 16 !default; // ->  768
$lg: 64 * 16 !default; // -> 1024
$xl: 80 * 16 !default; // -> 1280

v0.6.5

Deprecated CSS variable introspection (see #84 for rationale).

v0.6.4

Upgraded the bundled reset and externalized CSS reset.

The CSS reset is a combination of:

• Sindre Sorhus’s modern-normalize
• Tailwind CSS’s preflight
• macOS antialiasing

v0.6.3

Runtime now accepts the environment string and returns a defer closure to clean up the runtime between, for example, hot reloads.

API looks like this:

import { Duomo } from "@zaydek/duomo/dist/runtime"

function Component() {
	useEffect(() => {
		const defer = Duomo.init(process.env.NODE_ENV)
		return defer
	}, [])

	// ...
}

For SSR, Duomo should be initialized as soon as possible only after the website hits the client — you don’t want Duomo to initialize on the server because there’s no window to attach to.

Technically, this API has nothing to do with React, so theoretically it can be invoked as a standalone JavaScript-script. However, only React has been tested so far.

v0.6.2

Added support for tracking. Values are range-based, so tracking-0 describes letter-spacing: 0 and tracking-2.5 describes letter-spacing: 0.025em for more simply, 2.5%.

v0.6.1

This version adds integrated support for configuration via duomo-configuration-proposal. Duomo CSS can now be configured at the import statement, using @use in Dart Sass. This enables Duomo to respond to user preferences, such as overriding a color or breakpoint, etc.

Example usage:

@use "duomo" as * with (
	$xl: 1344,
);

In this minimal example, $xl can be overridden as 1344 so that all xl breakpoints resolve to 1344px . And $xl was already defined as a variable, $xl now refers to 1344. Furthermore, Duomo provides several getter functions such as color, shadow, and breakpoint to semantically access key-values, such as color(green-500) or breakpoint(sm).

This changes make it easier to author Sass because Duomo is Sass.

v0.6.0

Duomo CSS has been largely refactored to support the Sass modules.

Many changes have also been implemented:

• Integrated the new color proposal duomo-color-proposal
• Integrated the new theme proposal duomo-theming-proposal
• Added support for group classes, including group-touch and group-press in the theme module
• Implemented a theme-aware, compositional API for transitions
• Implemented a minimal grid API
• Many fixes and improvements

v0.5.0

‘Sorcery CSS’ has now been renamed to ‘Duomo CSS’. @zaydek/duomo is now published to NPM, starting from v0.5.0. No other significant changes were made at this time.

The idea for the name ‘Duomo’ is inspired by one of the first renaissance men and first-ever modern architect Filippo Brunelleschi.