Utilities

Borders

Add borders to page elements with these border utilities. The default border-width is 1px.

Border Widths

Set border widths with .b-width-*, from 0-3. Append responsive modifiers to the class (e.g. .b-width-3-xl) to apply border width styles at specified viewport widths.

Border Colors

Specify border color using using .b-color-*.

Responsive Borders

Add borders to page elements at specified viewport widths.

Hover Effects

Add hover effects to elements to indicate elements that can be interacted with.

Shadow

Add a shadow to element using .hover-shadow.

    
<div class="card hover-shadow">
<div class="card-block">
  ...
</div>
</div>
    
  

Dim

Dim text or an entire element using .hover-dim.

    
<div class="card hover-dim">
  <div class="card-block">
    ...
  </div>
</div>
    
  

Pointer (mouse)

Change the mouse cursor to a pointer on hover, to indicate elements that can be interacted with. This is best used in combination with another hover effect.

    
<div class="card hover-shadow hover-pointer">
  <div class="card-block">
    ...
  </div>
</div>
    
  

Underline

Underline text or text within an element using .hover-underline.

    
<div class="card hover-underline">
<div class="card-block">
  <h4 class="card-title">Header Underline</h4>
  <p class="card-text">A card that underlines text on hover.</p>
</div>
</div>
    
  

Responsive Floats

Float an element left or right based on the current viewport size using the same breakpoints as the grid system.

Non-responsive floats are also available (.pull-left and .pull-right).

    
<div class="pull-xs-left">Float left on all viewport sizes</div>
<div class="pull-xs-right">Float right on all viewport sizes</div>
<div class="pull-xs-none">Don't float on all viewport sizes</div>

<div class="pull-sm-right">Float right on viewports sized SM (small) or wider</div>
<div class="pull-md-right">Float right on viewports sized MD (medium) or wider</div>
<div class="pull-lg-right">Float right on viewports sized LG (large) or wider</div>
<div class="pull-xl-right">Float right on viewports sized XL (extra-large) or wider</div>
    
  

Spacing

Assign margin or padding to an element with a spacing utility class. All classes are multiples of 20px. Use of these classes is explicitly stating your intention to override any pre-existing margin or padding styles.

Class names use the format: [property]-[side]-[size] where [property] is m for margin or p for padding. [side] is t for top, b for bottom, l for left, and r for right. [size] is 0 to remove margin or padding, sm is for 20px, md is 30px, lg is 40px, and xl is 60px.

    
.p-sm {
  padding: 20px !important;
}

.m-lg {
  margin: 40px !important;
}

.m-xl {
  margin: 60px !important;
}

.m-t-0 {
  margin-top: 0 !important;
}

.m-t-xs {
  margin-top: 10px !important;
}

.m-t-sm {
  margin-top: 20px !important;
}

.p-b-md {
  padding-bottom: 30px !important;
}

.p-b-lg {
  padding-bottom: 40px !important;
}
    
  

Sticky Positioning

Sometimes you may wish to have content affixed to the viewport as the user scrolls through the page. Some examples of this might be for navigation or the Price Estimate component.

Cyclops implements a polyfill for a new draft standard for position: sticky. For browsers that support it, we will do nothing and allow the native implementation to render the sticky content. Otherwise, we will do our best to emulate the native behavior with a bit of JavaScript.

You don't need to do anything special to enable the polyfill, as it is taken care of for you when you include Cyclops. Simply use the position: sticky declaration in your stylesheet and you should be all set. You must also be sure to specify the top property to tell the browser the point at which the content should become sticky when scrolling.

Note: On IE9 and IE10, the polyfill will not register for elements that have been inserted into the DOM dynamically (i.e. after initial rendering).

    
<div class="row">
  <div class="col-sm-3 sidebar">
    <div class="nav nav-stacked">
      <ul class="tabs">
        <li class="tab"><a href="#">Home</a></li>
        <li class="tab selected"><a href="#">Products</a></li>
        <li class="tab"><a href="#">Services</a></li>
        <li class="tab"><a href="#">About</a></li>
        <li class="tab"><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
  <div class="col-sm-9">
    <h2>Content</h2>
    <p>
      ...
    </p>
  </div>
</div>
    
    
.sidebar {
  @media (min-width: @screen-sm-min) {
    position: sticky;
    top: 0;
  }
}