Introduction

TODO:
this menu should be moved to the side - pattern library styling
Add usage where it make sense
add examples where it makes sense
Add about how to use it (code, template part etc).
Add where the component is used.


General things:
We use US English spelling for variables etc. This is to keep our work inline with other libraries etc that are often created using US English. Variable names should always be in English. For clarification comments can be added to give further explanation in other languages if necessary.

This base styling for these components comes from bootstrap. For specific examples and examples on combining elements, see their documentation. Any additional combinations that are used should be documented here.

Brand Foundation

This section includes all the base brand information including colours, fonts and the main logo.

Colours

The following are the allowed colours for Pixels. These are set in _variables.scss. Included are the class names for each colour for background and text.

Pink
#8222FF
$color-pink
Pink Light
#F924FF
$color-pink-light
Pink Lighter
#63E5D2
$color-pink-lighter
Gray Dark
#31A392
$color-gray-dark
Gray
#123424
$color-gray

Fonts

Roboto is the font used on the Pixels website. It is set in _variables.scss. There are two font weight options.

  • Light: 300, defined in _variable.scss as font-weight-light
  • Thin: 100, defined in _variable.scss as font-weight-thin, mostly used for headings

Logo

This is the logo that should be used for Pixels. It is SVG and should be included inline by using Include LIID logo here

Typography

Headings

This is an h1 heading

This is an h2 heading

This is an h3 heading

This is an h4 heading

This is an h5 heading

Lead in

Donec feugiat, ligula id tempor suscipit, sem dolor aliquet elit, nec egestas elit orci sed enim. Ut finibus nisl lobortis tellus viverra placerat. Donec fermentum orci arcu, in blandit lacus euismod quis. In vel tellus volutpat, luctus lorem nec, gravida diam.

Paragraph

In hac habitasse platea dictumst. Aliquam erat volutpat. In pharetra bibendum nulla in semper. Ut ut lorem euismod, viverra ligula ac, molestie dolor. Donec ut nulla ante. Vivamus aliquam risus et turpis tristique, vel sollicitudin dui fermentum. In nec lacus fringilla, placerat lacus at, luctus dui. Nam eu dignissim libero. Proin rhoncus gravida turpis, sit amet blandit mauris pretium ut. Cras vel nisi ac enim tempor cursus. In sollicitudin, urna ut bibendum posuere, sem velit finibus libero, sit amet mattis erat mi eget enim. Aenean orci nulla, scelerisque non imperdiet sed, imperdiet eget justo. Sed molestie scelerisque dui, nec volutpat orci faucibus a. Quisque nulla ligula, vehicula id metus euismod, pretium dignissim nibh. Duis non nulla massa. Sed libero dui, sagittis nec aliquam eget, efficitur ac augue.

Blockquotes

In hac habitasse platea dictumst. Aliquam erat volutpat. In pharetra bibendum nulla in semper. Ut ut lorem euismod, viverra ligula ac, molestie dolor. Donec ut nulla ante. Vivamus aliquam risus et turpis tristique, vel sollicitudin dui fermentum.

In hac habitasse platea dictumst. Aliquam erat volutpat. In pharetra bibendum nulla in semper. Ut ut lorem euismod, viverra ligula ac, molestie dolor. Donec ut nulla ante. Vivamus aliquam risus et turpis tristique, vel sollicitudin dui fermentum.

Someone famous in Source Title

Small

In hac habitasse platea dictumst. Aliquam erat volutpat. In pharetra bibendum nulla in semper. Ut ut lorem euismod, viverra ligula ac, molestie dolor. Donec ut nulla ante. Vivamus aliquam risus et turpis tristique, vel sollicitudin dui fermentum.

Unordered List

  • oranges
  • apples
  • pears
  • kiwifruit

Ordered List

  1. baskets
  2. boxes
  3. bags
  4. crates

Buttons

Buttons are defined and used in three colors and two sizes throughout the website.
Color options: black, pink, violet. Size option: small (mostly in header navigation), and normal size.

Default button

Variables:
element : button, link. Default: button
type : button, submit. Default: submit
label : Button label
color : black, violet, pink. Default: black
classes : extra classes for custom style and size.
data: data attribute of the button, require an object with pairs of key and value. Default: none
By default, without extra declaration, button are in normal size. Small button size is used by adding class btn-sm to the button using variable classes.

State Normal size, pink Small, gray
Normal
Hovered/focused
Active
Disabled

Inputs

State Input demo
Normal
Disabled
Readonly
Warning
Error
Textarea