Syntax Reference
Maple class names are designed to be expressive and highly configurable, allowing you to handle media queries, complex selectors, and utility composition.
Main Structure
Every Maple class name follows a strictly logical, colon-separated structure:
media-query:selector:utility Common Combinations
Since the first two parts are optional, Maple scales from simple utilities to advanced state management:
Type
Syntax Example
Explanation
Utility Only
bgc-red Applies background red directly to the element.
Selector + Utility
&:hover:bgc-red Applies background red only when the element is hovered.
Full Expression
@md:^.active:bgc-red Applies background red at medium screens when a parent has the 'active' class.
Delimiters
The colon : is the engine's primary delimiter, used to separate the three structural parts of the class name.
If you are injecting an arbitrary value that naturally contains a colon—such as a URL (https://)—you must wrap that specific value in brackets [] to protect it from being parsed as a modifier:
<div class="bgimg-url|[https://example.com/image.jpg]"></div>