Ci logo

Design Elements

Atoms

Atoms are the most basic elements of the design kit. In most cases, they are just styled elements with limited or no functionality of their own.


Colors

Below is a set of swatches that demo each color and its Sass variable name and Hex value. Please note, Hex values are reference here only to help ux and vx with design applications outside of StyleBitz.

Brand Colors

Message & Dialog State Colors

Base Colors

Text Colors


Typography

Typography is based on a modular scale with a base of 1rem=16px, a ratio of 1.2 and a jump of 10.5px. For more on the scale in use, visit modularscale.com.

Paragraphs

This is a paragraph. If you want something bold it will look like this however, emphasis or italics looks like this.

font-size: 1rem/16px

Headings

Note: Some heading sizes shift for mobile.

h1. StyleBitz heading

font-size: 31.353px/2.986em

@mobile 21.7728px/2.1rem

h2. StyleBitz heading

font-size: 26.127px/2.488em

@mobile 18.144px/1.8rem

h3. StyleBitz heading

font-size: 21.773px/2.074em

@mobile 15.12px/1.5rem

h4. StyleBitz heading

font-size: 18.144px/1.728em

@mobile 12.6px/1.2rem

h5. StyleBitz heading

font-size: 15.12px/1.44em

@mobile 12.6px/1.2rem

h6. StyleBitz heading

font-size: 12.6px/1.2em

@mobile 12.6px/1.2rem

You can use these placeholder selectors to make headings appear as others. There are also mixins with the same name. For example, @include sb-h5-like;. These provide an easy and responsive way to mimic header styles for SEO while still being fully responsive.

h1 like h3

h4 like h3

h1 like h5

Here is an unordered list. Nested <ul> has a parent <li> with explicit list-style set to none.

Here is an ordered list. Nested <ul> has a parent <li> with explicit list-style set to none.

  1. Item Number One
  2. Item Number Two
    • Sub Item Number One
    • Sub Item Number Two
  3. Item Number Three

Text Elements


Buttons

Button Options

<button type="button" class="sb-Btn sb-Btn--primary">Primary</button>
<button type="button" class="sb-Btn sb-Btn--secondary">Secondary</button>
<button type="button" class="sb-Btn sb-Btn--link">Link</button>
<button type="button" class="sb-Btn sb-Btn--linkAlt">Link Alternate</button>

Variants

For homepage marquees, a primaryRed class is available. This button is currently not available for any purpose other than in marquees.

Primary Marquee Only
<button type="button" class="sb-Btn sb-Btn--primaryRed">Primary</button>
<a href="#" class="sb-Btn sb-Btn--primaryRed">Primary</a>
<a href="#" class="sb-Btn sb-Btn--primary">Primary</a>
<a href="#" class="sb-Btn sb-Btn--secondary">Secondary</a>
<a href="#" class="sb-Btn sb-Btn--link">Link</a>
<a href="#" class="sb-Btn sb-Btn--linkAlt">Link Alternate</a>

Disabled State

Make buttons unclickable by disabling them.

<button disabled type="button" class="sb-Btn sb-Btn--primary">Primary</button>
<button disabled type="button" class="sb-Btn sb-Btn--secondary">Secondary</button>
<button disabled type="button" class="sb-Btn sb-Btn--link">Link</button>
<button disabled type="button" class="sb-Btn sb-Btn--linkAlt">Link Alternate</button>
<a href="#" class="sb-Btn sb-Btn--primary is-Disabled">Primary</a>
<a href="#" class="sb-Btn sb-Btn--secondary is-Disabled">Secondary</a>
<a href="#" class="sb-Btn sb-Btn--link is-Disabled">Link</a>
<a href="#" class="sb-Btn sb-Btn--linkAlt is-Disabled">Link Alternate</a>

Button Sizes

Here are our button sizes using standard modifier class names. Also below are the height measurements in rem units for each size.

<button type="button" class="sb-Btn sb-Btn--large">Large Button</button>
<button type="button" class="sb-Btn">Normal Button</button>
<button type="button" class="sb-Btn sb-Btn--small">Small Button</button>

Block Buttons

Create block level buttons, those that span the full width of a parent, by adding the sb-Btn--block modifier.

Maybe Later
<button type="button" class="sb-Btn sb-Btn--block sb-Btn--primary">Pay Now</button>
<a href="" class="sb-Btn sb-Btn--block sb-Btn--secondary">Maybe Later</a>

Button Margins

By default, buttons have no margins which allow us to use them on the grid or floated within content areas. UX requires that buttons placed side by side have 1rem right margin before another button. Please use the .sb-Btn--mr to facilitate this.

<button type="button" class="sb-Btn sb-Btn--mr sb-Btn--primary">Pay Now</button>
<button type="button" class="sb-Btn sb-Btn--secondary">Maybe Later</button>

Responsive Buttons

You can use the .sb-Btn--responsive modifier class to automatically turn inline buttons into block buttons at the sm layout. Responsive buttons that use sb-Btn--mr will also remove said margin when changing to block style. It is very common to have two buttons appear side-by-side and be block level responsive. When this happens, we want to have a good bottom margin for the first button so it stacks nicely on top of the bottom button. Just add sb-Btn--responsive--mb to your first button.

Maybe Later
<button type="button" class="sb-Btn sb-Btn--responsive sb-Btn--responsive--mb sb-Btn--mr sb-Btn--primary">Pay Now</button>
<a href="" class="sb-Btn sb-Btn--responsive sb-Btn--secondary">Maybe Later</a>

Forms

Set your form element to use the .sb-Form class name. Many sub element style declarations require the parent <form> element to do this. This does not necessarily follow strict SUIT convention but it does keep us from being overzealous with class names on component descendants for inputs. All descendant <input>, <textarea>, and <select> elements are set to a 100% width by default. By default forms have no margins or padding. Use the sb-Form--content modifier to make that form behave appropriately in a content area, pretty much bottom margin like a paragraph.

Input types of submit receive special treatment. They are inline block elements without 100% width by default. They are styled as if the classes sb-Btn sb-Btn--primary were applied. Given these defaults, feel free to apply whatever button classes you desire to your submit buttons to change their appearance.

Wrap labels and controls in .sb-Form-group for optimum vertical spacing. Form groups also control input and label sizes and other scope helper issues of other form components. See the form input sizes section below for more info. Please use the .sb-Form-group--buttons modifier for form group that contain your form's submit input and/or related buttons. This adds a small additional space to cleanly separate them from the inputs.

Basic Form Example

<form class="sb-Form">
  <div class="sb-Form-group">
    <label for="form-email" required="required">Email Address</label>
    <input type="email" placeholder="Enter email..." id="form-email">
  </div>
  <div class="sb-Form-group">
    <label for="form-password" required="required">Password</label>
    <input type="password" placeholder="Password..." id="form-password">
  </div>
  <div class="sb-Form-group">
    <label for="form-comments">Comments</label>
    <textarea rows="8" cols="40" id="form-comments"></textarea>
  </div>
  <div class="sb-Form-group sb-Form-group--buttons">
    <input type="submit" value="Login">
  </div>
</form>

***Note:*** If we use `required="required"` on input fields safari keeps the form from being submitted and doesn't show any UI hint to the user that there are errors (require input on certain form fields) in form submissions. As a work around to this bug in safari we are using `required="required"` on label and use a css attribute selector on label to add the UI hint asterisk ("*"). More info on this issue can be found here [Issue: form required] (https://github.com/customink/style_bitz/issues/109)

```html
  <label for="form-password" required="required">Password</label>

How to use required in rails views? Add required: true on the label.

  <%= order.label :email, "Email Address", required: true %>

Inline Forms

Add the sb-Form--inline modifier class to your form element for left-aligned and inline-block controls. This only apply to forms within viewports that are at or above the md breakpoint. Inputs and selects have width: 100%; applied by default in StyleBitz. Within inline forms, we reset that to width: auto; so multiple controls can reside on the same line. Depending on your layout, custom widths may be required. Remember, if you want to use form elements on a grid, then use the normal block level inputs and affix your form groups to your layout. Do not use inline forms.

<form class="sb-Form sb-Form--inline">
  <div class="sb-Form-group sb-Form-group--mr">
    <label class="sb-Util-srOnly" for="inlineform1-email">Email Address</label>
    <input type="email" placeholder="Enter email..." id="inlineform1-email">
  </div>
  <div class="sb-Form-group sb-Form-group--mr">
    <label class="sb-Util-srOnly" for="inlineform1-password">Password</label>
    <input type="password" placeholder="Password..." id="inlineform1-password">
  </div>
  <div class="sb-Form-group sb-Form-group--buttons">
    <input type="submit" value="Login">
  </div>
</form>

Form Input Sizes

To modify form input and label sizes, apply --small or --large modifier classes to each .sb-Form-group. All form elements will be scaled as needed. Form input sizes will match the visual style, like height and text baseline, set forth by button classes. Important, please remember that form groups do not control input submit or button sizes, just input fields. Please also note there are no alternate sizes for radio, checkboxes or stepper.

Toggle: 

Checkbox & Radio Inputs

Wrap checkbox or radio inputs with semantic <label> elements that use either the .sb-Form-checkbox or .sb-Form-radio class for pretty radio and checkbox inputs. Use the following structure. Each control is 1rem in height. Please note that checkboxes and radio controls do not have alternate size modifiers.

<form class="sb-Form">
  <div class="sb-Form-group">
    <label class="sb-Form-checkbox">
      <input type="checkbox">
      <span class="sb-Form-indicator"></span>
      Check this custom checkbox.
    </label>
  </div>
  <div class="sb-Form-group">
    <label class="sb-Form-radio">
      <input type="radio" name="radio">
      <span class="sb-Form-indicator"></span>
      Toggle this custom radio.
    </label>
  </div>
  <div class="sb-Form-group">
    <label class="sb-Form-radio">
      <input type="radio" name="radio">
      <span class="sb-Form-indicator"></span>
      Or toggle this custom radio.
    </label>
  </div>
</form>

For in-line radio buttons and checkboxes use the .sb-Form-checkbox--inline or .sb-Form-radio--inline modifier classes. Note how we use .sb-Form-group to wrap each in-line set.

<form class="sb-Form">
  <div class="sb-Form-group">
    <label class="sb-Form-checkbox sb-Form-checkbox--inline ">
      <input type="checkbox">
      <span class="sb-Form-indicator"></span>
      1
    </label>
    <label class="sb-Form-checkbox sb-Form-checkbox--inline">
      <input type="checkbox">
      <span class="sb-Form-indicator"></span>
      2
    </label>
  </div>
  <div class="sb-Form-group">
    <label class="sb-Form-radio sb-Form-radio--inline">
      <input type="radio" name="radio">
      <span class="sb-Form-indicator"></span>
      One
    </label>
    <label class="sb-Form-radio sb-Form-radio--inline">
      <input type="radio" name="radio">
      <span class="sb-Form-indicator"></span>
      Two
    </label>
  </div>
</form>

Likewise, you can use the .sb-Form-checkbox--vertical or .sb-Form-radio--vertical modifier classes for labels above or below the input. The label text element can be before or after the input/indicator elements too. However this configuration of checkboxes and radio buttons are optimized first for labels above the control. If you please the label under the control, please use either the .sb-Form-checkbox--vertical--labelBottom or .sb-Form-radio--vertical--labelBottom modifier for optimum spacing.

<form class="sb-Form">
  <div class="sb-Form-group">
    <label class="sb-Form-radio sb-Form-radio--vertical">
      Average
      <input type="radio" name="radio">
      <span class="sb-Form-indicator"></span>
    </label>
    <label class="sb-Form-radio sb-Form-radio--vertical">
      Wow
      <input type="radio" name="radio">
      <span class="sb-Form-indicator"></span>
    </label>
  </div>
</form>
<form class="sb-Form">
  <div class="sb-Form-group">
    <label class="sb-Form-checkbox sb-Form-checkbox--vertical sb-Form-checkbox--vertical--labelBottom">
      <input type="checkbox">
      <span class="sb-Form-indicator"></span>
      <span>Love It</span>
    </label>
    <label class="sb-Form-checkbox sb-Form-checkbox--vertical sb-Form-checkbox--vertical--labelBottom">
      <input type="checkbox">
      <span class="sb-Form-indicator"></span>
      <span>This Too!</span>
    </label>
  </div>
</form>

Radio Button Groups

Rate Us!
WOW Us!
Rate Us! (small)
Rate Us! (large)
<form class="sb-Form">
  <div class="sb-Form-group sb-Form-group--horizontalRadioButtonGroup">
    <div>Rate Us!</div>
    <input type="radio" name="radio" id="rate-1" value="1">
    <label for="rate-1">1</label>
    <input type="radio" name="radio" id="rate-2" value="2">
    <label for="rate-2">2</label>
    <input type="radio" name="radio" id="rate-3" value="3">
    <label for="rate-3">3</label>
    <input type="radio" name="radio" id="rate-4" value="4" checked>
    <label for="rate-4">4</label>
    <input type="radio" name="radio" id="rate-5" value="5">
    <label for="rate-5">5</label>
  </div>
  <div class="sb-Form-group sb-Form-group--horizontalRadioButtonGroup">
    <div>WOW Us!</div>
    <input type="radio" name="rate" id="wow-1" value="Bad">
    <label for="wow-1">Bad</label>
    <input type="radio" name="rate" id="wow-2" value="Good">
    <label for="wow-2">Good</label>
    <input type="radio" name="rate" id="wow-3" value="WOW" checked>
    <label for="wow-3">WOW</label>
  </div>
  <div class="sb-Form-group sb-Form-group--horizontalRadioButtonGroup sb-Form-group--horizontalRadioButtonGroup--small">
    <div>Rate Us! (small)</div>
    <input type="radio" name="radio" id="rate-1small" value="1">
    <label for="rate-1small">1</label>
    <input type="radio" name="radio" id="rate-2small" value="2">
    <label for="rate-2small">2</label>
  </div>
  <div class="sb-Form-group sb-Form-group--horizontalRadioButtonGroup sb-Form-group--horizontalRadioButtonGroup--large">
    <div>Rate Us! (large)</div>
    <input type="radio" name="radio" id="rate-1large" value="1">
    <label for="rate-1large">1</label>
    <input type="radio" name="radio" id="rate-2large" value="2">
    <label for="rate-2large">2</label>
  </div>
</form>

Steppers

Stepper controls are initialized on document load. If you add a stepper control dynamically, you will have to initialize it. Call StyleBitz.Forms.Stepper.init() after adding a stepper control to your document.

<form class="sb-Form">
  <input type="number" class="sb-Form-stepper" readonly="true" value="0" min="0" max="11">
</form>

Disabled Forms

Here are what disabled forms look like. For optimal UI states, a bit of JavaScript is required to style disabled label wrappers as each input DOM element is changed.

Toggle Disabled

The JavaScript is part of the default StyleBitz bundle, specifically found in style_bitz/forms.js.coffee and only works for browsers that support mutation observers. The StyleBitz gem vendors the jquery-attrchange library as a convenience wrapper.

Forms With Errors

Here are what form elements with errors look like. Adding the SUIT state .is-fieldWithErrors class to any input, label, select, or textarea element will indicate a simple error state. Here is an example below. Since forms can be disabled and in an error state, we have included two toggle buttons to play with. Invalid form controls can also be assigned an aria-invalid="true" attribute.

Toggle Errors Toggle Disabled
Please be sure to enter a valid email address.
Please be sure to enter your state.
Please tell us more.

Inline error messages can be used by add in a block level element after the input with a class of sb-Form-fieldErrors. This element is usually the last child of the sb-Form-group element. Inline messages only apply to block level inputs which also includes select and text areas.

Form Help Text

Block level help text for form controls. Help text must be located beneath form errors if present. The aria-describedby attribute on the input element whose value points to an ID of the help text element is optional but will ensure that assistive technologies such as screen readers will announce this help text.

10 characters max, no spaces.
Not a valid credit card number.
All cards excepted. Debit cards preferred.
<form class="sb-Form">
  <div class="sb-Form-group">
    <label for="fht-designname">Design Name</label>
    <input id="fht-designname" type="text" aria-describedby="fht-designnamehelp">
    <span id="fht-designnamehelp" class="sb-Form-help">
      10 characters max, no spaces.
    </span>
  </div>
  <div class="sb-Form-group">
    <label for="fht-cardnumber">Card Number</label>
    <input id="fht-cardnumber" type="text" aria-describedby="fht-cardnumbererror fht-cardnumberhelp" value="1234 5678">
    <div id="fht-cardnumbererror" class="sb-Form-fieldErrors" style="display: block;">Not a valid credit card number.</div>
    <span id="fht-cardnumberhelp" class="sb-Form-help">
      All cards excepted. Debit cards preferred.
    </span>
  </div>
</form>

Alerts and Dialogs

The .sb-Alert is a minimal components for styling messages. Typically used by Rails for flash messaging. Both alerts and dialogs have Rails and JavaScript interfaces.

Great. A message is here..

<div class="sb-Alert">
  <p>Great. A message is here.</p>
</div>

Hello. Successfully logged in.

<div class="sb-Alert sb-Alert--success">
  <p>Hello. Successfully logged in.</p>
</div>

Warning. You must select a shirt style to continue.

<div class="sb-Alert sb-Alert--warning">
  <p>Warning. You must select a shirt style to continue.</p>
</div>

Error. Failed to save design to your profile. Help.

<div class="sb-Alert sb-Alert--error">
  <p>Error. Failed to save design to your profile. Help.</p>
</div>

Our implementation wants to help you drop any text-based content within these elements and be styled appropriately. For example, we do all the work to make sure that (last child) block elements like paragraphs and lists have no bottom margin. This keeps the visual padding of the alert box looking good. We also normalize any headers used to the same size, so pick a semantic header that works for you and they will all appear the same.

Great Job! Remember To:

  • Write CSS using SUIT!
  • Keep awesome documentation.
<div class="sb-Alert sb-Alert--success">
  <h4>Great Job! Remember To:</h4>
  <ul>
    <li>Write CSS using SUIT!</li>
    <li>Keep awesome documentation.</li>
  </ul>
</div>

You can level up your alerts by using .sb-Alert-icon and .sb-Alert-message children elements to partition your alert into distinct cells. The font/icon colors will be the same as the default colors in the alert boxes above. However, if you want to follow our guidelines for warnings and errors use the .sb-Alert--warning and sb-Alert--error modifiers as illustrated below. These will style the icon and header to the right color too. Build you own by using any icon you want and theme away!

Double Check Names and Numbers

Not all of the items in your order have Names and Numbers specified.
<div class="sb-Alert sb-Alert--warning">
  <div class="sb-Alert-icon">
    <i class="sb-Icon--warning"></i>
  </div>
  <div class="sb-Alert-message">
    <h3>Double Check Names and Numbers</h3>
    Not all of the items in your order have Names and Numbers specified.
  </div>
</div>

Whoops! It looks like we're missing some information.

Please correct the red highlighted areas below. If this problem continues, please call 800-293-4232 for assistance.
<div class="sb-Alert sb-Alert--error">
  <div class="sb-Alert-icon">
    <i class="sb-Icon--error"></i>
  </div>
  <div class="sb-Alert-message">
    <h3>Whoops! It looks like we're missing some information.</h3>
    Please correct the red highlighted areas below.  If this problem continues, please call 800-293-4232 for assistance.
  </div>
</div>

Dialogs

Dialogs are an alternate implementation of Alerts. Please read the UX documentation on when to use one vs the other. Dialogs have a similar HTML structure as error and warning alerts since they always have an icon present. Dialogs look good with most any content inside but are meant for simple textual content. However, buttons should work in these components better since they have a white background.

One more thing before you go…

Would you mind completing the required fields highlighted below? We appreciate the feedback!

  • Name is required
  • Address is required
<div class="sb-Dialog sb-Dialog--error">
  <div class="sb-Dialog-icon">
    <i class="sb-Icon--error"></i>
  </div>
  <div class="sb-Dialog-message">
    <h3>One more thing before you go&hellip;</h3>
    <p>
      Would you mind completing the required fields highlighted below? We appreciate the feedback!
      Would you mind completing the required fields highlighted below? We appreciate the feedback!
      Would you mind completing the required fields highlighted below? We appreciate the feedback!
    </p>
   </div>
</div>

Dialogs content is designed to look good with only a header message. Like alerts, all headers are normalized, so choose the one that works for your page's semantics. Here are examples of all style variants

Whoops! We are missing some information.

<div class="sb-Dialog sb-Dialog--error">
  <div class="sb-Dialog-icon">
    <i class="sb-Icon--error"></i>
  </div>
  <div class="sb-Dialog-message">
    <h3>Whoops! It looks like we're missing some information.</h3>
   </div>
</div>

Thanks for subscribing.

<div class="sb-Dialog sb-Dialog--info">
  <div class="sb-Dialog-icon">
    <i class="sb-Icon--info"></i>
  </div>
  <div class="sb-Dialog-message">
    <h3>Thanks for subscribing.</h3>
   </div>
</div>

Account preferences updated.

<div class="sb-Dialog sb-Dialog--success">
  <div class="sb-Dialog-icon">
    <i class="sb-Icon--success"></i>
  </div>
  <div class="sb-Dialog-message">
    <h3>Account preferences updated.</h3>
   </div>
</div>

Credit card is about to expire.

<div class="sb-Dialog sb-Dialog--warning">
  <div class="sb-Dialog-icon">
    <i class="sb-Icon--warning"></i>
  </div>
  <div class="sb-Dialog-message">
    <h3>Credit card is about to expire.</h3>
   </div>
</div>

InkIcons (Deprecated)

The following icons are set to be removed from StyleBitz. The following examples are intended as a guide for maintaining existing icons, not for use in future development.

sb-Icon--menu
sb-Icon--chat
sb-Icon--email
sb-Icon--phone
sb-Icon--help
sb-Icon--twitter
sb-Icon--facebook
sb-Icon--pinterest
sb-Icon--instagram
sb-Icon--tumblr
sb-Icon--warning
sb-Icon--error
sb-Icon--info
sb-Icon--success
sb-Icon--forward
sb-Icon--link
sb-Icon--spinner
sb-Icon--envelope
sb-Icon--phone-classic
sb-Icon--close
sb-Icon--print
sb-Icon--check
sb-Icon--google
<i class="sb-Icon--phone"></i>
<span class="sb-Icon--phone"></span>

Using an InkIcon glyph must be done on an inline element. We recommend using either an <i> or <span>, tag as shown above, with the glyph's class name. Styling an InkIcon's presentation requires targeting the :before pseudo element. If you want to style a an InkIcon's layout, target the class vs the pseudo selector. StyleBitz provides a Sass mixin that makes targeting the pseudo element easy. It can take multiple InkIcon short names and targets the proper selectors. For example, the two following declaration blocks are the same.

.sb-Icon--phone:before,
.sb-Icon--chat:before {
  color: $sb-orange;
}

@include sb-icon(phone, chat) {
  color: $sb-orange;
}