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
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
Es un hecho establecido hace demasiado tiempo que un lector
Estos textos hacen parecerlo un español que se puede leer.
Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido.
El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí".El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras.
El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí".
El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí".
El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí".
Text
xs – Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar. Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar. Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar.
sm – Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar. Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar. Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar.
md – Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar. Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar. Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar.
lg – Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar. Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar. Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar.
xl – Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar. Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar. Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar.
Section
.accent-color
.muted
Forms - Ninja form
Box shadow
Class a les columnes:
.bg-color-inside-cwhite
.box-shadow
.bg-color-inside-cwhite
Box shadow
Class a les columnes:
.bg-color-inside-cwhite
.box-shadow
.bg-color-inside-cwhite
.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