Skip to content

WordPress theme framework

Project Mairan

The GSAP-powered Elementor child theme and design-token framework behind Business Nebula client projects.

A Client-First utility framework, an axis-aware fluid spacing system, design tokens and a declarative GSAP animation layer, packaged as a child theme of Hello Elementor so every project starts consistent and stays maintainable.

Status: In-house · v1.0.0

Business Nebula’s own theme framework for client WordPress builds. Enquire to have your site built on it.

Start a conversationSee it move
Spacing steps, one scale per axis
10 × 2
Declarative animation presets
14
GSAP plugins, registered as they load
12
px fluid range, no spacing media queries
375–1440

What it is

Project Mairan is Business Nebula’s WordPress theme: a child of Hello Elementor that carries the agency’s design system as code. Tokens for colour, type, spacing, radius and motion live in one stylesheet, a Client-First utility framework sits on top of them, and a declarative animation layer turns a single HTML attribute into a GSAP scroll animation.

It is built as a shared upstream. The framework files are never edited per project; each site overrides tokens in one stylesheet, so a fix made once in the theme can reach every site built on it.

Who it’s for

  • Business Nebula client projects: it is the reusable framework theme our WordPress builds start from.
  • Teams building in Elementor, who set animations from Advanced → Attributes and are never interrupted by them inside the editor.
  • Editors in the block editor, who get the brand colour palette and type scale.
  • Visitors who prefer reduced motion: both the CSS and the animation layer stand down.

Key capabilities

A design system that ships as a theme

Axis-aware fluid spacing

Every spacing token exists twice: a vertical scale that eases gently (mobile is about 70–88% of desktop) and a horizontal scale that shrinks hard (about 25–50%). Utilities route each property to the right axis on their own.

Fluid typography

Body text and every heading size is a clamp() floored at a 375px viewport and capped at 1440px, so type scales without breakpoints.

Design tokens

Four brand colours, each with 75, 50 and 25% opacity variants derived with color-mix, so changing a base colour updates its variants. Dark mode follows prefers-color-scheme automatically.

Client-First utilities

Section, page-gutter, container and section-padding anatomy, decoupled heading styles, text, colour, button, form, layout and visibility utilities.

Declarative animation

Add data-bn-animate="fade-up" to any element and GSAP animates it on scroll: fades, slides, scale, stagger, parallax, word reveals, typewriter, scramble, SVG drawing, marquees and counters.

The full GSAP toolkit

GSAP 3.13 with ScrollTrigger, ScrollSmoother, SplitText, DrawSVG, MorphSVG and more, loaded from the jsDelivr CDN and registered only if each plugin actually loads.

Elementor & Gutenberg ready

Theme Builder locations, editor styles that match the front end, a re-scan hook for popups and AJAX content, and a curated block-editor palette and font sizes.

Accessible by default

A skip-link style, visible focus outlines, and reduced motion honoured in CSS and JavaScript. Opt-in ScrollSmoother never runs in the editor or for reduced motion.

How it works

One name, two axes

A single spacing scale either leaves too much horizontal padding on a phone or collapses vertical rhythm on desktop. Mairan keeps two scales with the same names: vertical room stays close to the design, horizontal room gives way where the screen demands it. Drag the viewport to see both.

768px
Mairan spacing tokens at a 768px viewport, vertical and horizontal, in pixels
TokenV verticalH horizontal
xxsmall
4
4
xsmall
8
7
small
15
11
medium
21
16
large
28
22
xlarge
40
30
xxlarge
54
39
huge
76
56
xhuge
103
72
xxhuge
152
101

How utilities pick an axis

  • .padding-mediumBlock: padding-block (V) · Inline: padding-inline (H)
  • .padding-top-mediumBlock: V · Inline: —
  • .padding-inline-mediumBlock: — · Inline: H
  • .gap-mediumBlock: row-gap (V) · Inline: column-gap (H)
  • .padding-section-largeBlock: V (88 → 128px) · Inline: —

Values interpolate linearly between a 375px and a 1440px viewport. Because the tokens are fluid, no media queries are needed to scale spacing.

Declarative motion

One attribute, one animation

In Mairan, motion is data: an attribute on an element names the preset, optional attributes tune it, and the animation layer wires GSAP and ScrollTrigger for you. These tiles re-create six presets in this site’s own GSAP, from the same attributes.

Fade up

data-bn-animate="fade-up"
data-bn-distance="32"

Slide and fade from below. Distance, delay, duration, easing and the ScrollTrigger start are all attributes.

BN

Scale in

data-bn-animate="scale-in"

A subtle scale and fade, from 0.92 unless data-bn-scale-from says otherwise.

Stagger

data-bn-animate="stagger"
data-bn-stagger="0.1"

Animates an element’s children one after another. Point it at specific children with data-bn-stagger-target.

Projects start consistent and stay maintainable.

Reveal text

data-bn-animate="reveal-text"
data-bn-stagger="0.04"

Word by word from behind a mask. In the theme this is SplitText; here the words are split in the markup.

Draw SVG

data-bn-animate="draw-svg"
data-bn-stagger="0.15"

Draws an SVG’s strokes, on the element itself or on every shape inside it. DrawSVGPlugin in the theme; stroke offsets here.

presets
14
GSAP plugins
12
spacing steps
10

Counter

data-bn-animate="counter"

Counts to a number on scroll, with data-bn-from, data-bn-to and a format suffix.

In Elementor

Edit any widget or section, open Advanced → Attributes, and paste:

data-bn-animate|fade-up
data-bn-delay|0.2

On a project

Three steps to install, one file to customise

Mairan installs like any child theme. Everything a project changes lives in a single override stylesheet, so the framework underneath can keep moving.

  1. Install Hello Elementor

    Mairan is a child theme, so its parent comes first.

  2. Add the theme

    Drop the folder into the themes directory.

    /wp-content/themes/business-nebula/

  3. Activate it

    Under Appearance → Themes.

  4. Override per project

    Set the project’s palette, fonts and any axis token in theme.css. Variants re-derive from the base colours.

    --space-v-huge: clamp(4rem, 2rem + 5vw, 8rem);

Tech stack

Built on

WordPress
Child theme of Hello Elementor · WordPress 6.0+ · PHP 7.4+
GSAP 3.13
Core and twelve plugins from the jsDelivr CDN, deferred in production
Elementor & Elementor Pro
Theme Builder locations, editor styles, re-scan on render
Block editor
Brand palette and type scale, editor styles
Modern CSS
Custom properties, clamp() and color-mix() tokens
Montserrat & Galano Grotesque
Display and body families, plus a dedicated menu font token
Test harnesses
Dependency-free PHP and Node checks for hook order and activation logic
GNU GPL v3 or later
Licence

Build on Mairan

Want a site built on this foundation?

Mairan is the theme framework Business Nebula builds client WordPress sites on. Tell us about your project, or see how our web design and development work runs.

Start a conversationWeb design & development

Developed by BN

More we’ve built

Status: In-house · rolling out

WordPress site build & deployment

Project Orion

The standardised, git-managed WordPress build every new Business Nebula client site is spun up from.

Status: Pre-launch · free sets at pulsaricons.com

Animated SVG icon library

Pulsaricons

Over 24,000 animated marks in families of fifteen, each family with everyday tranches beside it.

pulsaricons.com (opens in a new tab)