Mable Documentation

In progress

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).

1.0

General Document Setup

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.

2.0

Layout

This section is about the larger blocks that make up Mable webpages.

2.1

Dynamic Screen Sizes

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).

2.2

Sections, Containers, and Rows

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 .section-thin-xs and .section-full-xl.


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:

Normal Container Large Container Fluid Container


A .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

2.3

Grids

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>

Examples

.grid

col-12

col-6

col-6

col-8

col-4

col-3

col-3

col-3

col-3

col-12 col-sm-6 col-xs-4

col-12 col-sm-6 col-xs-4

col-12 col-sm-6 col-xs-4

.grid.cols-3

col-2

col, col-1

col-3

col, col-1

col, col-1

col, col-1

3.0

Fonts and Text

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-left, .text-center, .text-right, and .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: .text-xs-center, etc.

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.


The <badge> element can used to better differentiate labels or tags or something. These have some extra customization using the following classes:

  • rounded: Rounds the corners a little bit
  • pill: Rounds the corners as much as possible
  • hollow: Transparent background with an outline

The 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.

The .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.

The .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.

4.0

Colors

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:

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: .section-theme-sm, .element-dark-lg, etc.

You can also specify for either to only apply when the browser is scrolled to the top, you will need to import the js/top.js JavaScript file. .top-section-transparent, .top-element-theme-sm, etc.

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 .section-dark.

5.0

Buttons

Buttons are very simple. They can take three forms:

<a class="button">Text</a>
<button>Text</button>
<input type="submit" value="Text">

Your typical button will look like this:

You can also make it hollow by adding the .hollow class:

And change its shape using the .rounded and .pill classes:

6.0

Code

Mable offeres a few choices for displaying code blocks.

Using the <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 .monospace and .code-font classes to use the monospace font.

7.0

Headers