Quick Start

Get Maple up and running in your project in seconds. Maple is a zero-config, no-build variable-first CSS engine.

Setup

Add Maple to your project by including the script below in the document <head> and start styling with utility classes.

index.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>

Like stylesheets, Maple is a render-blocking resource and belongs in <head> as a <script>, so styles exist before the browser paints. Skip async, defer, type="module", and end-of-body placement, for the same reason you wouldn't defer your main stylesheet: they let the browser paint before styles are ready.

Production: Pin the Version

For production sites, pin Maple to a specific package version so your pages do not change when a new release is published.

index.html

<script src="https://cdn.jsdelivr.net/npm/@f12io/[email protected]/dist/maple.js"></script>

What's Next?

You now have a fully functional, variable-first CSS engine running in your project. Where you go next depends on what you want to build:

Understand the philosophy: If you are curious why we abandoned build tools and static stylesheets, read the Motivation.
Start styling: To learn how Maple's utility classes work and how they map to CSS variables, jump into Syntax Reference.
Find a specific class: If you just need to look up syntax, explore the Utility Reference.
Go beyond the CDN: To self-host the runtime from node_modules or use the module build, see Advanced Installation.