[Todo] Features (Can defer)

[zaydek]

• Integrated debugger
• Staggered lines utilities
• Tooltip utilities
• Flexbox-first layout composition
• Tailwind CSS dialect — easy learning curve
• Prototype and production-grade code
• Design token introspection

[zaydek]

• CSS and JS runtime
  • JS runtime manages dark mode, debug mode, and possibly mode.

[zaydek]

Sorcery is a utility-first CSS library and lightweight JS runtime that makes designing websites from start-to-finish fun.

Core features include:

• Lightweight utilities (no purging needed)
• Dialect of Tailwind CSS - easy learning curve
• Flexbox-first layout composition inspired by SwiftUI
• Design tokens are exposed as CSS tokens
• Lightweight JS runtime to manage dark mode and debug mode

[zaydek]

Sorcery is a lightweight CSS system for authoring web apps. Sorcery makes you more effective at:

• Prototyping
• Development
• Design

Sorcery leverages utility classes, CSS, SCSS, and JavaScript to make you more effective. For example:

• Stack-based layout system
  • This may come as a surprise, but there are no block or flex classes in Sorcery. Why? Because Sorcery uses a recursive Flexbox-first layout system we call ‘stacks’. These are heavily inspired by Apple’s SwiftUI. Use stacks to compose layouts as horizontal or vertical stack compositions.
• Easy learning curve
  • Sorcery uses almost the same class names as Tailwind CSS for common classes, so transitioning from Tailwind CSS is a very easy.
• Smart utility classes
  • Generally, utility classes have a 1:1 relationship with CSS properties. Sorcery uses these kinds of utilities and ‘smart utility classes’. For example, the stack-based layout system are a set of smart utility classes. This leads to much easier to author and maintain code.
• Lightweight
  • Sorcery is designed to be configuration-free. No installation required. That being said, if you need to customize colors, etc. that is still possible.
• Use utility classes to prototype your design
  • Utility classes are like inline styles but are more compact. Of course, we don’t recommend utility classes for everything, but for the 90% case, utility classes are very effective.
• Use SCSS and CSS variables to extend design tokens
  • Sometimes you need to use inline styles — Sorcery extends it’s design tokens as both build-time SCSS variables and SCS variables so you can easily extend the design tokens.
• Use JavaScript to visualize and your web app
  • We provide a small script that makes it easy to visualize your layout. This makes development more fun and easier to understand without the need to open developer tools.
• Use JavaScript hooks to author responsive layouts
  • Why use hooks instead of trusty media queries? We do recommend media queries for layout but for conditional layout, where a layout should either be visible or visible depending on a user’s screen size, we recommend using useBreakpoints to conditionally render HTML. This leads to much cleaner HTML and does not clutter the DOM with non-essential elements.

[zaydek]

Should review later.