LeafyStrap

LeafyStrap is a Bootstrap-like stylesheet for styling and formatting main pages, derived from JustLeafy's 2021 Main Page design.
__TOC__
== Appearance ==
	
== ==
== 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.
==== 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.
==== Title ====
Creates an enlarged text, better suited with mp-accent-text, although it would be coloured when used inside main.
===== Subtitle =====
A subtitle component for title, use this as a "welcome" text, wiki jargon, or even some information about your wiki.
==== Sidebar composite ====
When used with the Box component, it would adjust the appearance of the box to fit the main page sidebar.
==== Grid container ====
Want to have your boxes in a grid? Use this container class to make it happen.
; Example
: 
=== 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
: 
==== Center text ====
Centers the text.
; Example
: 
=== 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.