Hoja de estilos

En esta guía se encuentran todos los estilos base de los elementos usados a lo largo del sitio web para garantizar uniformidad y estructura exitosa. Antes de iniciar con esta guía se debe agregar la paleta de colores del proyecto y las tipografías a usar.

Reglas de uso

Todos los textos deben empezar por una de las clases de la hoja de estilos.
No debe haber ninguna combo clase de tamaño, posición o margen. Si lo requiero se debe meter dentro un DivBlock.
Todo título/subtítulo debe tener la categoría H# a la que pertenece.

(Clase H#) (Alineación) (Color)

Definir paleta de color

La paleta de color debe ser añadida directamente en "style selectors", esta sección es netamente de ejemplo

Clases de Heading

H1

H2

H3

H4

H5

H6

Ejemplos

H1 (center)

H1 (center)(color)

H3 (center)

H3 (center)(color)

Clases de Párrafo

Párrafo: Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Párrafo (center) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Párrafo (der) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Imágenes

Pueden crear las clases necesarias para imágenes, sin embargo, recomiendo crear dos clases de imágenes principales con sus respectivas subclases, con excepción de que la quieran con un backgroung o un background con efecto fix.

‍OJO, aquí nos fijamos en la clase de la imagen más no el contenedor de esta.

image_contain

image_cover

Ejemplos de subclases

image_cover (top)

image_cover (bot)

image_cover (izq)

image_cover (der)

Iconos

Se usan las mismas clases de las imágenes, pero quien determina el tamaño es el div que contiene la imagen.

Icono < image_contain

Icono (peque) < image_contain

Botones

Aquí incluirán sus propios botones, se pueden personalizar los botones para cada proyecto, desde animaciones, hasta algo más clásico.

Recomiendo tener mínimo 2 botones y les doy una idea de subclases que yo suelo utilizar.

Secciones

Utilizo 2 secciones base, le agregue clase de color para que entiendan las diferencias. El uso de estas 2 secciones facilitara la contruccion del proyecto y asi mismo adaptar la página a las diferentes versiones. Pueden añadir subclases específicas.

Aclaraciones:

1. Estas secciones cuentan con alineación vertical, si desean añadir elementos que se centren en frente/paralelo es necesario el uso de un contenedor horizontal.

‍
2. Se encuentran en relativo con un valor de z-index de "1" Por si desean incluir elementos en absoluto.

3. Todas las secciones cuentan con un padding de top y bot de 10 vh y un padd de 5vw en left y right

4. Jamás le den un ancho de 100vw esto causa que aparezca la barra de desplazamiento inferior

Section_100

Esta sección alinea los elementos verticalmente centrados y tiene un alto de 100vh. Posiblemente en responsive deban dejar el alto en automático, esto dependerá de la cantidad de contenido.

Section_100 (Auto)

Esta sección también alinea los elementos verticalmente centrado y mantiene una medida mínima de 100 vh. Lo que permite esta subclase, en caso de que el contenido ocupe más espacio, no se desborde y siga "creciendo".

Section_auto

Esta sección también alinea los elementos verticalmente centrados, tiene un alto automático. La altura la definirá los elementos que se agreguen a la sección.

Recomendación final

Intenta aprovechar las clases modificadas en limpio lo más que puedan, en este caso no fue necesario crear clases para "List" y "List Item" pero sí modificar la clase madre/ principal.