Layout
Monster layout is built around stable spacing tokens, container-aware composition and predictable layers. The goal is not “fancy CSS”, but interfaces that stay readable when a split panel shrinks, when dark mode switches, and when components start nesting.
- Design for the container. Components should react to the space they receive, not only to the viewport.
- Use the spacing scale. Base gaps, padding and offsets on
--monster-space-*. - Compose simple structures. Start with stack, cluster or split before adding specialized layout.
- Use the shared layer model. Keep overlays on Monster layer tokens instead of local
z-indexvalues.
Preferred composition patterns
Start with one of these small structures before introducing a more specialized component.
Stack
Use vertical flow for forms, settings pages and article-like content.
Cluster
Use clustered items for badges, filters or short action groups that may wrap.
Split
Use split layouts when content and supporting controls need clear priority. The secondary area should collapse underneath when the container gets tight.
Card groups
Cards are surfaces, not a full layout strategy. Use them inside stack or grid structures instead of relying on cards alone to define page rhythm.
Responsive behavior
For page-level shells, viewport breakpoints still matter. For embedded demos, component docs and split panels, container queries are the safer default. That is why current showroom examples switch from two columns to one column based on available container width.
| Use case | Prefer | Reason |
|---|---|---|
| Whole page shell | @media | Viewport-level navigation and global framing. |
| Embedded component demo | @container | Works correctly inside split panels and documentation tabs. |
| Form rows and helper panels | @container | Avoids crushed side columns when the parent panel narrows. |
| Artwork and broad landing sections | @media plus tokens | Best for top-level marketing-style composition. |
Spacing scale
Monster spacing is intentionally small and consistent. Use the token values directly in CSS or their utility-class equivalents when the markup stays readable.
--monster-space-12px for tiny separators--monster-space-24px for dense inline gaps--monster-space-36px for compact controls--monster-space-410px for default internal breathing room--monster-space-516px for section gaps and card padding--monster-space-626px for larger group separation--monster-space-742px for strong section breaks| Utility classes | Purpose |
|---|---|
monster-margin-0..7 | Uniform outer spacing. |
monster-padding-0..7 | Uniform inner spacing. |
monster-margin-top-0..7 etc. | Directional spacing for precise adjustments. |
monster-padding-start-0..7 etc. | Logical padding that respects writing direction. |
Skeleton and loading states
Use skeletons for content that will appear in place shortly. Use the global boot loader for the application shell itself. Those are different responsibilities and should stay separate.
Layering and z-index
Layer tokens define a shared stack order for dropdowns, sticky elements, modals and tooltips. If a demo needs an overlay, use the Monster layer system instead of arbitrary local stacking numbers.
| Token | Typical use |
|---|---|
--monster-z-index-default | Normal document flow and base components. |
--monster-z-index-dropdown | Selects, menus and lightweight floating panels. |
--monster-z-index-sticky | Sticky headers and controls that must stay above flowing content. |
--monster-z-index-modal | Dialogs and strong focus-taking interfaces. |
--monster-z-index-popover | Poppers and contextual overlays. |
--monster-z-index-tooltip | Small transient explanations above everything else. |
Display and visibility utilities
Utility display classes are useful for simple state changes, but they should not replace component state models. Use them for layout plumbing, not as a substitute for proper interaction logic.
| Class | Effect |
|---|---|
.block, .inline, .flex, .grid | Fast display switching for wrappers and demo shells. |
.hidden, .none, .hide | Completely remove an element from layout flow. |
.visible, .invisible | Keep layout participation while toggling visibility. |
Do and don’t
- Do: Combine Monster spacing tokens, logical padding and container queries so examples remain stable in narrow panels.
- Don’t: Freeze demos with fixed widths, arbitrary pixel gaps or breakpoints that only work on the full page.