Fandom Developers Wiki

LeafyStrap is a Bootstrap-like stylesheet for styling and formatting main pages, derived from JustLeafy's 2021 Main Page design.


Leafystrap example


Leafystrap example light



Getting started

LeafyStrap uses classes to identify and create components, those classes could be combined with each other to create more sophisticated components to your main page.


Here is a list of all usable components currently in LeafyStrap:


Optionally wrap individual box elements with this component to make it appear significant, optional but recommended.

<div class="mp-main">
<div class="mp-box">
I'm important


The base component of the stylesheet. Creates a box with a left border that corresponds with the wiki's accent theme, background corresponds with the wiki's background.

<div class="mp-box">
I am a box


Creates an enlarged text, better suited with mp-accent-text, although it would be coloured when used inside main.

<h2 class="mp-title">I'm bigger!</h2>

A subtitle component for title, use this as a "welcome" text, wiki jargon, or even some information about your wiki.

<h2 class="mp-title">I'm bigger!</h2>
<div class="mp-subtitle">No you're not.</div>

Sidebar composite

When used with the Box component, it would adjust the appearance of the box to fit the main page sidebar.

<div class="mp-box mp-side">
I fit in more naturally with the sidebar.

Grid container

Want to have your boxes in a grid? Use this container class to make it happen.

<div class="mp-grid">
<div class="mp-box">Item 1.</div>
<div class="mp-box">Item 2.</div>
<div class="mp-box">Number three.</div>
<div class="mp-box">Numbah four, <s>pilot dies mid flight.</s></div>


Here is a list of all usable "additions", or decorators, to the components to spice up things.

Accent text

Display text with accent colour, this behaviour can already be seen in some previous declarations such as the title.

Welcome to <span class="mp-accent-text">the wiki</span>

Center text

Centers the text.

<div class="mp-center mp-box">I'm centered!</div>


LeafyStrap uses custom variables to standardize and increase customizability inside Common.css and the article space scope. See CSS Variables With Inline Styles by Ahmad Shadeed to see how to use CSS variables inline. Here is a list of all the variables and their uses:

The overall accent colour, this affects borders and accented text.
The normal text colour.
The background colour of components.
The overall font.
Border width of boxes.
General font used by components.
Font used by title and header texts.
Margin size used by components.
Padding size used by components.
Text above can be found here (edit)