Carrington Build Documentation

Integrating the CSS

Next up, you’ll want to integrate some basic CSS styles for Carrington Build. Carrington Build automatically styles rows and columns for your site using percentages. However, you’ll want to add a few additional styles to get things looking their best.

Adding Gutter Spacing to Columns

Columns in Carrington Build do not have gutters by default. We’ll want to add some. The following CSS adds 30px margins between columns, for a nice, spacious layout. You can add these styles to your style.css file.

/**
 * Add default margins to modules
 */
.cfct-module {
	margin-right: 15px;
	margin-left: 15px;
}

/**
 * Remove left-hand margin from modules in first columns
 */
.cfct-block-a .cfct-module,
.cfct-block-ab .cfct-module,
.cfct-block-abc .cfct-module,
.cfct-block-d .cfct-module {
	margin-left: 0;
}

/**
 * Remove right-hand margin from modules in last columns
 */
.cfct-block-c .cfct-module,
.cfct-block-bc .cfct-module,
.cfct-block-abc .cfct-module,
.cfct-block-e .cfct-module {
	margin-right: 0;
}

What’s happening here? Modules are the individual “chunks” of content you can add to columns in Carrington Build. Since Columns are using percentages (e.g. a 1/3 column is 33.33% wide), we can’t add margins to columns, since (33.33% + 15px) x 3 > 100%. In other words, the percentage plus the margin would be too wide. We can add margins to elements inside the columns, however, and that’s just what we’re doing here.

You can tweak the left and right margins on .cfct-module to customize the spacing between columns for your site.

Styling Modules

You’ll also want to add some bottom margin to modules to keep them spaced apart. You can do this by targeting the class .cfct-module

WordPress Blogs are full of user-generated content, so designing defensive CSS styles is key. Setting overflow: hidden; on module wrappers keeps users from accidentally breaking your layout with long strings of unbroken text or enormous images.

Frequently, content inside modules will be wrapped in paragraph (p), list (ul, ol) or similar tags. Occasionally, however text in a module may not be wrapped in any tag at all. Since most themes will a include default bottom margin on these elements, bottom module spacing could potentially be inconsistent.

A neat trick to keep spacing consistent is to add a bottom margin to the module content wrapper (.cfct-mod-content) that is greater than or equal to the bottom margin of potential content tags. Since elements that are display: block will collapse adjacent margins, spacing will always remain consistent at the bottom of modules. This is particularly useful if you plan to style modules using a visible box.

Combine these styles together and you get something like this:

/**
 * Keep overflow contained
 */
.cfct-module {
	margin-bottom: 10px;
	overflow: hidden;
}
/**
 * Keep spacing consistent with margin collapse
 */
.cfct-module .cfct-mod-content {
	margin-bottom: 12px;
}

See also:

Back to Carrington Build

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