Styleguide
Colorpalette
Primary
.bg-color-primary
.bg-color-inside-primary
Secondary
.bg-color-secondary
.bg-color-inside-secondary
Palette 1
USE CLASS
.bg-color-palette-1
.bg-color-inside-palette-1
Palette 2
USE CLASS
.bg-color-palette-2
.bg-color-inside-palette-2
Palette 3
USE CLASS
.bg-color-palette-3
.bg-color-inside-palette-3
Palette 4
USE CLASS
.bg-color-palette-4
.bg-color-inside-palette-4
White: #fff
bg-color-cwhite
bg-color-inside-cwhite
Black #000
bg-color-cblack
bg-color-inside-cblack
Danger
USE CLASS
.bg-color-danger
.bg-color-inside-danger
Warning
USE CLASS
.bg-color-warning
.bg-color-inside-warning
Info
USE CLASS
.bg-color-info
.bg-color-inside-info
Success
USE CLASS
.bg-color-success
.bg-color-inside-success
bg-color-primary-noreverse
Posa el fons de color pero no modifica el color del text. Es fa servir, en les ocasions on s’han de combinar dos fons de color, on l’intern no modifica el color dels textos en reverse. Només hi ha l’opció noreverse per el bg-primary i el bg-secondary.
bg-color-secondary-noreverse
Posa el fons de color pero no modifica el color del text. Es fa servir, en les ocasions on s’han de combinar dos fons de color, on l’intern no modifica el color dels textos en reverse. Només hi ha l’opció noreverse per el bg-primary i el bg-secondary.
bg-color-bg-1-noreverse
Posa el fons de color pero no modifica el color del text. Es fa servir, en les ocasions on s’han de combinar dos fons de color, on l’intern no modifica el color dels textos en reverse. Només hi ha l’opció noreverse per el bg-primary i el bg-secondary.
bg-color-bg-2-noreverse
Posa el fons de color pero no modifica el color del text. Es fa servir, en les ocasions on s’han de combinar dos fons de color, on l’intern no modifica el color dels textos en reverse. Només hi ha l’opció noreverse per el bg-primary i el bg-secondary.
Escala de grises
Lightest
USE CLASS
.bg-color-lightest
.bg-color-inside-lightest
Lighter
USE CLASS
.bg-color-lighter
.bg-color-inside-lighter
Light
USE CLASS
.bg-color-light
.bg-color-inside-light
Medium
USE CLASS
.bg-color-medium
.bg-color-inside-medium
Dark
USE CLASS
.bg-color-dark
.bg-color-inside-dark
Darker
USE CLASS
.bg-color-darker
.bg-color-inside-darker
Darkest
USE CLASS
.bg-color-darkest
.bg-color-inside-darkest
Backgrounds
BG 1
USE CLASS
.bg-color-bg-1
.bg-color-inside-bg-1
BG 2
USE CLASS
.bg-color-bg-2
.bg-color-inside-bg-2
BG 3
USE CLASS
.bg-color-bg-3
.bg-color-inside-bg-3
BG 4
USE CLASS
.bg-color-bg-4
.bg-color-inside-bg-4
USE CLASS
.bg-color-bg-1
.bg-color-inside-bg-1
USE CLASS
.bg-color-bg-2
.bg-color-inside-bg-2
Headings
H1.hero - heading - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
H1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
H2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
H3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
H4 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
H5 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
H6 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Text
xs – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo
sm – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo
md – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo
lg – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo
xl – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Section
.accent-color
.muted
Section
Forms - Ninja form
Forms - Ninja form .form-reverse
Box border
Class a les columnes:
.bg-color-inside-cwhite
.box-border
Box shadow
Class a les columnes:
.bg-color-inside-cwhite
.box-shadow
.section
Add Your Heading Text Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
A la columna: .bg-color-cwhite
A innersection: .section-no-gutter