Simpleton Framework
Components
Simpleton components are lightweight HTML primitives designed to provide consistent structure while allowing child themes to provide visual identity. Each component is intentionally neutral and reusable.
Panels
Panels are the foundation for grouping related content.
Default Panel
Panels provide spacing, borders, and backgrounds while remaining visually neutral.
Small Panel
Useful for compact information.
Standard Panel
The default panel size.
Large Panel
Designed for feature sections.
Callouts
Callouts draw attention to important information without interrupting the flow of the page.
Default
The standard callout uses the theme accent color.
Information
Use for general information.
Success
Use when an action completes successfully.
Warning
Use when users should proceed carefully.
Danger
Use for destructive or critical actions.
Cards
Cards are currently implemented using panels. Future releases may introduce additional card variations while maintaining the same HTML structure.
Card One
Simple content card.
Card Two
Child themes may enhance this visually.
Card Three
Responsive by default.
Buttons
Example Composition
Combining Components
Simpleton components are designed to work together naturally. Panels can contain callouts, buttons, typography, images, lists, tables, or other components.
This is a callout inside a panel.
Design Philosophy
Simpleton provides the structure. Child themes provide the personality.
Components should remain semantic, reusable, lightweight, and free from theme-specific styling. Their appearance is intentionally understated so child themes can define the visual identity.