ITL utility_classes

ITL utility_classes

Source: _buttons.scss, line 16

1.2 Sizes

@mixin buttonSize([xs,sm,md,lg,xl,wide,wider]) use the BEM modifiers to change the default button sizes:

  • .button--xs: smallest button in the book
  • .button--sm: still smaller than default
  • .button--md: actually the default
  • .button--lg: bigger than default
  • .button--xl: pretty big
  • .button--wide: wider than default
  • .button--wider: much wider than default

Example

<button class="button--xs button bg-yellow">Sample button</button>
<button class="button--sm button bg-green">Sample button</button>
<button class="button--md button bg-red">Sample button</button>
<button class="button--lg button bg-blue">Sample button</button>
<button class="button--xl button bg-white">Sample button</button>