Open Source
Built in the open, for everyone.
Stride CSS is MIT licensed. Use it in personal projects, client work, or commercial products. No attribution required. No strings attached.
Philosophy
Why we open-sourced it
We built Stride as the design system behind Gallop. It's what makes AI-generated pages look human-designed. We could have kept it proprietary. It's a genuine competitive advantage. But we decided adoption matters more than exclusivity.
When agencies and developers use Stride in their own projects, they already know the class system when they adopt Gallop. The framework becomes a shared language between human developers and AI agents. That network effect is worth more than a locked ecosystem.
<!-- That's it. No npm, no build step. -->
<link rel="stylesheet"
href="stride.css">
<!-- Start using classes immediately -->
<div class="gp-container">
<h1 class="heading-xl">
Hello, Stride.
</h1>
</div>What You Get
Everything in one repo.
CSS Framework
A complete design token system with oklch color science, responsive utilities, and semantic class presets. 52 KB total. No PostCSS, no Sass, no build pipeline.
250 Curated Icons
Regular and duotone weights. Every icon hand-picked for real-world web app UI: navigation, actions, status indicators, media controls, commerce, and dev tools.
Vanilla JS Utilities
Dropdowns, sticky navs, modals, and interactive components. Zero framework dependencies. Works with React, Vue, Svelte, or plain HTML.
MIT License
Use it anywhere. Personal projects, agency work, SaaS products, WordPress themes. No attribution required. Fork it, extend it, ship it.
Modern CSS
Built on browser primitives
Stride doesn't polyfill or transpile anything. Every feature uses native browser APIs that ship in Chrome, Firefox, Safari, and Edge today.
- oklch(): perceptually uniform color definitions
- color-mix(): derived states computed by the browser
- @property: animatable custom properties with type safety
- Container queries: component-level responsive layout
/* oklch: perceptually uniform */
--primary: oklch(0.68 0.145 60);
/* Derived hover state, just math */
.btn:hover {
background: color-mix(
in oklch,
var(--primary),
white 15%
);
}
/* @property: animate hue channel */
@property --hue {
syntax: '<number>';
inherits: false;
initial-value: 60;
}Get Started
Clone the repo. Link the CSS. Ship it.
Star the repo on GitHub, or explore the full Stride documentation.