@zaydek/sorcery

v0.4.8

Published

3 years ago

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

Downloads

0High
0Medium
0Low

zaydek

@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

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.

License

Licensed as MIT.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@zaydek/sorcery

Table of Contents

Stack-Based Layouts

Utility-First Classes

Zero-Configuration

Introspection

License