Welcome to a living Styleguide

This page is an example of a living Styleguide made with Flask-Styleguide and Frozen-Flask.

2.1

A standard, but classy, button used widely for submit forms and to complete other app actions.

  • :hover - Hover state.
  • :active - When the button is pressed.
  • :focus - When the button is focused.
  • :disabled - Disabled state.
  • .is-disabled - Same as above.
A button link
:hover A button link
:active A button link
:focus A button link
:disabled A button link
.is-disabled A button link 
<button class="button">Button</button>
<a class="button">A button link</a>

2.2

Proportionally increase or decrease button size.

  • .button--mini - A mini button.
  • .button--xl - An extra large button.
A button link
.button--mini A button link
.button--xl A button link 
<button class="button">Button</button>
<a class="button">A button link</a>

2.3

Full-width button.

  • .button--block - Button which takes up the entire width of its container.
.button--block 
<button class="button">A full-width button</button>