SmolCSS Patterns Demo

CSS Properties Reference Guide

A quick reference of all custom properties used in SmolCSS patterns.

1. Responsive Container

A centered container with responsive padding that maxes out at a comfortable reading width.

This works by using the min() function with two values:

1. Full width minus padding (100% - padding*2)
2. Max width (var(--smol-container-max-width))

2. Auto Grid

A responsive grid layout that automatically adjusts the number of columns based on available space.

This works by using CSS Grid with auto-fit and minmax():

• Items will be at least --smol-grid-min-item-width wide
• Items will not overflow the container thanks to the min() function
• Items will stretch to fill available space with 1fr

3. Flexbox Grid

A flexible grid layout using flexbox that allows items to grow and wrap naturally.

This works through flexbox:

• Flex items use flex: 1 1 var(--smol-flex-min-item-width)
• Items grow and shrink, but try to maintain their base width
• Items wrap when they don't fit on a line

4. Multi-column Layout

A layout that automatically divides content into multiple columns for better readability.

This uses CSS Multi-column Layout:

• By default uses a fixed column count
• With feature detection, switches to a more flexible width-based approach

5. Switcher

A layout that switches between horizontal and vertical arrangement based on available space.

This works through a clever flexbox technique:

• Uses flex-basis: calc((var(--smol-switcher-threshold) - 100%) * 999)
• When container width is less than the threshold, items stack vertically
• When container width exceeds the threshold, items arrange horizontally
• The additional rule ensures more than two items always stack

6. Stack

A simple vertical stack with consistent spacing between elements.

This works by:

• Using flexbox with flex-direction: column
• Setting margins between elements using the adjacent sibling selector * + *
• Offering a recursive variant that applies spacing to all descendants

7. Box

A simple bordered container with padding.

This is a simple component that applies consistent styling to create a box container.

8. Center

A component for horizontally centering content with a maximum width.

This works by:

• Using margin-inline: auto to center the container
• Setting box-sizing: content-box to handle padding correctly
• Limiting width with max-width

9. Sidebar

A responsive layout with a sidebar that adapts to available space.

This works through creative use of flexbox:

• Sidebar has flex-basis: var(--smol-sidebar-sidebar-width) and flex-grow: 1
• Content has flex-basis: 0, flex-grow: 999, and min-width
• When space is limited, content's min-width forces the sidebar and content to stack

10. Cluster

A flexible layout for grouping related items with consistent spacing.

This uses flexbox with wrapping:

• Items are laid out in a row with consistent spacing
• Items wrap to new lines when needed
• Alignment can be customized

11. Frame

A responsive container that maintains a specific aspect ratio for media.

This works by:

• Using the aspect-ratio property to maintain proportions
• Centering the content with flexbox
• Using object-fit: cover for media to fill the space

12. Breakout

A component that breaks out of the content flow to span the full viewport width.

This works through creative positioning:

• Uses width: 100vw to span the full viewport
• Centers with margin-left: 50% and transform: translateX(-50%)
• Caps the maximum width to prevent excessive stretching

13. Flow

A simple utility for adding consistent vertical spacing between elements.

This works by:

• Using the adjacent sibling selector * + * to add top margin
• Only applying spacing between elements, not before the first or after the last

14. Cover

A layout that covers the full viewport height with centered content.

This works by:

• Setting min-height: 100vh to cover the viewport
• Using flexbox with column direction
• Items with class .smol-cover-centered will center vertically
• First and last elements align to the top and bottom (unless centered)