Appearance

Installation

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.

Components

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

Main

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
</div>
</div>

Box

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
</div>

Title

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>

Subtitle

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.
</div>

Grid container

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

Example

<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>
</div>

Decorators

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.

Example

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

Center text

Centers the text.

Example

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

Variables

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:

--lstrap-accent

The overall accent colour, this affects borders and accented text.

--lstrap-text-c

The normal text colour.

--lstrap-bg

The background colour of components.

--lstrap-font

The overall font.

--lstrap-border-w

Border width of boxes.

--lstrap-font

General font used by components.

--lstrap-header-font

Font used by title and header texts.

--lstrap-margin

Margin size used by components.

--lstrap-padding

Padding size used by components.