Ci logo

Design Elements

Molecules

Molecules are styled elements with limited functionality on their own, but which can be grouped into Organisms with greater utility.


Stars

Stars allow users to see and set ratings on products. The data-sb-StarValue expects a number from 0.0 to 5.0. This component may be wrapped in an external element to control its position.

<div class="sb-StarRatings">
  <div class="sb-StarRatings-stars" data-sb-StarValue="0.5"></div>
  <div class="sb-StarRatings-count">150</div>
</div>
150
<div class="sb-StarRatings">
  <div class="sb-StarRatings-stars" data-sb-StarValue="4.5"></div>
  <div class="sb-StarRatings-count">150</div>
</div>
150

Content Images

The sb-ContentImg class and modifiers help style and layout images. Images with this class are meant to be used inside of content blocks, typically copy. On mobile, the will be 100% wide and change to floated right for the md breakpoint and above. Appropriate margins will be given for copy to flow around the image. For working examples, see the demo pages section.

List Navigation

Sometimes you want a bullet list for navigation links. Use the sb-ListNav class to style <ul> or <ol> items. In this example, we are using the is-currentPage link state to change the color and cursor of the presumed current page navigation item.

<ul class="sb-ListNav">
  <li><a href="#">An Ink-troduction</a></li>
  <li><a href="#" class="is-currentPage">The CustomInk Difference</a></li>
  <li><a href="#">Our Story</a></li>
</ul>

Panels

A panel simply applies some basic styling to a block of content. This behavior is achieved with the sb-Panel class.

You can put content in a panel
<div class="sb-Panel">
  You can put content in a panel
</div>

A panel container can hold one or many panels. You can get this behavior by having an element with the sb-PanelContainer class on it and child elements with the sb-Panel class. The panels will divide the width of the space available without wrapping. So if you have 2 panels, each will take up half the screen, and with 3 panels each will take up one third of the screen width.

If you want multiple rows, you will need to use multiple panel containers.

Panel 1
Panel 2
<div class="sb-PanelContainer">
  <div class="sb-Panel">Panel 1</div>
  <div class="sb-Panel">Panel 2</div>
</div>
Panel 1
Panel 2
Panel 3
<div class="sb-PanelContainer">
  <div class="sb-Panel">Panel 1</div>
  <div class="sb-Panel">Panel 2</div>
  <div class="sb-Panel">Panel 3</div>
</div>

Status Bar

Not to be confused with breadcrumbs and nav links, the status bar is an information only list of progress through a wizard flow. Use the is-currentItem state class on any item to indicate which step you are on. Likewise, you can mark the whole status bar as complete using the is-complete class on the parent.

<aside class="sb-StatusBar">
  <mark class="sb-StatusBar-item" data-label="Artwork"></mark>
  <mark class="sb-StatusBar-item is-currentItem" data-label="Printing"></mark>
  <mark class="sb-StatusBar-item" data-label="Shipping"></mark>
  <mark class="sb-StatusBar-item" data-label="Delivery"></mark>
</aside>

For the sm layout, this component will collapse down to display numbers only while adding a header of the current item and footer of the next up item. Please see our test page for examples.

Note, you can use most any block or list element for this component. In this example we are using an <aside> element with internal <mark> elements as the recommended semantics.

Carousels

A collection of carousel components. These are not part of the core StyleBitz CSS/JS manifest. To use these on pages within your Rails applications, please require style_bitz/components/carousel CSS/JS assets within your own manifest(s). IMPORTANT: When using carousels, make sure to add the <% sb_scalable! %> to your pages to disable the mobile menu and allow horizontal swipe gestures to work properly.

Full details can be found our our full carousel documentation page.

Full Carousel Docs