Basscss / Docs / Modules

UI Utility Groups

 

basscss-ui-utility-groups v0.0.4 Optional

UI Utility Groups

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.

<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.

<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>