List-groups

Star
The Trowel project is abandonned. Trowel core and the Trowel components are no more maintained or supported. More infos

Download

You can fetch Trowel List-groups with npm, yarn or bower.

# With bower
$ bower install --save trowel-list-groups

# With npm
$ npm install --save trowel-list-groups

# With yarn
$ yarn add trowel-list-groups

You can also download a zip archive right here.

Installation

Scss

The main scss file to include to your main .scss file is located at the ./src/scss/list-groups.scss. As a Trowel Component, it also requires two dependencies to compile the scss code. Here an scss installation snippet.

// Trowel core (need to be imported first)
@import './path/to/dependencies/trowel-core/src/trowel';

// Trowel List-groups
@import './path/to/dependencies/trowel-list-groups/src/scss/list-groups';

Usage

A list-group is just an unordered list with classes on <ul> and <li> DOM elements.

<ul class="list-group">
  <li class="list-group__item">Cras justo odio</li>
  <li class="list-group__item">Dapibus ac facilisis in</li>
  <li class="list-group__item">Morbi leo risus</li>
  <li class="list-group__item">Porta ac consectetur ac</li>
  <li class="list-group__item">Vestibulum at eros</li>
</ul>

Themed items

With the trowel variable $listgroups-item--background-color we setup some modifier-element flag that allow us to create themed list-group items.

<ul class="list-group">
  <li class="list-group__item list-group__item--primary">Cras justo odio</li>
  <li class="list-group__item list-group__item--success">Morbi leo risus</li>
  <li class="list-group__item list-group__item--warning">Vestibulum at eros</li>
  <li class="list-group__item list-group__item--danger">Morbi leo risus</li>
</ul>

List-group sizes

By default, the setup of the trowel variables generates modifiers classes that with different sizes for list-group.

  • list group xs
  • item
  • item
  • list group sm
  • item
  • item
  • list group md
  • item
  • item
  • list group lg
  • Dapibus ac facilisis in
  • item
<!-- Extra small list-group -->
<ul class="list-group list-group--xs">
  <li class="list-group__item">list group xs</li>
  <li class="list-group__item">item</li>
  <li class="list-group__item">item</li>
</ul>

<!-- Small list-group -->
<ul class="list-group list-group--sm">
  <li class="list-group__item">list group sm</li>
  <li class="list-group__item">item</li>
  <li class="list-group__item">item</li>
</ul>

<!-- Medium list-group -->
<ul class="list-group">
  <li class="list-group__item">list group md</li>
  <li class="list-group__item">item</li>
  <li class="list-group__item">item</li>
</ul>

<!-- Large list-group -->
<ul class="list-group list-group--lg">
  <li class="list-group__item">list group lg</li>
  <li class="list-group__item">Dapibus ac facilisis in</li>
  <li class="list-group__item">item</li>
</ul>

Sass reference

Syntax variables

You can override the global syntax config for a specific component with the following variables

VARIABLE DEFAULT VALUE DESCRIPTION
$listgroups--syntax null syntax config for .list-group

Component variables

VARIABLE DEFAULT VALUE DESCRIPTION
$listgroups--font-size (
  'default': 1rem,
  '-xs': 0.65rem trwl-theme-size('xs'),
  '-sm': 0.8rem trwl-theme-size('sm'),
  '-lg': 1.2rem trwl-theme-size('lg'),
)		 sets the font-size property on .list-group
$listgroups--font-family 'Open Sans', verdana, sans-serif sets the font-family property on .list-group
$listgroups--font-weight null sets the font-weight property on .list-group
$listgroups--text-transform null sets the text-transform property on .list-group
$listgroups--letter-spacing null sets the letter-spacing property on .list-group
$listgroups--line-height 1.2 sets the line-height property on .list-group
$listgroups--text-align null sets the text-align property on .list-group
$listgroups--text-decoration null sets the text-decoration property on .list-group
$listgroups--margin 0 0 1em sets the margin property on .list-group
$listgroups--border-radius null sets the border-radius property on .list-group
$listgroups--color null sets the color property on .list-group
$listgroups--box-shadow null sets the box-shadow property on .list-group
$listgroups--background null sets the background property on .list-group
$listgroups--background-color null sets the background-color property on .list-group
$listgroups--max-width null sets the max-width property on .list-group
Item    
VARIABLE DEFAULT VALUE DESCRIPTION
$listgroups-item--font-size null sets the font-size property on .list-group__item
$listgroups-item--font-family null sets the font-family property on .list-group__item
$listgroups-item--font-weight null sets the font-weight property on .list-group__item
$listgroups-item--text-transform null sets the text-transform property on .list-group__item
$listgroups-item--letter-spacing null sets the letter-spacing property on .list-group__item
$listgroups-item--line-height null sets the line-height property on .list-group__item
$listgroups-item--text-align null sets the text-align property on .list-group__item
$listgroups-item--text-decoration null sets the text-decoration property on .list-group__item
$listgroups-item--border-width 1px sets the border-width property on .list-group__item
$listgroups-item--border-style solid sets the border-style property on .list-group__item
$listgroups-item--border-color (
  'default': rgb(207, 207, 213),
  '~primary': darken(rgb(31, 13, 51), 10%),
  '~success': darken(rgb(55, 211, 189), 10%),
  '~warning': darken(rgb(255, 176, 0), 10%),
  '~danger': darken(rgb(253, 65, 100), 10%),
)		 sets the border-color property on .list-group__item
$listgroups-item--border-radius 0.2em sets the border-radius property on .list-group__item
$listgroups-item--color (
  '~primary': rgb(255, 255, 255),
)		 sets the color property on .list-group__item
$listgroups-item--box-shadow null sets the box-shadow property on .list-group__item
$listgroups-item--background null sets the background property on .list-group__item
$listgroups-item--background-color (
  'default': rgb(255, 255, 255),
  '~primary': rgb(31, 13, 51),
  '~success': rgb(55, 211, 189),
  '~warning': rgb(255, 176, 0),
  '~danger': rgb(253, 65, 100),
)		 sets the background-color property on .list-group__item
$listgroups-item--padding 0.65em 1.65em sets the padding property on .list-group__item
$listgroups-item--z-index (
  '~primary': 1,
  '~success': 1,
  '~warning': 1,
  '~danger': 1,
)		 sets the z-index property on .list-group__item