Component CSS for button-groups (DEPRECATED)
HTML CSS
Latest commit 3262a8b Nov 20, 2015 @simonsmith simonsmith Deprecate
Fix #10
Permalink
Failed to load latest commit information.
.gitignore Ignore directories created by Component(1) Oct 22, 2013
.travis.yml Add Travis CI config Oct 17, 2013
CHANGELOG.md 2.2.0 May 15, 2014
LICENSE.md Initial public release Oct 5, 2012
README.md Deprecate Nov 20, 2015
bower.json 2.2.0 May 15, 2014
button-group.css 2.2.0 May 15, 2014
button-group.plugin.css 2.2.0 May 15, 2014
component.json 2.2.0 May 15, 2014
package.json 2.2.0 May 15, 2014
test.html Add viewport meta tag to test.html Apr 5, 2014

README.md

SUIT ButtonGroup (DEPRECATED)

CSS for visually grouping buttons.

Read more about SUIT's design principles.

Installation

  • Component(1): component install suitcss/components-button-group
  • npm: npm install suitcss-components-button-group
  • Bower: bower install suit-components-button-group

Available classes

  • ButtonGroup - The core component.
  • ButtonGroup--hz - Horizontally arranged buttons.
  • ButtonGroup-item - A ButtonGroup sub-object used to contain buttons.

The plugin file provides the following classes:

  • ButtonGroup--borderCollapse - Collapse the borders between buttons.

Configurable variables

  • --font-size-ButtonGroup - The font-size to use. Defaults to 1rem.

Use

An element with the ButtonGroup class must be used to wrap a collection of elements with the ButtonGroup-item class. The ButtonGroup component must only contain ButtonGroup-item components as children.

The button group items must contain Button components.

<div class="ButtonGroup">
  <div class="ButtonGroup-item">
    <a class="Button" href="{{url}}">Dashboard</a>
  </div>
  <div class="ButtonGroup-item">
    <a class="Button" href="{{url}}">Settings</a>
  </div>
  <div class="ButtonGroup-item">
    <a class="Button" href="{{url}}">
      Account
      <span class="Icon Icon--cog"></span>
    </a>
  </div>
</div>

Testing

Install Node (comes with npm).

npm install

To generate a build:

npm run build

To generate the testing build.

npm run build-test

Basic visual tests are in test.html.

Browser support

  • Google Chrome (latest)
  • Opera (latest)
  • Firefox 4+
  • Safari 5+
  • Internet Explorer 9+