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 assumes you understand some basic HTML. 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 at that).

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 necessary, 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-medium and .container-wide for a wider area, and .container-fluid 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 Medium 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 (by default.)

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

<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

no class

col-3

no class

no class

no class

3.0

Content 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 should just work. 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-center-xs, etc.

There are also classes to change the scale of everything:

  • .tiny: 2/4ths scale
  • .small: 3/4ths scale
  • .normal: 4/4ths scale
  • .large: 5/4ths scale
  • .huge: 6/4ths scale

These are NOT compatible with dynamic screen size selectors. Mable will automatically resize page content based off screen size anyway. Nor will these classes interfere with that functionality.


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. This is in Mable because the creator uses it a lot.

A dropcap can be added by adding the .dropcap class 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 recommended to apply this to longer sections of text. This does not affect the title font.

The .tagline class can be used to make a smaller heading.

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. It should be applied to a header tag.

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 automatic 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. You can also set dark mode, such as with JavaScript, with a variable in the <html> tag named dark-mode. Set it to 1 to enable dark mode.

If you read through the source code you might notice that the way this is implemented duplicates rules because @media and html:is selectors cannot be put together

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

Headers are super simple. They work like normal sections, with a few special selectors.

<header class="section-dark" id="navigation">
	<div class="container-large">
		<nav><ul>
			<li><a href="">Item 1</a></li>
			<li><a href="">Item 2</a></li>
		</ul></nav>
	</div>
</header>

By default, headers will do nothing but display the <ul> items side by side. To change its physical behavior you will need to add one of several classes.

'

.fixed will remove the header from the page and make it stay at the top of the page permanently.

.sticly will not remove the header from the page, but will make it stay at the top of the page when it is scrolled past.

Both those behaviors only apply to medium or larger width screens.

You can also add a dropdown menu for a header item:

<header class="section-dark" id="navigation">
	<div class="container-large">
		<nav><ul>
			<li class="dropdown">Dropdown
				<ul>
					<li><a href="">Dropdown-acessible item</a></li>
					<li><a href="">Dropdown-acessible item</a></li>
				</ul>
			</li>
			<li><a href="">Item 2e</a></li>
		</ul></nav>
	</div>
</header>

8.0

Footers

Footers don't do anything except make the items inside it slightly smaller. Use the <footer> tag in place of a <section> to use this behavior.