📐 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 *;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
- Theme system + prebuilt palettes
- Extendable architecture with SCSS modules
🎨 Prebuilt Themes
- Chupa Pop —
@use 'breakouts/theme/chupa-pop' - Medical —
@use 'breakouts/theme/medical' - Tootsie Pop —
@use 'breakouts/theme/tootsie-pop'
✍️ Utilities
Text
Left aligned
Center aligned
Right aligned
Uppercase text
Bold text
Spacing
Margin 4
Padding 4
Margin X3 Y2
📐 Layout
.container centers the content and limits its width.
.full-bleed spans the entire viewport width.
Full
Feature
Popout
Content
🔤 Typography
🎨 Color Utilities
bg-primary
bg-secondary
bg-accent
bg-muted
bg-surface
background
🌗 Dark Mode
You can use <html class="dark"> to enable dark mode. The toggle button above will also
switch themes live.
🧪 Customize
Use @use ... with (...) to override default variables.
@use 'breakouts' with (
$color-primary: #d1ff4a,
$color-accent: #8a2be2
);💡 Extend
Import only what you need or create custom modules.
@use 'breakouts/base/typography';
@use 'breakouts/utilities/spacing';