Documentation
Get started with Renmoe
Your guide to building with Renmoe in Bricks Builder — from a blank canvas to a finished, on-brand page in minutes.
748 layouts
139 variables
733 utilities
6 grid presets
Welcome to Renmoe. Renmoe is a library of 748 pre-made, production-ready layouts for Bricks Builder — full sections and pages you copy straight into your site. Every layout shares one design system, so anything you paste already matches your styles.
Overview
There are two ways to get the layouts. Pick whichever fits — the three steps below are identical for both.
Free
A hand-picked starter set, free forever. Perfect for trying the whole workflow end to end before you commit.
Full access
Premium
The complete library of 748 layouts unlocked — plus every new release as it lands.
Either way, the three steps below are exactly the same.
Quick start
The whole flow, in three moves:
1
Import Renmoe’s styles into your Bricks site — once.
2
Copy any layout from the library.
3
Paste it into the Bricks editor.
The workflow
Three steps to go from a blank Bricks canvas to a finished, on-brand section.
1
Import the styles — once
Renmoe has two libraries, and each sets up once. Pick the tab that matches the library you’re copying from — Bricks Native (Bricks’ built-in Style Manager) or Bricks Core (the free Core Framework plugin) — then import the shared theme style below. After that, copying and pasting layouts is exactly the same for both.
Bricks Native library
For layouts from /bricks-native/layouts/. Styling is imported into Bricks’ own Style Manager.
renmoe-framework.css
:root {
--primary: hsla(258, 97%, 64%, 1);
--accent: hsla(12, 100%, 66%, 1);
--space-m: clamp(1rem, …, 1.25rem);
--text-xl: clamp(1.44rem, …, 1.56rem);
--radius-md: .75rem;
/* … 139 variables */
}
.bg-primary { background-color: var(--primary); }
.text-center { text-align: center; }
.gap-m { gap: var(--space-m); }
.shadow-md { box-shadow: var(--shadow-md); }
/* … + 729 more utility classes & grid presets */In Bricks — one-time setup
1
Open Bricks → Style Manager → Framework, paste the CSS, and click Parse CSS. Bricks lists the parsed 739 classes and 139 variables for review.
2
On the Variables tab, switch on “Add variable values to CSS variables”, then click Add to Variable Manager.
3
On the Classes tab, switch on “Add declarations as class settings”, then click Add to Class Manager.
4
Click the Save icon (top right of the Style Manager). This is what actually writes everything to your site — if you close the builder without saving, the import is lost.
Both toggles are off by default. Turn them on so the real values and styles come across — not just the class and variable names.
Bricks Core library
For layouts from /bricks-core/layouts/. Styling is driven by the free Core Framework plugin — its admin owns your colours, fonts and spacing.
renmoe.core
In Core Framework — one import
1
Install and activate the free Core Framework plugin, then run its onboarding — choose the Full experience and enable the Bricks addon.
2
Open Core Framework → Manage project, drop renmoe.core onto the import panel (or click Browse), then click Overwrite All.
3
Done. Your colours, type scale, spacing, radius and shadow are now loaded as native Core Framework settings — edit any of them in the Colors / Typography / Spacing / Design tabs and every pasted layout follows.
One import instead of pasting CSS. Because Core Framework owns the design system, changing a colour or a font size in its admin updates every Renmoe layout you paste.
Also import the theme style
Whichever library you chose, also import the theme style. It sets Bricks’ global element defaults — body & heading typography, button styles, section spacing and form fields — so every layout renders exactly like it does on Renmoe.
renmoe-theme-style.json
In Bricks — import the theme style
1
Download renmoe-theme-style.json with the button above.
2
In the Bricks editor open Settings → Theme Styles, click the Import icon, and upload the file. The Renmoe style is added with its condition already set to Entire website — done. Builder already open? Reload it once so the new style kicks in.
Already have your own theme style? Keep only one style active for the whole site — two competing styles lead to inconsistent defaults.
2
Copy a layout
Browse the library and open any layout, then hit Copy Layout — it lands on your clipboard instantly. A Customize BEM class panel then offers an optional rename: type a new class prefix and hit Copy in the panel, or press Esc to keep the copy you already have.
3
Paste into Bricks
In the Bricks editor, click on the canvas and paste with Ctrl / Cmd + V. The first time you paste, your browser may ask to allow clipboard access — click Allow (you only do this once). The layout renders instantly, already matching your imported styles. Swap the placeholder text and images, and the section is done.
Next steps
Browse the library
Explore 748 Bricks layouts across every section type.
Open
See pricing
Compare Free and Premium and pick the plan that fits.
Open