2.0

Layout

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

If you want to limit the width of your webpage, simply add a container class to the body tag. If you do this, sections will be limited to a width of 1200 pixels, unless your theme changes this width.

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

.grid.cols-3

4.0

Colors

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:

• No section color
• .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.

• No element color
• .element-white
• .element-light
• .element-dark
• .element-black
• .element-theme
• .element-theme-inverted

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. .section-transparent-top, .element-theme-top-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.

• No dark mode setting
• .dark-enabled
• .full-dark-enabled
• Force dark mode
• Turn off forced 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

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.

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.