Structure

Every page must strictly follow the html structure below:

<header id="Header" class=".header"></header>

<main id="Main" class="main"><div class="container"></div></main>

<footer id="Footer" class="footer"></footer>

Containers

Containers have been built from scratch using divs to follow the Flusponsive system.

Columns

Columns have also been rebuilt to follow the Flusponsive system.

Isotope

Use isotope-container, isotope-item, and isotope-sizer to easily make masonry layouts.

3-Column

To make a 3-column layout, add isotope-3col to both isotope-sizer and isotope-item.

4-Column

5-Column

Variations

Easily create dynamic grid layouts using css pseudo classes such as nth-child etc.

The following css targets the 1st item in a list and every 7th item thereafter.

#nth-child-example .isotope-item:nth-child(7n+1) {width: 66.66%;}

@media screen and (max-width: 479px) {
  #nth-child-example .isotope-iteml:nth-child(7n+1) {width: 100%;}
}

Richtext

The primary richtext block is already balanced and ready to be used. Simply increase or decrease the font-size of the richtext element using ems to adjust it according to your needs.

Dropcaps

Add dropcaps to target the first letter of the first nested paragraph.

Use --dropcaps-size and --dropcaps-height variables to adjust as needed.

Smallcaps

Add smallcaps to convert all text to caps, but in a smaller font size than normal caps.

Knockout

Add knockout to any text that also has a background image or gradient set.

One-Column Form

Two-Column Form

Icons

All icon elements use svg code embeds to reduce http requests as well as speed up render time. This also allows you to control the svg icon color, apply svg knockout effects, and more.

Buttons

All button variants have been "minimalized" for consistency and simplicity. Additionally, many common javascript functions are available to use out-of-the-box.

General

Social Media

Dropdowns

You can configure dropdown menus by adding a couple classes.

Accordions

Create an accordion on hover or click with just a couple classes.

Zoom

Use data-action="zoom" to create an image zoom effect.

Mute

Logos

The company's official trademarks including wordmarks, iconmarks, logomarks & specialty marks.

Just replace the symbol's contents with the logo image and svg code to manage throughout the website.

Fonts

The company's official fonts for headings, paragraphs, handwriting, etc.

Colors