Pattern library
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 LiiD. These are set in _variables.scss
. Included are the class names for each colour for background and text.
Fonts
Roboto is the font used on the LiiD website. It is set in _variables.scss
. There are two font weight options.
- Light: 300, defined in
_variable.scss
asfont-weight-light
- Thin: 100, defined in
_variable.scss
asfont-weight-thin
, mostly used for headings
Logo
This is the logo that should be used for LiiD. 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.
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
- baskets
- boxes
- bags
- 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, black | Normal size, pink | Small, violet |
---|---|---|---|
Normal | |||
Hovered/focused | |||
Active | |||
Disabled |
Inputs
Headings
State | Input demo |
---|---|
Normal | |
Disabled | Readonly |
Success | |
Warning | |
Error | |
Textarea | |
Search bar |
|
Newsletter block |