Hoja de Estilos Proyectos Palma de Web

En esta guía se encuentran todos los estilos base de textos 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. Antes de empezar a usarlas se deben configurar modo responsive.

Reglas de Uso

  1. Todos los textos deben empezar por una de las clases de la hoja de estilos.
  2. No debe haber ninguna combo clase de tamaño, posición o margen. Si lo requiero se debe meter dentro un DivBlock.
  3. Todo título/subtítulo debe tener la categoría H# a la que pertenece.
  4. Puede haber varias alternativas de un mismo H, siempre y cuando estén en esta hoja de estilos.

Reglas de Uso

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

Definir paleta de color

Esta paleta de color debe ser añadida directamente al panel, esta sección es netamente de ejemplo

Clases de Heading

H1

H2

H3

H4

H5
H5

Ejemplo

H1 (Centro)(Color)

H5 (Centro)

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.

Recomendaciones: Si pueden editar la clase estándar/primaria del párrafo o el body, para ahorrarse algunas cosas que saben que no van a cambiar, es mejor que crear la clase. Dejo capturas. De hecho, si se fijan, en la clase de "Párrafo, no modifique nada".

Muchos de los tamaños dependen de las tipografías, algunas son más grande y otras más pequeñas

Imágenes

Recomendaciones: Solo van a existir dos clases de imágenes (una de ellas con sublcases), 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

image_cover(Top)

image_cover(Bot)

image_cover

image_cover(izq)

image_cover(der)

Iconos

Técnicamente se usan las mismas clases de las imágenes, pero quien determina el tamaño es el marco/ div contenedora

Icono < image_contain

Icono (peque)< image_contain

Botones

Aquí incluirán sus propios botones, aquí no hay mucho que decir, todos solemos personalizar los botones para cada proyecto desde animaciones, hasta algo más clásico.

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

Tener un botón para fondos claros

Button Text

Otros para fondos oscuros

Button Text

boton(space)

Botón con mayor margen superior

Button Text

Secciones

Aquí cree secciones de colores (deberán borrar estas sub clases una vez copiado)para que distingan las diferencias. El uso de estas 3 son obligatorias, pueden añadir subclases específicas. Aquí le dejo unas de ejemplo:

Secction (Entrada): Una sección que cuenta con más padding en top ya que el menú ocupa espacio o puede que sea es más pequeña 50vh -70vh

Section (Home): Puede que tenga una alineación diferente, y un mayor pading en top, y que tenga una altura especifica 70 vh _120 vh etc.

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 conteiner horizontal que se encentra aquí mismo

2. Se encuentran en relativo con un valor de z-index de "1" Por si desean incluir elementos en absoluto y que estos no les exploten

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, pero lo que esta subclase permite es que en caso de que el contenido ocupe más espacio, no se desborde y siga "creciendo"

Section_auto

Esta sección es totalmente automática en caso de que el contenido no requiera un espacio mayor a 100 vh, en ese caso usaríamos la subclase superior

Extra

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