Encabezados / Headings
El estílo de los encabezados no depende de elementos de html.Deberás considerar las etiquetas h1, h2 , h3, h4 ,h5 y h6 solo para optimización SEO. Para estílos unicamente deberas considrar las clases listadas a continuación.
En esta guía de estílos se muestran los elementos gráficos que componene la estructura del sitio Chema Tierra por diseño.
Cualquier implementación al diseño y maquetación deberá seguir estos elementos para mantener la escencia e identidad del sitio en todo momento.
Los elementos de html en esta guia de estílo aunque no presentan una estructura de componentes web deberán tratarse como "componentes", dichos componentes contienen bloques de html que en conjunto con estilos de css forman el diseño de cada elemento.
Las clases que conforman esta guía de estílos deberán incluir el prefijo ui- para distinguirlas como las clases que componen los elementos de diseño del sitio, p.ej. .ui-title .ui-elemento
Las adiciones que se hagan a esta guía de estilos deberan incluirse únicamente en el documento en scss/_ui.scss Es decir todos los selectores que contengan el prefijo ui deberán incluirse en dicho archivo.
Los estílos que se utilizan para la estructura general del sitio, scripts u otras acciones deberán incluir un prefijo distinto o no incluirlo.
Para la funcionalidad añadida mediante scripts y que requiera de un selector de algún elemento de html se recomienda añadir una clase específica para dicho script. Este selector no deberá compartir/incluir clases de la guía de estílos (con el prefijo ui) o con clases relacionadas al layout / estructura del sitio.
<h1 class="ui-title-mega-big">TÍTULO M BIG</h1>
<h1 class="ui-title-extra-big">Título X Big</h1>
<h1 class="ui-title-big">Título Big</h1>
<h1 class="ui-title">Título</h1>
<h1 class="ui-title-small">Título Small</h1>
HelpText
<p class="ui-help-text"><strong>Help</strong>Text</p>
Paragraph text
<p>Paragraph text 14px</p>
Paragraph text Big
<p class="ui-paragraph-big">Paragraph text big 20px</p>
Label text
<p class="ui-label-text">Label text</p>
Esta guía incluye estílos predefinidos para situaciones comunes de texto como: peso, color, decoración, alineación
Abajo se listan las clases que modifican la forma en que se visualiza el texto.
Color de texto
Para modificar la paleta de color será necesario modificar los valores de las variables que definen cada color en scss/_vars.scss
Existen dos sets de colores, los colores principales definidos como Main y Secondary
Text main Text secondary
<p class="ui-text-main">Text main</p>
<p class="ui-text-secondary">Text secondary</p>
El segundo set de colores son complementarios
Text red Text gold Text white Text black Text black Text black
<p class="ui-text-red">Text red</p>
<p class="ui-text-gold">Text gold</p>
<p class="ui-text-white">Text white</p>
<p class="ui-text-black">Text black</p>
Es posible añadir un set de botónes basados en los colores principales.
Además es posible crear botónes a partir de colores complementarios al template:
.ui-button-[ $ghost ]-[ $color ] {
// estílos
}
$ghost
(opcional) Muestra un botón con outline sin fondo.
$color
(opcional) Muestra el botón con un color específico. Colores disponibles: main (color principal), secondary (color secundario), red, yellow, white, black, brown, pink, blue, gray
<a href="#" class="ui-button">Botón</a>
<a href="#" class="ui-button-main">Botón</a>
<a href="#" class="ui-button-secondary">Botón</a>
<a href="#" class="ui-button-red">Botón</a>
<a href="#" class="ui-button-yellow">Botón</a>
<a href="#" class="ui-button-white">Botón</a>
// Ghost
<a href="#" class="ui-button-ghost">Botón</a>
<a href="#" class="ui-button-ghost-secondary">Botón</a>
<a href="#" class="ui-button-ghost-red">Botón</a>
<a href="#" class="ui-button-ghost-yellow">Botón</a>
<a href="#" class="ui-button-ghost-white">Botón</a>
#LlevandoLaCienciaALasCalles