Techniques

Techniques are recipes that sit on top of the core: small, self-contained patterns you copy in and compose with the directives and components you already use. They are pure markup plus a class, token-themed, and they work in both light and dark.

Load the stylesheet once, then use any s- prefixed class from the pages listed here. The examples on these pages also use layout and UI Library classes such as .s-row, .s-stack, .s-btn, .s-avatar, and .s-spinner. Those live in components.css; see the UI Library for how to load it.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/velofy/summitjs@main/docs/assets/techniques.css" />

#Loaders

• Loaders & Spinners: fifteen pure-CSS loaders, animated logo marks, and skeleton screens.

#Style families

• Matte Glassmorphism: frosted, low-gloss surfaces that stay legible over anything.
• Neumorphism: soft, extruded UI built from twin light and dark shadows.
• Claymorphism: puffy, rounded, playful clay surfaces.
• Retro UI: hard shadows and neon text.
• Brutalism: stark borders, loud type, and blunt offset shadows.
• Aurora Backgrounds: slow, glowing color fields behind your content.
• Glow & Spotlight: a highlight that follows the cursor across a card.

#Patterns

• Navbar Patterns: active links, a responsive mobile menu, and a glass bar.
• Using Tailwind CSS: Summit for behavior, Tailwind for styling, no build step.