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-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.
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
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
.accent-color-reverse
.muted-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 section: .bg-color-secondary-noreverse o .bg-color-primary-noreverse
A la columna: .bg-color-cwhite
A innersection: .section-no-gutter
Aquest formulari amaga el missatge de indicacions:
Class al widget: form-indications-hidden
Aquest formulari és tipus newsletter:
Class al widget: form-newsletter
Per ubicar el botó de submit a esquerra, dreta o centre es posa una de les class següents al CSS Class box del widget:
form-submit-left / form-submit-right / form-submit-center
Per canviar el color del submit a un altre tipus de botó cal fer servir la class segons es necessiti:
form-submit-default / form-submit-info / form-submit-warning / form-submit-success / form-submit-danger
Per posar el botó a full width: form-submit-fullwidth
Per a que no aparegui la franja on surt el missatge de camps obligatoris: form-indications-hidden
Per canviar el color dels botons prev/next a un altre tipus de botó cal fer servir la class segons es necessiti:
form-steps-buttons-default / form-steps-buttons-info / form-steps-buttons-warning / form-steps-buttons-success / form-steps-buttons-danger