This is the documentation for how to create Mable websites. If you're looking to create a Mable theme, visit this page.
This documentation also assumes you understand some basic HTML, as well as refering to external resources. If you don't know anything about HTML or CSS you should look up a guide on it before you try to use Mable (or make any static webpage).
A typical Mable HTML document will look like this:
<html> <head> <!-- Page Info --> <title>This is a sample Mable HTML Header</title> <meta name="description" content="Page Description"> <meta name="keywords" content="Page, Tags"> <meta property="og:image" content="https://full-url"> <link href="images/brand/favicon.png" rel="shortcut icon"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- CSS Sheets --> <link type="text/css" rel="stylesheet" href="css/style.css"> <!-- Themes --> <link type="text/css" rel="stylesheet" href="themes/sample-theme" id="custom-theme-sheet"> <!-- Packages --> <link type="text/css" rel="stylesheet" href="packages/sample-package.css"> </head> <body> // Sections </body> </html>
Simply put all of that into a .html document, change the
href fields if the document is in any subfolder(s), and change the other data fields to your liking. A lot of the stuff in the
<head> section isn't neccicary, and is just good practice to have. Remove anything you don't need or want.
This section is about the larger blocks that make up Mable webpages.
In order to help compensate for the wide range of screen sizes, Mable has implemented compatibility for Bootstrap-standard dynamic screen size selectors:
xs: width ≤ 576px
sm: width ≤ 768px
md: width ≤ 992px
lg: width ≥ 992px
xl: width ≥ 1200px
Whenever you see any one of those five in a class name, the other four will work (in its place).
Generally, the page is comprised of sections, one after the other, which looks like a series of horizontal stripes. They are typically coded like this:
<!-- Section Name --> <section id="section-name"> <div class="container"> <div class="row"> // Regular HTML content goes here </div> </div> </section>
Sections will also have padding applied to them, this can be adjusted with the following classes:
.section-edgeless: No padding
.section-thin: Small padding
.section-regular: Default behavior
.section-large: Almost double padding
.section-huge: Over double padding
.section-full: 100% of the browser window's height
These are also compatible with dynamic screen size selectors. Examples are
Containers are used to dictate/limit the width of the section's content. The three classes to use are
.container for regular text,
.container-wide for a wider area, and
.container-flud for an area with no maximum width. All of them will maintain a standard amount of margin on their sides.
You can try it out with the following buttons:
.row is used to space individual elements apart. Each element inside a row will be spaced apart, and each row will be spaced apart three times as much
Grids are very simple, and are similar to Bootstrap's. To create a grid, simply make a parent
<div> with the
.grid class. It is recommended to use the
.row structure as the
.grid container so you can easily mix grids in with regular text within a container, but any tag that displays as a block will work.
<section> <div class="container"> <div class="row grid"> // Child elements </div> </div> </section>
Grids normally have a certain amount of spacing between each child element, but you can change that with the following classes:
.grid.compact: Half spacing
.grid.seamless: No spacing
Grid items are then allowed to have a specified width (in columns) from 1 to 12.
<div class="row grid"> <div class="col-6"> <!-- Content --> </div> <div class="col-3"> <!-- Content --> </div> <div class="col-2"> <!-- Content --> </div> </div>
Child elements of these grid items (where
<!-- Content --> is in the above code) will also have spacing applied between their peers the same way as rows.
These are also compatible with dynamic screen size selectors:
<div class="row grid"> <div class="col-4 col-sm-6 col-xs-12"> <!-- Content --> </div> <div class="col-4 col-sm-6 col-xs-12"> <!-- Content --> </div> <div class="col-4 col-sm-6 col-xs-12"> <!-- Content --> </div> </div>
You can also change the number of columns in a grid anywhere from 1 to the default 12:
<div class="row grid cols-3"> <div> <!-- Content --> </div> <div> <!-- Content --> </div> <div> <!-- Content --> </div> </div>
This is intended to be used for a portfolio or a list of blog posts or something where each element would have the same width, but nonetheless you can still specify the column-width for each child element.
This is also compatible with dynamic screen size selectors:
<div class="row grid cols-3 cols-sm-2 cols-xs-1"> <div> <!-- Content --> </div> <div> <!-- Content --> </div> <div> <!-- Content --> </div> </div>
There really isn't much to this section. Once inside a row or a grid child element, you can put basically any item and it will just work, but Mable offers a bit of extra customization and functionality.
There are four classes to customize the text alignment:
.text-justified. These will apply to any and child elements automatically, not just what the class is applied to. These are also compatible with dynamic screen size selectors:
There are also classes to change the scale of everything:
.tiny: 2/4ths scale
.small: 3/4ths scale
.large: 5/4ths scale
.huge: 6/4ths scale
These are NOT compatible with dynamic screen size selectors as Mable will automatically resize page content based off screen size. These two bits of functionality will NOT interfere with each other.
breadcrumbs class is used for displaying the page path. It basically just switches the font to monospace.
A dropcap can be added by adding the
.dropcapclass to a
<span> element. It is recommended to only include one or a few characters. This will make the text inside the
<span> bigger, and have a height of multiple lines.
.reading class will activate the use of the reading font, usually serif. It is reccomended to apply this to things such as blog posts. This does not affect the title font. The
.monospace class will similarly use the monospace font.
.section-number class is useful for marking the number of a given section in a document, or a chapter number, or something. I use them in this document above the header for each section.
You can click on any of the class names that are in a list to apply it to this section.Reset Button
The code behind what manages the colors in Mable is kinda complicated, but using them is really easy. Everything automatically inherits the behavior it should have, so all you have to do to is add the functionality you want where you want it:
.section-transparent: Transparent background, black text
.section-white: White background, black text
.section-light: Light background, dark text
.section-black: Black background, white text
.section-dark: Dark background, light text
.section-theme: Theme colored, background light text
.section-theme-inverted: light background, theme colored text
There's also settings for the color of the element. These behave as the inverse of the
.section classes. For example
.element-white will exhibit the same behavior as
.section-dark but without the background color. These will override any section colorings.
Both are compatible with dynamic screen size selectors:
You can also specify for either to only apply when the browser is scrolled to the top, you will need to import the
There's also compatibility for dark mode.
.dark-enabled will result in light text, and a background a bit lighter than
.section-dark when the browser is in dark mode.
.full-dark-enabled will result in the same behavior as
Mable offeres a few choices for displaying code blocks.
<pre> tag will apply a washed out background to the code, and make the font monospace. Use the
<code> tag or the
.code class for inline uses.
You can also use
.code-font classes to use the monospace font.