@zaydek/sorcery NPM

@zaydek/sorcery

Sorcery SCSS is a stack-based CSS framework. Contributions are welcome as issues and or pull requests.

To get started, simply run this command:

yarn add @zaydek/sorcery
# or npm i @zaydek/sorcery

Usage:

import "@zaydek/sorcery"

function Component() {
	return (
		<div className="hstack">
			<div className="hstack space-16">
				<div className="w-32 h-32 bg-gray-100 rounded-full" />
				<div className="w-32 h-32 bg-gray-100 rounded-full" />
			</div>
			<div className="spacer" />
			<div className="hstack space-16">
				<div className="w-32 h-32 bg-gray-100 rounded-full" />
				<div className="w-32 h-32 bg-gray-100 rounded-full" />
			</div>
		</div>
	)
}

Usage: (CDN)

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Hello, world!</title>
		<link rel="stylesheet" href="https://unpkg.com/@zaydek/sorcery/dist/index.min.css" />
	</head>
	<body>
		<div class="hstack">
			<div class="hstack space-16">
				<div class="w-32 h-32 bg-gray-100 rounded-full"></div>
				<div class="w-32 h-32 bg-gray-100 rounded-full"></div>
			</div>
			<div class="spacer"></div>
			<div class="hstack space-16">
				<div class="w-32 h-32 bg-gray-100 rounded-full"></div>
				<div class="w-32 h-32 bg-gray-100 rounded-full"></div>
			</div>
		</div>
	</body>
</html>

Stack-based layouts
Utility-first classes
Emphasis on zero-configuration
Introspection via CSS variables (custom properties)

Stack-Based Layouts

Stacks are inspired by Swift UI and Jon Q’s talk about implementing Swift UI stacks in CSS.

What are stack-based layouts? Instead of thinking in terms of Flexbox, think in terms of stacks. A stack simply describes a horizontal or vertical axis, and stacks compose a layout. It’s turtles all the way down, for stacks. 🐢🐢

Why stacks? Stacks are a more natural way of thinking about layout. The trouble with Flexbox is that you need to remember display, flex-direction, justify-content, align-items, and flex, and remember how these properties change in the context of flex-direction: row and flex-direction: column. Stacks are a much more simple but powerful primitive for describing layout that is based on Flexbox.

This is a microcosm of how Sorcery works:

.hstack {
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.hstack > * + * {
	margin-top: 0;
	margin-left: var(--space, 0);
}

.vstack {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.vstack > * + * {
	margin-left: 0;
	margin-top: var(--space, 0);
}

.spacer {
	flex: 1 0 var(--space, 0);
}

hstacks implements a horizontal stack. Think flex-direction: row.
vstacks implements a vertical stack. Think flex-direction: column.
spacers implements direction-agnostic spacers. Think flex: 1.

Stacks in Sorcery are easy to reason about because they manage Flexbox for you. 💡 Furthermore, Sorcery stacks cover edge cases such as every stack resets --space and spacers shrink to --space (unless they are the start or end element). This enables you to think declaratively without worrying about implementation details or corner cases.