Framework Demonstration
Simpleton Components Showcase
This page demonstrates the core layout, typography, panels, cards, spacing, and reusable HTML primitives provided by the Simpleton framework.
Standard Panel
Default Panel
This is the standard Simpleton panel. Every child theme should automatically style this component.
Panel Sizes
Small
Compact panel for small information blocks.
Normal
The default panel size.
Large
Large panel with generous spacing for feature content.
Panel Variants
Muted Panel
Uses a softer background.
Outline Panel
Transparent background with border only.
Nested Panels
Outer Panel
Panels should nest gracefully.
Inner Panel
Nested panels should inherit spacing naturally.
Cards
Card One
Cards can simply be panels.
Card Two
Child themes can decorate them differently.
Card Three
Layout remains consistent across themes.
Typography Inside Panels
Heading
Normal paragraph with
a sample link,
bold text,
italic text,
and inline code.
Simpleton provides structure. Child themes provide personality.
- First item
- Second item
- Third item
Buttons
Code Block
<div class="simpleton-panel">
Hello Simpleton!
</div>
Table
| Component | Status | Version |
|---|---|---|
| Panels | Complete | 0.6 |
| Accent Bar | Complete | 0.6 |
| Cards | In Progress | 0.7 |
Framework Philosophy
Simple by Design
Simpleton provides a small vocabulary of reusable HTML primitives. Child themes are responsible for visual identity.
The goal is not to build another page builder, but to provide elegant, reusable HTML components that work everywhere.