Use this page as a guide to available styles on the site and also to verify any CSS changes.

Base Styles

Theme Components


Colors

Use the palette of specific colors listed here for consistency

Branding

$bedaga-blue
#002F37
$bedaga-gray
#59595F
$bedaga-pink
#FFC6AD

Grayscale

$gray-dark
$gray
$gray-light
$gray-lighter

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Line Behind

Add .line-behind to any header for a faint strikethrough that runs behind the text. Lines are hidden below $screen-xs-max to prevent issues with headings that run into multiple lines

I Have A Line Behind Me

Text Utilities

We have utility classes to help simplify text styling

I am text with class 'quiet'

I am text with class 'hint'

I am text with class 'small'

I am text with class 'mark'

I am text with the class 'text-left'

I am text with the class 'text-right'

I am text with the class 'text-center'

I am text with the class 'text-justify'

I am text with the class 'text-nowrap'

I am text with the class 'text-lowercase'

I am text with the class 'text-uppercase'

I am text with the class 'text-capitalize'

I am text with the class 'text-muted'

I am text with the class 'text-gray'

I am text with the class 'text-gray-light'

Additional Base Elements

Use the <hr> element to place a divider between pieces of content


Paragraphs

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A lead, or lede paragraph in literature is the opening paragraph of an article, essay, news story or book chapter. Often called the lead, it usually occurs together with the headline or title. It precedes the main body of the article, and it gives the reader the main idea of the story.

Buttons

Use the button classes on an <a>, or <button> element. There are a few types of buttons .btn, .btn-primary, .btn-dark, .btn-quiet. All buttons have class btn, primary and secondary button classes must be added as modifiers.

Icons in Buttons

Use svg icons inside buttons by adding the .btn__icon class to the svg tag

Block Buttons

Create block level buttons by adding the class .btn-block.

Button Sizes

Add .btn-sm for small sized buttons.

Disabled State

Add the disabled attribute to <button> buttons.

CTA (Call To Action) Buttons

Use .btn-cta for a consistent bolded, uppercased style. Primary and dark buttons only please

Anchor Elements

Add the .disabled class to <a> buttons.

Default Button Primary Button Dark Button Quiet Button

Link buttons

Conversely, add the btn-link class to <button> elements to make them look like links. Use where a button is required (form submit) or it is more semantically correct.

Forms

Forms require specific markup for correct styling. All inputs need a form-control class.

Forgot Your Password?

Tables

The standard table in use on the site. Simply add .table to your table to get the styling below.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
I'm a table footer row Here's some more info How about them apples pretty slick?
I'm another table footer row Put important info in here To make sure people understand the info Contained inside the table

Alerts

Provide contextual feedback with these alerts.

Page Banner

Page banners should be used at the top of a page for a consistent intro to supplementary content. Keep them outside of max-width container elements if possible as they should take up the full width of the viewport.

The copy below the heading has center-block behavior, add an inline max-width value to work with text amount / length

Page Banner Heading

Page banner copy. Say something nice here just in case it actually gets read, it probably won't though.

<div class="page-banner">
  <div class="page-banner__bg page-banner__bg--messybed"></div>
  <div class="page-banner__inner">
    <h2 class="page-banner__heading">Page Banner Heading</h2>
    <p class="page-banner__copy">Page banner copy.  Say something nice here just in case it actually gets read.  Probably won't though.</p>
  </div>
</div>
  

Page Ribbon

Use ribbons to break down pages into chunks with consistent spacing and headings between them. These elements act as a generic content container but are extremely important and used on just about every page on the site. Add an inline max-width value to the .ribbon-inner element to constrain child elements.

Ribbon Topper

Ribbon topper copy goes here...

Put body content here...Chiba office nodal point knife military-grade boy fetishism construct alcohol order-flow towards into corporation futurity footage. Pen pre-A.I. convenience store BASE jump car franchise marketing narrative girl network modem sub-orbital silent artisanal paranoid. Footage motion alcohol singularity pen courier Legba narrative office realism.-ware rebar spook tanto weathered girl narrative office 8-bit pistol military-grade tube. Alcohol grenade order-flow jeans kanji vinyl neural euro-pop assault sub-orbital skyscraper katana face forwards.
<section class="ribbon">
  <div class="ribbon-inner">
    <div class="ribbon__topper">
      <h2 class="ribbon__topper-heading">Ribbon Topper</h2>
      <p class="ribbon__topper-copy">Ribbon topper copy goes here...</p>
    </div>
    Put body content here...
  </div>
</section>
  

Modifiers

Add the .ribbon__topper-copy--expanded modifier class to the .ribbon__topper-copy element to give copy a slightly larger font size and line-height.

Feature Summary

Use a feature summary block to give a short description of a product feature. Since this element is block level, wrap with a containing element to limit width and obtain a grid layout.

Feature Title

Use this spot to write a nice little description about the product feature.

<div class="feature-summary">
  <img src="//cdn.shopify.com/...png" alt="">
  <h4>Feature Title</h4>
  <p>Use this spot to write a nice little description about the product feature.</p>
</div>
  

Wrap the image in a .feature-img-frame to apply a double border frame

Feature Title

Use this spot to write a nice little description about the product feature.

<div class="feature-summary">
  <div class="feature-image-frame">
    <img src="//cdn.shopify.com/...png" alt="">
  </div>
  <h4>Feature Title</h4>
  <p>Use this spot to write a nice little description about the product feature.</p>
</div>
  

Video Bleed

Not as morbid as it sounds. Full bleed video element with a static poster image (specify with background-image property) and a responsive video embed. Either embed an iframe directly in the .video-bleed__video-aspect element or create a container child element with attribute data-vimeoid which will create an iframe on initialization.

<div class="video-bleed">
  <div class="video-bleed__poster">
    <div class="video-bleed__poster-image" style="background-image: url('http://www.runliftxi.com/wp-content/uploads/bfi_thumb/casper_unboxing-moazuec5bj8y45z2rp3pkgcdjg11x67qk7xe72cd34.jpg');">
    </div>
    <div class="video-bleed__poster-text">
      <a href="#" class="video-bleed__play">
        <svg class="video-bleed__play-button">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-play-button"></use>
        </svg>
        View video
      </a>
    </div>
  </div>
  <div class="video-bleed__video-wrapper">
    <div class="video-bleed__video-aspect">
      <iframe src="https://player.vimeo.com/video/76979871" frameborder="0"></iframe>
    </div>
  </div>
</div>
  

Misc. Components

Various components and utilities to help you develop the site without adding unnecessary style rules

Legal Content

Wrap page content with a .legal-content div to get extra horizontal padding and text styling to make large chunks of text easier to read

Form Container

Wrap forms with a .form-container div to consistently restrict form width

Login Form