Carrington Build Documentation

Module Markup Pattern

This is the markup pattern used for Carrington Build modules:

<div class="cfct-module">
    <h2 class="cfct-mod-title">...</h2>
    <img class="cfct-mod-img" alt="..." src="..." />
    <div class="cfct-mod-content">...</div>
</div>

 

There are three main pieces of content represented by the markup:

  • Module
    • Title
    • Image
    • Content

All of these elements, except for the module wrapper are optional. So a module may not have a title, for example, but if it does, it will have the .cfct-mod-title class.

Given this mini markup-pattern, there isn’t much you can’t do by simply adding a class to the module wrapper. For example, to style a module title, you could add the class style-b to the module wrapper, using specificity to target only modules with that class:

.cfct-module.style-b .cfct-mod-title {
    font-color: #090909;
}

 

Taking this approach means you can change the visual style of a module completely by adding one simple class to the wrapping module element.

You can add custom classes to the module wrapper, on a per-module basis using the class-addition feature. Clicking the Gear icon in the top-right corner of any module edit box reveals a “Set CSS Classes” option. Click it and you can add a space-separated list of additional classes to add to the module.

See also:

Back to Carrington Build

These sections are available to the public. The remaining sections are available exclusively to customers.