v2.0.17~14kb gzipped#nobuildzero-configAtomic CSS Engine No Build Step or Configuration Required
Maple is a variable-first, stack-agnostic CSS engine that generates atomic styles from utility classes only when they appear in the DOM.
Include Maple and Start Styling
Get Maple up and running in seconds. Whether you’re building with WordPress, Rails, React, Angular, or plain HTML, it works out of the box.
Introductionindex.html
<!doctype html>
<html lang="en">
<head>
<!-- Include Maple in the head -->
<script src="https://cdn.jsdelivr.net/npm/@f12io/maple/dist/maple.js"></script>
</head>
<body>
<!-- Start styling -->
<div class="bgc-blue-500 c-white p-4 rad-2">Hello World</div>
</body>
</html>
Native Palette
Maple transforms native CSS colors into a fully shaded OKLCH palette. Use familiar tone stops like 50-950, or reach for any intermediate scale value when you need finer control.
--l-shift variable can transform your entire interface for dark mode while maintaining perfect visual balance and contrast. Hybrid Dark Mode
Maple provides a unique Hybrid Dark Mode Architecture that automatically supports both system preferences and manual toggles. A single --l-shift variable can transform your entire interface for dark mode while maintaining perfect visual balance and contrast.
Interactive Motion
Apply rich motion using built-in aliases like fade-in, scale-in, or spin. Customize timing, delays, fill modes, and keyframe variables directly in markup.
CSS Grid on Easy Mode
Maple's grid system provides high-level abstraction over CSS Grid via shorthand syntax for columns, rows, spanning, and named areas. Build complex, responsive layouts with minimal markup.
Explore Grid LayoutReady to start?
Drop Maple into your project and style your interface right away. No build pipeline, no config files.