Add-Ons

Extend Concise with these pre-built add-ons.

Icon Groups

If you wish to group together a set of icons or text, it can easily be accomplished with the .group class.

This add-on requires the font-size(), vendor(), breakpoint() mixins, and $base-font-size variable in order for the SASS or LESS files to compile without modification.

All of the icons used the examples below are from a modified version of the Font Awesome icon font library.

Basic

Wrap elements with the .group-item inside of an element with the .group class.

Preview

Left

Center

Right
Code 
<span class="group">
  <p class="group-item">Left</p>
  <p class="group-item">Center</p>
  <p class="group-item">Right</p>
</span>

Pagination

The .group class can be used for many things. Here is an example of pagination being built using the class.

Preview

Code 
<span class="group border-radius">
  <button class="group-item"><span class="icon angle-double-left"></span> First</button>
  <button class="group-item">1</button>
  <button class="group-item">2</button>
  <button class="group-item active">3</button>
  <button class="group-item">4</button>
  <button class="group-item">Last <span class="icon angle-double-right"></span></button>
</span>

Icon Groups

Icons also can be wrapped inside of the .group class.

Preview

Code 
<span class="group border-radius">
  <button class="group-item"><span class="icon align-left"></span></button>
  <button class="group-item"><span class="icon align-center"></span></button>
  <button class="group-item"><span class="icon align-right"></span></button>
</span>

Dropdowns

The .dropdown class can be added to any of the .group-item classes.

Preview

Code 
<span class="group border-radius">
  <button class="group-item"><span class="icon align-left"></span></button>
  <button class="group-item"><span class="icon align-center"></span></button>
  <button class="group-item"><span class="icon align-right"></span></button>
  <button class="group-item"><span class="icon align-justify"></span></button>
  <button class="group-item dropdown line" tabindex="1">
    <span class="icon cog"></span> <span class="caret"></span>

    <ul class="dropdown-menu">
      <li><a href="#"><span class="icon user text-center"></span></a></li>
      <li><a href="#"><span class="icon cog text-center"></span></a></li>
      <li><a href="#"><span class="icon times text-center"></span></a></li>
    </ul>
  </button>
</span>

Download

Download CSS