Alineación

Texto a la izquierda

Texto al centro

Texto a la derecha

Texto justificado


<p class="text-left">
  Texto a la izquierda
</p>
<p class="text-center">
  Texto al centro
</p>
<p class="text-right">
  Texto a la derecha
</p>
<p class="text-justify">
  Texto justificado
</p>

Colores

Fondos

Un color principal y un color de acénto.

Fondo de color primario


<div class="bg-primary to-bg-step4"></div>
<div class="bg-primary to-bg-step3"></div>
<div class="bg-primary to-bg-step4"></div>
<div class="bg-primary to-bg-step2"></div>
<div class="bg-primary"> Fondo de color primario </div>
<div class="bg-primary to-color-step1"></div>
<div class="bg-primary to-color-step2"></div>

Fondo de color acénto


<div class="bg-accent to-bg-step4"></div>
<div class="bg-accent to-bg-step3"></div>
<div class="bg-accent to-bg-step4"></div>
<div class="bg-accent to-bg-step2"></div>
<div class="bg-accent"> Fondo de color acénto </div>
<div class="bg-accent to-color-step1"></div>
<div class="bg-accent to-color-step2"></div>

Fondos

Escala de grises.

Fondo blanco


<div class="bg-white to-bg-step4"></div>
<div class="bg-white to-bg-step3"></div>
<div class="bg-white to-bg-step4"></div>
<div class="bg-white to-bg-step2"></div>
<div class="bg-white"> Fondo blanco </div>
<div class="bg-white to-color-step1"></div>
<div class="bg-white to-color-step2"></div>

Fondo negro


<div class="bg-black to-bg-step4"></div>
<div class="bg-black to-bg-step3"></div>
<div class="bg-black to-bg-step4"></div>
<div class="bg-black to-bg-step2"></div>
<div class="bg-black"> Fondo negro </div>
<div class="bg-black to-color-step1"></div>
<div class="bg-black to-color-step2"></div>

Fondos

Del color de fondo general, al color de texto general.

Fondo general


<div class="bg-main-bg"> Fondo general </div>
<div class="bg-main-bg to-color-step1"></div>
<div class="bg-main-bg to-color-step2"></div>
<div class="bg-main-bg to-color-step3"></div>
<div class="bg-main-bg to-color-step4"></div>
<div class="bg-main-bg to-color-step5"></div>
<div class="bg-main-bg to-color-step6"></div>
<div class="bg-main-bg to-color-step7"></div>
<div class="bg-main-bg to-color-step8"></div>
<div class="bg-main-bg to-color-step9"></div>
<div class="bg-main-bg to-color-step10"></div>

Colores para texto

Color primario, de acénto, 'blanco', 'negro', color del texto en general y color del fondo general. Todos éstos estilos están basados en las variables de color de la librería, editables en el archivo de _vars.sass.

Texto de color primario

Texto de color de acénto

Texto blanco

Texto negro

Color del texto general

Color del fondo general


<div class="color-primary">Texto de color primario</div>
<div class="color-accent">Texto de color de acénto</div>
<div class="color-white">Texto blanco</div>
<div class="color-black">Texto negro</div>
<div class="color-main-color">Color del texto general</div>
<div class="color-main-bg">Color del fondo general</div>