Base Reset Base Typography Base Forms Base Buttons Base Tables Utility Layout Utility Typography Utility White Space Utility Responsive States UI Utility Button Sizes UI Utility Groups UI Utility Disclosure States Positions Grid Table Object Color Base Color Forms Color Forms Dark Color Tables Color Buttons Colors Color Borders Flex Object Utility Headings Background Images

# basscss-ui-utility-groups v0.0.4 Optional

# UI Utility Groups

NPM Github

Use group utilities for fine-grained control over visually grouping buttons, form fields, and other elements.

## Button Groups

Button groups allow for more flexibility in establishing gestalt and controlling information density. Use a combination of layout utilities and color extensions to create button groups. The utilities `.rounded-left`, `.rounded-right`, and `.not-rounded` can be used to override button and form field border radii.

    <div class="inline-block clearfix">
      <button type="button" class="left button-blue rounded-left is-active">Burgers</button>
      <button type="button" class="left button-blue border-left not-rounded">Fries</button>
      <button type="button" class="left button-blue border-left rounded-right">Shakes</button>
    </div>

Normally, buttons with borders would double up when placed next to each other. The `.x-group-item` and `.x-group-item-2` utilities adjust negative margins and focus states to visually collapse borders.

Use the `.x-group-item-2` utility on elements with 2px borders. Functionally, this is similar to how other frameworks handle button and form input groups, but with more direct control over styling.

    <div class="inline-block clearfix">
      <button type="button" class="left button-blue-outline x-group-item-2 rounded-left is-active">Burgers</button>
      <button type="button" class="left button-blue-outline x-group-item-2 not-rounded">Fries</button>
      <button type="button" class="left button-blue-outline x-group-item-2 rounded-right">Shake</button>
    </div>

Use `.y-group-item` and `.y-group-item-2` to group elements vertically.

    <div class="inline-block">
      <button type="button" class="block full-width button-blue-outline y-group-item-2 rounded-top is-active">Burgers</button>
      <button type="button" class="block full-width button-blue-outline y-group-item-2 not-rounded">Fries</button>
      <button type="button" class="block full-width button-blue-outline y-group-item-2 rounded-bottom">Shake</button>
    </div>

## Input Groups

Input groups can be created by removing margins, adjusting border radii, and using the group utilities. The `.hide` utility visually hides labels, while keeping them accessible to screen readers.

Pancakes Making Bacon

    <form class="sm-col-6">
      <label class="hide">Pancakes</label>
      <input type="text" class="block full-width mb0 field-light rounded-top y-group-item" placeholder="Pancakes">
      <label class="hide">Making</label>
      <input type="password" class="block full-width mb0 field-light not-rounded y-group-item" placeholder="Making">
      <label class="hide">Bacon</label>
      <input type="text" class="block full-width field-light rounded-bottom y-group-item" placeholder="Bacon">
      <button type="submit" class="button-blue">Pancake</button>
    </form>

The grid system can be used to control button or input group widths.

Bacon Pancakes

    <form class="clearfix">
      <label class="hide">Bacon</label>
      <input type="text" class="col col-4 md-col-5 mb0 field-light rounded-left x-group-item" placeholder="Bacon">
      <label class="hide">Pancakes</label>
      <input type="password" class="col col-4 md-col-5 mb0 field-light not-rounded x-group-item" placeholder="Pancakes">
      <button type="submit" class="col col-4 md-col-2 button-blue rounded-right">Pancake</button>
    </form>