Personalización

Sistema de colores

Salvo en el caso de poner un fondo gris no recomendamos cambiar colores de tipografía o fondos. Igualmente, dejamos la posibilidad de hacerlo.

Los nombres para los colores son:

primary, primary-dark, secondary, black, white, gray, gray-light, gray-dark

Color de texto

Aunque todos los ejemplos de código están con la etiqueta p, se puede aplicar en cualquier etiqueta de texto: p, span, h1, h2 o h3.

<p class="text-primary">...</p>
<p class="text-primary-dark">...</p>
<p class="text-secondary">...</p>
<p class="text-black">...</p>
<p class="text-white">...</p>
<p class="text-gray">...</p>
<p class="text-gray-light">...</p>
<p class="text-gray-dark">...</p>

Color de fondo

Siguen la misma estructura que los colores de texto. Se pueden usar en cualquier etiqueta.

<div class="bg-primary">...</div>
<div class="bg-primary-dark">...</div>
<div class="bg-secondary">...</div>
<div class="bg-black">...</div>
<div class="bg-white">...</div>
<div class="bg-gray">...</div>
<div class="bg-gray-light">...</div>
<div class="bg-gray-dark">...</div>

Etiquetas

Las etiquetas deben usarse con etiquetas span. Si se usan con otras etiquetas se producirá un efecto desagradable.

Hay cuatro colores diferentes para las etiquetas. Tres colores requieren una clase extra y si se omite el color la etiqueta será de color negro.

<span class="label">Etiqueta negra</span>
<span class="label label-green">Etiqueta verde</span>
<span class="label label-red">Etiqueta roja</span>
<span class="label label-yellow">Etiqueta amarilla</span>

Enlaces

Enlaces estándar

Los enlaces normales, dentro del texto, deben estar dentro de una etiqueta p sino se pueden producir efectos indeseados.

<p>Esto es un párrafo con un <a href="#" target="_blank" title="Title del enlace">enlace normal</a></p>

Botones

Si queremos utilizar botones los enlaces deben estar fuera de una etiqueta p y llevas las siguientes opciones.

<a class="btn" href="#" title="Title del enlace">Boton outline</a>
<a class="btn btn-big" href="#" title="Title del enlace">Boton outline grande</a>
<a class="btn btn-fill" href="#" title="Title del enlace">Boton relleno</a>
<a class="btn btn-fill btn-big" href="#" title="Title del enlace">Boton relleno grande</a>

Arrow links

Los enlaces con la flecha animada debes ir solos y llevar la clase arrow-link como se muestra en el ejemplo.

<a href="#" class="arrow-link" title="Title del enlace">Leer más</a>