1ABOUT BUILDER CSS

Source: builder.scss

A lightweight, intuitive responsive CSS layout system for building web apps.

Use together with any type of frontend UI component framework or none. Create sophisticated responsive layouts quickly and easily using a combination of simple key word utility classes.

Supports modern browsers, including Edge. (IE11 support is being phased out.)

Features

Source: builder.scss

Focused on layout and utility styles. No “component” styles.
Easy to use and understand by people with only basic CSS knowledge.
Intuitive, easy to remember class names that work logically based on context.

How to Use

Source: builder.scss

Format your text content using basic HTML tags. (h1–h6, p, etc.)
Create a layout by adding the .layout class to a parent element such as a div.
Use modifier classes to change the size, spacing, and alignment of elements to create different layout patterns.
Add responsive suffixes to target styles to specific views and make your layout responsive.

1CONTENT

Source: content/_content.scss

Basic HTML element and typography-related styles and modifiers.

Elements

Source: content/_content.scss

“Element” styles work with plain HTML tags or by using classes of the same name.

This gives you flexibility to change visual styling separately from the underlying HTML semantics.

Elements—Anchor Links

Source: content/_content.scss

Use either an HTML anchor link tag, .a class name, or alternate class .link.

.a or alternate class .link

Example

<p>
  <a href="">A text link</a>
</p>

<p>
  <button class="link">A button element styled like an anchor link</button>
</p>

Use “plain” modifier style to remove default link styling:

Example

<p>
  <a class="plain" href="">A “plain” text link</a>
</p>

Elements—Headers

Source: content/_content.scss

Use either h1–h6 HTML tags or .h1–.h6 class names.

.h1
.h2
.h3
.h4
.h5
.h6

Example

<h1>Header level 1 <small class="normal">(desktop: 60px, tablet: 46px, mobile: 32px, extra bold)</small></h1>
<h2>Header level 2 <small class="normal">(desktop: 50px, tablet: 30px, mobile: 28px, extra bold)</small></h2>
<h3>Header level 3 <small class="normal">(desktop: 30px, tablet: 24px, mobile: 20px, extra bold)</small></h3>
<h4>Header level 4 <small class="normal">(desktop: 20px, tablet: 20px, mobile: 18px, extra bold)</small></h4>
<h5>Header level 5 <small class="normal">(desktop: 16px, tablet: 16px, mobile: 16px, extra bold)</small></h5>
<h6>Header level 6 <small class="normal">(desktop: 14px, tablet: 14px, mobile: 14px, extra bold)</small></h6>

<hr>

<p class="h2">A paragraph styled as an h2 header</p>
<p>Default styled paragraph text. <small>(desktop: 16px, tablet: 16px, mobile: 16px)</small></p>

Elements—Paragraphs

Source: content/_content.scss

Use either an HTML p tag or .p class name.

.p

Note: These font styles apply to other non-header text (sometimes referred to as “body” text) content by default too, not just to paragraphs.

Example

<p>
  Lorem ipsum <strong>some bold text</strong>, consectetur adipiscing elit. Aenean pretium, urna vitae tempor sodales, metus diam rutrum arcu, eget porttitor erat sapien sit amet metus. Etiam porttitor dolor at metus auctor luctus. Integer urna ligula, ultrices at accumsan nec, rutrum in lacus. Integer eu dolor vel ipsum cursus cursus. Phasellus sed blandit nibh.
</p>
<p>
  Saepe quasi officiis mollitia magnam, esse ratione itaque, facere max ime laboriosam velit pariatur quia repudiandae veritatis modi laborum eligendi aperiam. Curabitur tempus suscipit ipsum, quis consectetur nisi sagittis eget. Donec fermentum mollis augue.
</p>
<p>
  Necessitatibus aut vel dolorem ipsa id nemo architecto amet nihil libero, repellendus consectetur veniam dolorum, unde quos dolor magnam labore! Sed tristique, massa eget imperdiet lobortis.
</p>

Example of typographic elements used together:
(Any links or superscripts are only for visual examples)

Example

<h1>This is the <a class="underline" href="#">main header<sup>™</sup></a></h1>

<p class="big">The <strong>“big”</strong> class<sup><a href="#">1</a></sup> can be used to create <strong>“intro”</strong> paragraphs as in this example.<sup><a href="#">2</a></sup> Lorem ipsum <strong>some bold text</strong><sup><a href="#">3</a></sup>, consectetur adipiscing elit. Aenean pretium, urna vitae tempor sodales, metus diam rutrum arcu, eget porttitor erat sapien sit amet metus. Etiam porttitor dolor at metus auctor luctus. Integer urna ligula, ultrices at accumsan nec, rutrum in lacus. Integer eu dolor vel ipsum cursus cursus. Phasellus sed blandit nibh.</p>

<p>Saepe quasi<sup><a href="#">4</a></sup> officiis mollitia magnam, <strong>some bold text<sup><a href="#">5</a></sup></strong>, facere maxime laboriosam velit pariatur quia repudiandae veritatis modi laborum eligendi aperiam. Curabitur tempus suscipit ipsum, quis consectetur nisi sagittis eget. Donec fermentum mollis augue.</p>
<p>In vitae malesuada erat, id ultricies felis. Sed sagittis arcu velit, eu mattis nibh scelerisque a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse dignissim vel est ut blandit. Proin faucibus, neque sit amet</p>

<h2>This is a level two header<sup>®</sup></h2>

<p>Necessitatibus aut vel dolorem ipsa id nemo architecto amet nihil libero, repellendus consectetur veniam dolorum, unde quos dolor magnam labore! Sed tristique, massa eget imperdiet lobortis.</p>
<p>Curabitur tempus suscipit ipsum, quis consectetur nisi sagittis eget. Donec fermentum mollis augue.</p>

<hr>

<p class="small">
  <small>
    © Small text example, not an actual copyright<sup><a href="#">6</a></sup> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nulla est, fringilla sed eros eu, tempor molestie metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis at posuere mauris. Cras quis nisl vitae tortor elementum suscipit. Duis egestas ipsum vel turpis bibendum, eu posuere augue aliquam. Etiam aliquet hendrerit odio, malesuada bibendum orci rutrum maximus. Integer risus quam, facilisis et luctus vel, dictum eu sapien. In hac habitasse platea dictumst. Maecenas tempor pulvinar diam, id rutrum augue.
  </small>
</p>

Modifiers

Source: content/modifiers/_modifiers.scss

Use modifier classes to modify the default styles of elements.

Modifiers—Link Style

Source: content/modifiers/_modifiers.scss

Remove default styling from anchor links.

.plain

Example

<p><strong>Default Anchor Link:</strong></p>
<p>
  <a href="">A default text link</a>
</p>

<p><strong>Plain Anchor Link:</strong></p>
<p>
  <a class="plain" href="#">A "plain" text link</a>
</p>
<p>
  <a class="plain underline-hover" href="#">Plan link with underline on hover</a>
</p>

Modifiers—Link Underlines

Source: content/modifiers/_modifiers.scss

Remove or add anchor link underlines.

.no-underline
.underline
.underline-hover

Modifiers—List Style

Source: content/modifiers/_modifiers.scss

Remove default styling from ul and ol lists.

.plain

Example

<p><strong>Default Lists:</strong></p>
<ul>
  <li>item</li>
  <li>item two</li>
  <li>three</li>
</ul>

<ol>
  <li>item</li>
  <li>item two</li>
</ol>

<p><strong>Plain List: (default list styles removed)</strong></p>
<ul class="plain">
  <li>item</li>
  <li>item two</li>
  <li>three</li>
</ul>

Modifiers—Target Area

Source: content/modifiers/_modifiers.scss

Usability / Functionality

.expand-target
.contain-target

Expand the active clickable area of a link or button with the “expand-target” class.

Constrain the active area by adding “contain-target” to a parent element.
(Adding "relative", "absolute", or "fixed" to a parent element will also constrain the clickable area.)

Example


<p class="contain-target">
 Some text outside the actual link.<br>
 This text will also trigger the below link when clicked or hovered.<br>
 <a class="expand-target underline-hover" href="#">Link with expanded target area.</a>
</p>

Modifiers—Text Alignment

Source: content/modifiers/_modifiers.scss

.text-center (alternate class .center can be used instead on non-.layout elements)
.text-left (alternate class .left can be used instead)
.text-right (alternate class .right can be used instead on non-.layout elements)
.text-justify

Example

<p class="text-center">Centered text</p>
<p>Text with default left aligment (no class used)</p>
<p class="text-right">Right aligned text</p>
<p class="text-justify">
  <strong>This text is justified.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vulputate leo erat, ut porta tellus tempus vitae. Praesent pharetra ac ex non auctor. Aenean id erat sit amet neque placerat porta. Nullam elementum condimentum nibh sit amet scelerisque. Curabitur urna sapien, volutpat id est ut, imperdiet lobortis sem. Vivamus in arcu ut massa molestie consectetur sed a urna. Maecenas quis fermentum lectus. Nunc non ligula eu justo lobortis hendrerit nec a eros. Vestibulum nec vulputate ante. Nam pellentesque sodales tellus, id auctor magna sollicitudin quis.
</p>

Modifiers—Text Size

Source: content/modifiers/_modifiers.scss

.big (Useful for increasing font size for emphasis. For example to create an introductory paragraph.)
.small (Use either HTML <small> tag or class name.)

Example

<p class="big">Big text (use class name only, element is deprecated)</p>
<p><small>Small text using small tag</small></p>
<p class="small">Small text using small class</p>

Modifiers—Text Style

Source: content/modifiers/_modifiers.scss

.uppercase
.italic or .em (or just use <em> HTML tag)

Example

<h3>A regular h3 header</h3>
<h3 class="uppercase">An h3 header with "uppercase" class</h3>

<p class="em">Italic text</p>

Modifiers—Text Weight

Source: content/modifiers/_modifiers.scss

.normal
.bold or .strong (Or just use HTML <strong> tag.)
.heavy

Example

<h3>A regular h3 header</h3>

<h3 class="normal">
  An h3 header with "normal" class
</h3>

Modifiers—Text Wrapping

Source: content/modifiers/_modifiers.scss

.no-wrap (prevent text from wrapping)
.soft-wrap (insert hyphens automatically to improve text wrapping)
.hard-wrap (force text to wrap by breaking words without adding hyphens)
.truncate (truncate long text with an ellipsis instead of wrapping)

Default text wrapping behavior:

Example

<div class="example">
  <p>antidisestablishmentarianism</p>
</div>

With "soft-wrap" class:
(The lang attribute must be specified for your HTML doc or another wrapper element for hyphenation to work)

Example

<div class="example">
  <p class="truncate">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
</div>

1DECORATION

Source: decoration/_decoration.scss

Simple visual styles such as backgrounds, text colors, basic animations & transitions, etc.

Note: Many styles in this category are more appropriate as part of individual component styles so only a few basic decoration styles are included.

Animations

Source: decoration/sub/_animation.scss

Animations can be triggered by adding classes directly to HTML elements or you can use JavaScript to apply and remove classes based on an action or event.

Note: Animations may make more sense as part of a specialized component so could be removed from Builder CSS in the future.

Keyframe Animations

.animate-expand
.animate-contract
.animate-fade-in
.animate-fade-out
.animate-slide-up
.animate-slide-down
.animate-slide-left
.animate-slide-right
.animate-spin

Control Animation Play

.infinite Play animation continuously.
.pause Pause animation.
.play Play animation.

Example

<p class="gutters-horizontal-xs padding-lg">
  <span class="animate-fade-in infinite">
    <span class="animate-expand infinite inline-block bg-cantaloupe">
      Expand! <small>(&amp; fade-in)</small>
    </span>
  </span>

  <span class="animate-fade-in infinite">
    <span class="animate-contract infinite inline-block bg-cantaloupe">
      Contract! <small>(&amp; fade-in)</small>
    </span>
  </span>

  <span class="animate-spin infinite inline-block bg-cantaloupe">Spin!</span>

  <span class="animate-fade-in infinite inline-block bg-cantaloupe">
    Fade in
  </span>

  <span class="animate-fade-out infinite inline-block bg-cantaloupe">
    Fade out
  </span>

  <span class="animate-slide-up infinite inline-block bg-cantaloupe">
    Slide up
  </span>

  <span class="animate-slide-down infinite inline-block bg-cantaloupe">
    Slide down
  </span>

  <span class="animate-slide-left infinite inline-block bg-cantaloupe">
    Slide left
  </span>

  <span class="animate-slide-right infinite inline-block bg-cantaloupe">
    Slide right
  </span>
</p>

Background & Text Colors

Source: decoration/sub/_backgrounds-and-color.scss

Class Name Formats:

.bg-COLORNAME (set background color)
.text-COLORNAME (set text, border, or SVG icon color)

Inherit text color:
Make an element inherit the text color of its parent. (Note: This is the default behavior for many elements so you may not need this class.)

.inherit-color

Included Colors:

Basic:

.bg-white, .text-white
.bg-black, .text-black
.bg-transparent (background use only, not for text)

Blues:

.bg-turquoise, .text-turquoise
.bg-ocean, .text-ocean
.bg-ink, .text-ink

Warm colors:

.bg-cantaloupe, .text-cantaloupe
.bg-poppy, .text-poppy
.bg-berry, .text-berry
.bg-buttercup, .text-buttercup

Cool and neutral colors:

.bg-eggplant, .text-eggplant
.bg-taupe, .text-taupe (Ok for decorative icons but do not use for text)

Grays (light to dark):

.bg-gray-1, .text-gray-1 (Ok for decorative icons but do not use for actual text)
.bg-gray-2, .text-gray-2 (Ok for decorative icons but do not use for actual text)
.bg-gray-3, .text-gray-3 (Ok for decorative icons but do not use for actual text)
.bg-gray-4, .text-gray-4 (Ok for decorative icons but do not use for actual text)
.bg-gray-5, .text-gray-5 (Ok for decorative icons but do not use for actual text)

Text only colors:

.text-default
.text-subtle
.text-danger (for error text, etc.)

Shapes

Source: decoration/sub/_borders-and-shapes.scss

Make square elements round and rectangular elements pill-shaped.

.round

Example

<div class="round bg-turquoise" style="width:100px; height:100px;"></div>
<hr>
<div class="round bg-turquoise" style="width:100px; height:50px;"></div>

Typography Style Overview

Source: content/_content.scss

An overview of standardized styles for headers and body text.

Font Families, Sizes, and Weights

Example

Important: A minimum of 16px font size is needed for form fields to prevent auto zoom in iPhone.

1STRUCTURE

Source: structure/_structure.scss

The layout and arrangement of content.

Alignment

Source: structure/sub/_alignment.scss

The behavior of alignment classes can vary depending on what type of element and in what context they are applied to.

Alignment—Align Bottom(s)

Source: structure/sub/_alignment.scss

.align-bottoms Add to parent
.align-bottom Add to individual element

Align all child elements to the bottom.

Example

<div class="layout widths-1/3 gutters align-bottoms">
  <div>Just a child</div>
  <div>Just a child</div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  </div>
</div>

Align an individual element to the bottom.

Example

<div class="layout gutters widths-1/3">
  <div class="align-bottom">A single bottom aligned element</div>
  <div>Just a child</div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.
  </div>
</div>

Alignment—Align Middle(s)

Source: structure/sub/_alignment.scss

.align-middles Add to parent
.align-middle Add to single element

Align all child elements to middle.

Example

<div class="layout gutters widths-1/3 align-middles">
  <div>Middle aligned elements</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</div>
</div>

Align an individual element to the middle.

Example

<div class="layout gutters widths-1/3">
  <div class="align-middle">A single middle aligned child element</div>
  <div>Just a child</div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
  </div>
</div>

Alignment—Align Top(s)

Source: structure/sub/_alignment.scss

.align-tops Add to parent
.align-top Add to single element

Align all child elements to top.

Example

<div class="layout gutters widths-1/3 align-tops">
  <div>Just a child</div>
  <div>Just a child</div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
  </div>
</div>

Align an individual element to the top.

Example

<div class="layout gutters widths-1/3">
  <div class="align-top">A single top aligned child</div>
  <div>Just a child</div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
  </div>
</div>

Alignment—Center

Source: structure/sub/_alignment.scss

.center

Note: .text-center can be used instead for centering text or for centering all text in a layout vs. centering child elements.

Apply either to parent or individual element.

Example

<p class="center">
  Centering text
<p>

<div class="layout gutters center">
  <div class="width-1/3">Centering elements</div>
  <div class="width-1/3 center">Centering text</div>
</div>

<p class="center">Center an image:</p>
<img class="center" src="https://placekitten.com/200/200" width="200" height="200" alt="" />

<p>Center an element that has a “width” set:</p>
<div class="width-1/3 center text-left padding bg-cantaloupe">New!</div>

Alignment—Justify

Source: structure/sub/_alignment.scss

.justify
.justify-vertical

Note: .text-justify can be used instead for justifying text or for justifying all text in a layout vs. justifying child elements.

Apply either to parent or individual element.

Example

<div class="layout justify">
  <div class="width-auto">an element</div>

  <div class="width-auto justify-vertical">
    <span>vertically justified element</span>

    <span>vertically justified element</span>

    <span>vertically justified element</span>
  </div>

  <div class="width-1/3 text-justify">
    <strong>Justified text</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.
  </div>
</div>

Alignment—Left

Source: structure/sub/_alignment.scss

.text-left
Alternate class: .left

Note: These only affect text alignment since elements in a layout context are already left-aligned by default.

Apply either to parent or individual element.

Example

<div class="center">
  This text is centered
  <div class="left">This nested text is left aligned</div>
</div>

Alignment—Right

Source: structure/sub/_alignment.scss

.right

Note: .text-right can be used instead for right-aligning text or for right-aligning all text in a layout vs. right-aligning child elements.

Apply either to parent or individual element.

Example

<p class="right">
  This text is right aligned.
<p>

<div class="layout gutters right">
  <div class="width-1/3">Right aligned elements</div>
  <div class="width-1/3 right">Right aligned text</div>
</div>

Alignment—Stretch

Source: structure/sub/_alignment.scss

Stretch the height and width of child content elements to fill the full height and width of a layout column.

.stretch-contents (Add to parent)
.no-stretch (Add to element to stop it from stretching)

Example

<div class="layout widths-1/4 gutters">
  <div class="stretch-contents">
    <div class="padding-xs bg-cantaloupe">Stretched</div>
  </div>

  <div>
    <div class="padding-xs bg-cantaloupe">Not stretched</div>
  </div>

  <div class="stretch-contents">
    <div class="padding-xs bg-cantaloupe no-stretch">Not Stretched</div>
    <div class="padding-xs bg-gray-2">Stretched</div>
  </div>

  <div>
    Amet atque fugit possimus ullam aliquam molestiae ipsum officiis asperiores error, illum, inventore cum ab? Veniam alias debitis voluptatibus ut totam eligendi, consequatur optio reiciendis similique quod, incidunt facere inventore.
  </div>
</div>

Display

Source: structure/sub/_display.scss

Display—Hide Content

Source: structure/sub/_display.scss

Classes to hide content. Add a responsive suffix to target to a specific view.

Hide an entire element and all its content:

.hide (hide in all views)
.hide@mobile
.hide@tablet
.hide@desktop

Hide just the content sticking out of an element:
(Does not work with responsive suffixes)

.hide-overflow

Hide content visually but not from screen readers:
(for accessibility)

.visually-hidden

See: https://snook.ca/archives/html_and_css/hiding-content-for-accessibility https://a11yproject.com/posts/how-to-hide-content/

Make element invisible and prevent user interaction:
(Element still takes up space.)

.invisible

Display—Modify Display

Source: structure/sub/_display.scss

.inline
.inline-block
.block

Floats

Source: structure/sub/_floats.scss

“Float” elements, such as images, so that text and other content will wrap around them.

.float-left
.float-right

Example

<img class="float-left margin-right-xs" src="https://via.placeholder.com/142" alt="" />
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis, sapien quis maximus cursus, mauris nisi pulvinar erat, sed semper libero arcu id mauris. Nullam pharetra, mauris a consequat sagittis, justo libero placerat tortor, quis lacinia risus felis varius justo. Vivamus sem purus, gravida a lacus eget, pharetra ultricies dui. Donec molestie erat in arcu vehicula egestas. Sed fermentum varius feugiat. Vestibulum in eros in mi varius fermentum. Mauris velit tellus, tincidunt at euismod vitae, lobortis eu nibh. Maecenas sed ullamcorper risus, vel bibendum mauris. Aliquam aliquet rutrum tortor, at dapibus leo molestie eget. Quisque at lorem et est auctor ullamcorper ac quis
  <img class="float-right margin-left-xs" src="https://via.placeholder.com/142" alt="" />
  sapien. Phasellus tempor ex eu eros varius, non tristique urna rutrum. Etiam tellus mi, pellentesque id leo vel, feugiat lobortis neque. Duis cursus velit leo, lacinia laoreet sapien faucibus in. Donec vitae sapien non sem fringilla rutrum.
</p>
<p>
  Nam ut ultrices nibh, vel vulputate purus. Cras a finibus diam. Duis a bibendum eros. Pellentesque nec tristique diam. Cras tincidunt mollis augue id faucibus. Proin viverra lectus ac dolor vestibulum vestibulum. Proin pretium sodales pharetra. Morbi bibendum orci in nisi auctor blandit. Vivamus venenatis facilisis tristique. Donec purus ante, pellentesque nec nunc eu, efficitur consequat ex. Quisque non tortor suscipit, tincidunt orci non, venenatis libero. Mauris tempor finibus pretium. In cursus sagittis diam, at bibendum urna porta id. Curabitur eget consequat mauris. Aliquam ullamcorper quis ligula ut vulputate.
</p>

Layout

Source: structure/sub/_layout.scss

Apply to a parent element to lay out the children.

.layout

Basic steps to creating layouts

Create a layout context by adding the class .layout to a parent element.
Add various modifier classes as needed to create different layout patterns.
Add responsive suffixes to classes to target a specific view and to make your layout responsive.
(The “layout” class itself cannot be combined with responsive suffixes.)

Note: The layout class can be partially overridden by applying “block” class together with responsive suffixes.

Layout—Column & Grid

Source: structure/sub/_layout.scss

Default columns

This is the most basic layout pattern. Simply apply the layout class to a parent element. The gutters class can be used to add spacing in between the columns.

Child elements (columns) are equal width by default. They will not wrap unless forced to. (IE: if they run out of room to fit on one line)

The content of default columns can stretch the columns wider. Set explicit widths to prevent this.

Example

<div class="layout gutters">
  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem voluptatem optio repellendus aliquam accusantium neque veritatis debitis ipsum repellat odio fugit harum facilis, voluptas totam veniam, perspiciatis aspernatur! Veniam, quae.
  </div>

  <div>
    Maiores nisi molestias odio necessitatibus dolore quos dolorum excepturi, cumque quae pariatur. Id a deleniti at repellendus recusandae dolorem voluptatum vitae aut necessitatibus accusamus eos eaque, aliquid corrupti sapiente perspiciatis.
  </div>

  <div>
    Amet atque fugit possimus ullam aliquam molestiae ipsum officiis asperiores error, illum, inventore cum ab? Veniam alias debitis voluptatibus ut totam eligendi, consequatur optio reiciendis similique quod, incidunt facere inventore.
  </div>
</div>

Layout—Column Sizes

Source: structure/sub/_layout.scss

Equal width columns

These are columns with explicitly set equal widths. They will wrap if there are more than will fit in a row.

Setting the widths explicitly prevents content from stretching the columns wider and forces them to maintain their set width if they wrap to the next line.

You can add a width style either to a layout parent or to individual layout children. Widths applied to layout parents affect all the children inside.

Add to .layout element:

.widths-auto
.widths-100%
.widths-1/2
.widths-1/3
.widths-1/4
.widths-1/5

Example

<div class="layout widths-100% gutters">
  <div>100% width column</div>
  <div>100% width column</div>
</div>

<hr>

<div class="layout widths-1/2 gutters">
  <div>1/2 width column</div>
  <div>1/2 width column</div>
</div>

<hr>

<div class="layout widths-1/3 gutters">
  <span class="inline-block">1/3 width column</span>
  <span class="inline-block">1/3 width column</span>
  <span class="inline-block">1/3 width column</span>
</div>

<hr>

<div class="layout widths-1/4 gutters">
  <div>1/4 width column</div>
  <div>1/4 width column</div>
  <div>1/4 width column</div>
  <div>1/4 width column</div>
</div>

<hr>

<div class="layout widths-1/5 gutters">
  <div>1/5 width column</div>
  <div>1/5 width column</div>
  <div>1/5 width column</div>
  <div>1/5 width column</div>
  <div>1/5 width column</div>
</div>

Unequal width columns

These are columns with unequal widths. They will wrap if there are more than will fit in a row.

Add to .layout element:

.widths-1/3-and-2/3
.widths-2/3-and-1/3
.widths-1/4-and-3/4
.widths-3/4-and-1/4
.widths-2/5-and-3/5
.widths-3/5-and-2/5

Example

<div class="layout widths-1/3-and-2/3 gutters">
  <div>1/3 width column</div>
  <div>2/3 width column</div>
</div>

<hr>

<div class="layout widths-2/3-and-1/3 gutters">
  <div>2/3 width column</div>
  <div>1/3 width column</div>
</div>

<hr>

<div class="layout widths-1/4-and-3/4 gutters">
  <div>1/4 width column</div>
  <div>3/4 width column</div>
</div>

<hr>

<div class="layout widths-3/4-and-1/4 gutters">
  <div>3/4 width column</div>
  <div>1/4 width column</div>
</div>

<hr>

<div class="layout widths-2/5-and-3/5 gutters">
  <div>2/5 width column</div>
  <div>3/5 width column</div>
</div>

<hr>

<div class="layout widths-3/5-and-2/5 gutters">
  <div>3/5 width column</div>
  <div>2/5 width column</div>
</div>

Layout—Example Patterns

Source: structure/sub/_layout.scss

Add various modifier classes to create common abstract layout patterns.

Media Object

"The media object is an image to the left, with descriptive content to the right" (Note: element on left doesn't have to be an image)
http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

Alternative: Use .layout-media class. See: Layout—Pre-baked Patterns: media object

Example

<div class="layout align-tops gutters-horizontal-sm">
  <div class="width-auto">IMAGE</div>

  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Non hic magnam sit neque maxime officiis debitis tempore aperiam esse porro, ullam excepturi cum! Animi repudiandae odit, ad numquam iure saepe at eius recusandae dolor eveniet ipsa ipsam nam voluptate veritatis reprehenderit, nostrum harum. Tempore dolores nisi magnam excepturi beatae dolorum deleniti quasi, veniam delectus illo, earum laborum veritatis! Necessitatibus optio saepe ab dolorem, deserunt id, voluptatum, in voluptatem nulla officiis a atque! Maxime modi adipisci expedita repellendus necessitatibus praesentium amet. Totam, obcaecati suscipit dolor nesciunt eum eos! Atque cumque placeat impedit, optio iure veniam dolores vel consectetur! Maiores, aspernatur nostrum.
  </div>
</div>

Flag Object

A variation of the Media Object pattern but with "the image content and text content aligned to their vertical middles".
https://csswizardry.com/2013/05/the-flag-object/

Alternative: Use .layout-flag class. See: Layout—Pre-baked Patterns: flag object

Example

<div class="layout align-middles gutters-horizontal-sm">
  <div class="width-auto">IMAGE</div>

  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Non hic magnam sit neque maxime officiis debitis tempore aperiam esse porro, ullam excepturi cum! Animi repudiandae odit, ad numquam iure saepe at eius recusandae dolor eveniet ipsa ipsam nam voluptate veritatis reprehenderit, nostrum harum. Tempore dolores nisi magnam excepturi beatae dolorum deleniti quasi, veniam delectus illo, earum laborum veritatis! Necessitatibus optio saepe ab dolorem, deserunt id, voluptatum, in voluptatem nulla officiis a atque! Maxime modi adipisci expedita repellendus necessitatibus praesentium amet. Totam, obcaecati suscipit dolor nesciunt eum eos! Atque cumque placeat impedit, optio iure veniam dolores vel consectetur! Maiores, aspernatur nostrum.
  </div>
</div>

Reversed, Bottom-Aligned Media Object

Example

<div class="layout align-bottoms gutters-horizontal-sm reverse">
  <div class="width-auto">IMAGE</div>

  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Non hic magnam sit neque maxime officiis debitis tempore aperiam esse porro, ullam excepturi cum! Animi repudiandae odit, ad numquam iure saepe at eius recusandae dolor eveniet ipsa ipsam nam voluptate veritatis reprehenderit, nostrum harum. Tempore dolores nisi magnam excepturi beatae dolorum deleniti quasi, veniam delectus illo, earum laborum veritatis! Necessitatibus optio saepe ab dolorem, deserunt id, voluptatum, in voluptatem nulla officiis a atque! Maxime modi adipisci expedita repellendus necessitatibus praesentium amet. Totam, obcaecati suscipit dolor nesciunt eum eos! Atque cumque placeat impedit, optio iure veniam dolores vel consectetur! Maiores, aspernatur nostrum.
  </div>
</div>

Justified Blocks

Example

<div class="layout widths-auto justify">
  <div>first</div>
  <div>secound</div>
  <div>last one</div>
</div>

Centered Elements

Example

<div class="layout gutters-sm widths-auto center">
  <div>first</div>
  <div>secound</div>
  <div>last one</div>
</div>

Layout—Modifiers

Source: structure/sub/_layout.scss

Special classes for modifying layouts

Add Gutters

.gutters (default / medium gutters)
.gutters-hair
.gutters-xs
.gutters-sm
.gutters-lg
.gutters-xl

Example

<p>
  no gutters <br />
  <small><strong>Note:</strong> there was a <a class="underline" href="https://bugs.chromium.org/p/chromium/issues/detail?id=957946" target="_blank" rel="noopener noreferrer">minor rendering bug in Chrome prior to version 92</a> that sometimes caused a slight visual gap even with no gutters</small>
</p>

<div class="layout widths-1/3">
  <div>1st</div>
  <div>2nd</div>
  <div>3rd</div>
</div>

<hr>

<p>“hair” gutters</p>
<div class="layout widths-1/3 gutters-hair">
  <div>1st</div>
  <div>2nd</div>
  <div>3rd</div>
</div>

<hr>

<p>xs gutters</p>
<div class="layout widths-1/3 gutters-xs">
  <div>1st</div>
  <div>2nd</div>
  <div>3rd</div>
</div>

<hr>

<p>sm gutters</p>
<div class="layout widths-1/3 gutters-sm">
  <div>1st</div>
  <div>2nd</div>
  <div>3rd</div>
</div>

<hr>

<p>default (medium) gutters</p>
<div class="layout widths-1/3 gutters">
  <div>1st</div>
  <div>2nd</div>
  <div>3rd</div>
</div>

<hr>

<p>lg gutters</p>
<div class="layout widths-1/3 gutters-lg">
  <div>1st</div>
  <div>2nd</div>
  <div>3rd</div>
</div>

<hr>

<p>xl gutters</p>
<div class="layout widths-1/3 gutters-xl">
  <div>1st</div>
  <div>2nd</div>
  <div>3rd</div>
</div>

Reverse Column Order

.reverse

Example

<p>Reverse the order of a row:</p>

<div class="layout widths-1/3 gutters">
  <div>1st</div>
  <div>2nd</div>
  <div>3rd</div>
</div>

<hr>

<div class="layout widths-1/3 gutters reverse">
  <div>1st</div>
  <div>2nd</div>
  <div>3rd</div>
</div>

<p>Reverse the stacking order of a column of full width  elements:</p>

<div class="layout widths-100% gutters">
  <div>1st</div>
  <div>2nd</div>
  <div>3rd</div>
</div>

<hr>

<div class="layout widths-100% gutters reverse">
  <div>1st</div>
  <div>2nd</div>
  <div>3rd</div>
</div>

Add Rule Lines Between Columns

.ruled

Example

<p>Add rules between columns</p>

<div class="layout widths-1/3 gutters ruled">
  <div>1st</div>
  <div>2nd</div>
  <div>3rd</div>
</div>

Layout—Pre-baked Patterns

Source: structure/sub/_layout.scss

Instead of building up these common layout patterns yourself you can use these alternate keyword classes.

.layout-media
.layout-flag

Note: large (lg) and extra large (xl) size gutters don’t currently work with these pre-baked patterns. Use smaller size gutters or combine layout and modifier classes instead.

Media Object

Example

<div class="layout-flag gutters-sm">
  <div>IMAGE</div>

  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Non hic magnam sit neque maxime officiis debitis tempore aperiam esse porro, ullam excepturi cum! Animi repudiandae odit, ad numquam iure saepe at eius recusandae dolor eveniet ipsa ipsam nam voluptate veritatis reprehenderit, nostrum harum. Tempore dolores nisi magnam excepturi beatae dolorum deleniti quasi, veniam delectus illo, earum laborum veritatis! Necessitatibus optio saepe ab dolorem, deserunt id, voluptatum, in voluptatem nulla officiis a atque! Maxime modi adipisci expedita repellendus necessitatibus praesentium amet. Totam, obcaecati suscipit dolor nesciunt eum eos! Atque cumque placeat impedit, optio iure veniam dolores vel consectetur! Maiores, aspernatur nostrum.
  </div>
</div>

Position

Source: structure/sub/_position.scss

Types

.relative
.absolute
.fixed

Positions

Use for fixed or absolutely positioned elements

Tip: Setting all positions to zero and all margins to "auto" will center elements which have a defined height and width.

.top-zero
.bottom-zero
.left-zero
.right-zero

Layers (z-index)

Change the layer of a positioned element.

(Must be combined with .relative, .absolute, or .fixed class.)

Change layer to below parent:

.send-back

Change layer to above other elements.

(This will make elements one layer above a link or button which uses the “expand-target” class,)

.bring-forward

Responsive

Source: structure/sub/_responsive.scss

Most CSS classes in Builder CSS work together with optional responsive suffixes which can be used to target specific responsive views.

To target a class only to a particular view add one of 3 suffixes to the end. To apply a style to all views, just use the non-suffixed class name.

To target multiple views, add multiple classes with different responsive suffixes. You can also set a “default” view using a non-suffixed class then override it for just one view by adding a second class with a responsive suffix.

Responsive—Views/Break Points

Source: structure/sub/_responsive.scss

3 views (break points) are supported: “mobile”, “tablet”, and “desktop”.

Break Points:

mobile: 0–767px widths
tablet: 768px–1023px widths
desktop: 1024px and above widths

Widths for designers:
Create design mocks using these screen widths.

mobile: 320px (iPhone SE 2016)
tablet: 768px (9.7-inch iPad Pro)
desktop: 1440px (27-inch monitor)

(Note: The media query break points use em units under the hood, not px.)

Responsive Suffixes:
To target a class only to a particular view, add one of these suffixes to the end.

@mobile
@tablet
@desktop

Example usage:

Example

<div class="center@mobile left@tablet right@desktop">
  Text alignment changes depending on view. Resize your browser window to see change.
</div>

Dev note on media query sizes: A long-standing bug with media queries using em was recently fixed in Safari 15. In light of this fix, Builder CSS has changed from using px to em for media queries.

Size

Source: structure/sub/_size.scss

Set dimensions of columns in layouts or various individual elements.

Size—Heights

Source: structure/sub/_size.scss

.height-100%

Screen-based heights

.screen-height-100%

Size—Widths

Source: structure/sub/_size.scss

Widths for individual elements

.width-auto
.width-100%
.width-1/2, .width-1/3, .width-1/4, .width-1/5
.width-2/3, .width-3/4, .width-2/5, .width-3/5

Example

<div class="layout">
  <p class="width-auto">Auto width used inside .layout (fits content width when used inside .layout)</p>
</div>
<p class="width-auto">Auto width used outside .layout (uses browser calculated default element width)</p>
<span class="width-100% inline-block">inline-block 100% width span tag</span>
<hr>
<p class="width-1/5">1/5 width</p>
<p class="width-1/4">1/4 width</p>
<p class="width-1/3">1/3 width</p>
<p class="width-2/5">2/5 width</p>
<p class="width-1/2">1/2 width</p>
<p class="width-3/5">3/5 width</p>
<p class="width-2/3">2/3 width</p>
<p class="width-3/4">3/4 width</p>

Max-width

.max-width-100%

Screen-based widths

.screen-width-100%
.screen-width-50%

Widths for all child elements of a layout

Add to a .layout element to set widths for its children.

Equal width children:

.widths-auto
.widths-100%
.widths-1/2
.widths-1/3
.widths-1/4
.widths-1/5

Un-equal width children:

.widths-1/3-and-2/3
.widths-2/3-and-1/3
.widths-1/4-and-3/4
.widths-3/4-and-1/4
.widths-2/5-and-3/5
.widths-3/5-and-2/5

See: Layout—Column & Grid for more examples

Example

<div class="layout widths-3/4-and-1/4 gutters-sm">
  <div>First child</div>
  <div>Second child</div>
</div>

Spacing

Source: structure/sub/_spacing.scss

A standardized range of sizes for margins, padding, and gutters.

Spacing sizes use a logarithmic scale. Starting from the base size, each following size is equal to the previous one multiplied by a constant.

Base: 12px, Constant: 1.7

Spacing Sizes:

xs = 12px Extra Small
sm = 20px Small
md / default = 34px (Medium / the default size)
lg = 58px Large
xl = 99px Extra Large

(Actual spacing size styles use rem, not px.)

Example

Spacing—In-between (Gutters)

Source: structure/sub/_spacing.scss

Apply gutter classes to a parent element to add margins in-between child elements.

(In-between spacing is set by default on text related elements such as p and h1 to h6. Use margin or gutter utility styles to override when needed.)

Gutters on all sides
(Use on "layout" only)

.gutters
.gutters-hair
.gutters-xs
.gutters-sm
.gutters-lg
.gutters-xl

Horizontal Gutters:

.gutters-horizontal
.gutters-horizontal-hair
.gutters-horizontal-xs
.gutters-horizontal-sm
.gutters-horizontal-lg
.gutters-horizontal-xl

Vertical Gutters:

.gutters-vertical
.gutters-vertical-hair
.gutters-vertical-xs
.gutters-vertical-sm
.gutters-vertical-lg
.gutters-vertical-xl

Horizontal

Example

<p><strong>“Hair” gutters:</strong></p>
<p class="gutters-horizontal-hair">
  <span>child one</span><span>two</span><span>third child element</span>
</p>

<p><strong>eXtra Small (XS) gutters:</strong></p>
<p class="gutters-horizontal-xs">
  <span>child one</span>
  <span>two</span>
  <span>third child element</span>
</p>

<p><strong>SMall (SM) gutters:</strong></p>
<p class="gutters-horizontal-sm">
  <span>child one</span>
  <span>two</span>
  <span>third child element</span>
</p>

<p><strong>MeDium / default size gutters:</strong></p>
<p class="gutters-horizontal">
  <span>child one</span>
  <span>two</span>
  <span>third child element</span>
</p>

<p><strong>LarGe (LG) gutters:</strong></p>
<p class="gutters-horizontal-lg">
  <span>child one</span>
  <span>two</span>
  <span>third child element</span>
</p>

<p><strong>eXtra Large (XL) gutters:</strong></p>
<p class="gutters-horizontal-xl">
  <span>child one</span>
  <span>two</span>
  <span>third child element</span>
</p>

Vertical

Example

<p><strong>“Hair” vertical gutters:</strong></p>
<div class="gutters-vertical-hair">
  <div>child one</div>
  <div>two</div>
  <div>third child element</div>
</div>

<p><strong>eXtra Small (XS) vertical gutters:</strong></p>
<div class="gutters-vertical-xs">
  <div>child one</div>
  <div>two</div>
  <div>third child element</div>
</div>

<p><strong>SMall (SM) vertical gutters:</strong></p>
<div class="gutters-vertical-sm">
  <div>child one</div>
  <div>two</div>
  <div>third child element</div>
</div>

<p><strong>MeDium / Default size vertical gutters:</strong></p>
<div class="gutters-vertical">
  <div>child one</div>
  <div>two</div>
  <div>third child element</div>
</div>

<p><strong>LarGe (LG) vertical gutters:</strong></p>
<div class="gutters-vertical-lg">
  <div>child one</div>
  <div>two</div>
  <div>third child element</div>
</div>

<p><strong>eXtra Large (XL) vertical gutters:</strong></p>
<div class="gutters-vertical-xl">
  <div>child one</div>
  <div>two</div>
  <div>third child element</div>
</div>

Spacing—Inner (Padding)

Source: structure/sub/_spacing.scss

Use padding to set inner spacing inside parent elements around all their content.

None: `.padding-none` `.padding-top-none` `.padding-bottom-none` `.padding-left-none` `.padding-right-none`
Extra Small: `.padding-xs` `.padding-top-xs` `.padding-bottom-xs` `.padding-left-xs` `.padding-right-xs`	Small: `.padding-sm` `.padding-top-sm` `.padding-bottom-sm` `.padding-left-sm` `.padding-right-sm`
Default / Medium: `.padding` `.padding-top` `.padding-bottom` `.padding-left` `.padding-right`	Large: `.padding-lg` `.padding-top-lg` `.padding-bottom-lg` `.padding-left-lg` `.padding-right-lg`	Extra Large: `.padding-xl` `.padding-top-xl` `.padding-bottom-xl` `.padding-left-xl`

Spacing—Outer (Margins)

Source: structure/sub/_spacing.scss

Use margins to set outer spacing to space elements apart from each other.

Simple Margins

Apply to individual elements.

None: `.margin-none` `.margin-top-none` `.margin-bottom-none` `.margin-left-none` `.margin-right-none`	Auto: `.margin-top-auto` `.margin-bottom-auto` `.margin-right-auto` `.margin-left-auto`
Extra Small: `.margin-top-xs` `.margin-bottom-xs` `.margin-right-xs` `.margin-left-xs`	Small: `.margin-top-sm` `.margin-bottom-sm` `.margin-right-sm` `.margin-left-sm`
Default size / Medium: `.margin-top` `.margin-bottom` `.margin-right` `.margin-left`	Large: `.margin-top-lg` `.margin-bottom-lg` `.margin-right-lg` `.margin-left-lg`	Extra Large: `.margin-top-xl` `.margin-bottom-xl` `.margin-right-xl` `.margin-left-xl`

Negative Margins

Use very sparingly.

Default / Medium:

.neg-margin-top
.neg-margin-bottom
.neg-margin-right
.neg-margin-left

Large:

.neg-margin-top-lg
.neg-margin-bottom-lg
.neg-margin-right-lg
.neg-margin-left-lg

Extra Large:

.neg-margin-top-xl
.neg-margin-bottom-xl
.neg-margin-right-xl
.neg-margin-left-xl

Spacing—Text

Source: structure/sub/_spacing.scss

Add a text space before or after content. Useful if you are using a framework or compiler that strips spaces between elements or after returns.

.space-after
.space-before

Example

<p>
  <strong>No spaces:</strong><br />
  <span>Text</span><span>Text</span>
</p>
<hr />
<p><strong>Spaces added:</strong></p>
<p>
  <span class="space-after">Text</span><span>Text</span>
</p>
<p>
  <span>Text</span><span class="space-before">Text</span>
</p>