ITL utility_classes

ITL utility_classes

Source: _buttons.scss, line 6

1 Buttons

@mixin button Improvement uppon the default buttons. Buttons as they should be.

Example

<button>Normal button</button><button class="button">Utility button</button>

Source: _buttons.scss, line 149

1.1 Effects

@mixin buttonEffect([lighten, darken, 3d]) Add hover-effects to buttons

  • .button--lighten: lightens the button opacity
  • .button--darken: darkens the button bg
  • .button--3d: gives a 3d effect to a button

Example

<button class="button--lighten button bg-green">Sample button</button>
<button class="button--darken button bg-green">Sample button</button>
<button class="button--3d button bg-green">Sample button</button>

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>

Source: _buttons.scss, line 101

1.3 Styles

@mixin buttonStyle([flat, curve, pill, round]) Add appearance styles to buttons

  • .button--flat: removes the border-radius
  • .button--curve: adds a border-radius
  • .button--pill: makes the button pill shaped
  • .button--round: makes the button circle shaped Should be used in combination with fixed width and height

Example

<button class="button--flat button bg-green">Sample button</button>
<button class="button--curve button bg-green">Sample button</button>
<button class="button--pill button bg-blue">Sample button</button>
<button class="button--round w64 h64 button bg-red">Big</button>