📐 Breakouts Framework
A minimal, modular SCSS/CSS layout and utility framework built for clarity and rapid layout composition.
🚀 Installation
npm install breakouts
# or
bun add breakouts🛠 Usage
SCSS with @use
@use 'breakouts' as *;SCSS with a theme
@use 'breakouts/src/theme/chupa-pop';
@use 'breakouts' as *;Note: If a theme configures variables, it must be loaded before the main Breakouts entrypoint.
Import CSS
<link rel="stylesheet" href="/node_modules/breakouts/dist/breakouts.css" />🧱 Features
- Full-bleed layout with
.container,.full-bleed,.breakouts - Breakouts grid with named columns
- Spacing, typography & color utilities
- Dark mode support (system-aware)
- Theme system + prebuilt palettes
- Extendable architecture with SCSS modules
🎨 Prebuilt Themes
- Chupa Pop —
@use 'breakouts/src/theme/chupa-pop' - Medical —
@use 'breakouts/src/theme/medical' - Tootsie Pop —
@use 'breakouts/src/theme/tootsie-pop'
✍️ Utilities
Text
Left aligned
Center aligned
Right aligned
Uppercase text
Bold text
Spacing
📐 Layout
.container centers the content and limits its width.
.full-bleed spans the entire viewport width.
🔤 Typography
🎨 Color Utilities
🌗 Dark Mode
Breakouts supports dark mode via <html class="dark"> (or light).
If neither is set, it can follow the system preference (prefers-color-scheme) depending on
your build.
The toggle button in this documentation page switches html.dark/html.light for
demo purposes.
🧪 Customize
Use @use ... with (...) to override default variables (compile-time).
@use 'breakouts' with (
$color-primary: #d1ff4a,
$color-accent: #8a2be2
);Tip: A module can be configured only on first load. Don’t import breakouts
elsewhere before this.
💡 Extend
Import only what you need or create custom modules.
@use 'breakouts/src/base/typography';
@use 'breakouts/src/base/spacing';