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>

Important: Prevent Unstyled Content

You must load Maple as a blocking script in the document <head>. Maple replaces a render-blocking stylesheet with a small render-blocking runtime. Loading it with async, defer, type="module", or at the end of the body allows the browser to paint elements before Maple has generated their styles, which can cause a Flash of Unstyled Content (FOUC) during the initial page load.

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.