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
H6

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

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 2 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_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

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"

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

¡Rompe la piñata!

Recuerda: la piñata es la primera propuesta gráfica del home que puedes coger a palo para  poder definir la línea gráfica de tu página y solo la puedes ver desde tu computador.

1

Esta es la primera propuesta de tu piñata

Todavía NO está disponible en versión móvíl (celulares, tablet)

Todos los textos e imágenes  son de referencia, se pueden reemplazar.

Hay botones que aún no son funcionales, no te preocupes.

2

Estas son las tres claves para poder avanzar con las páginas internas

  • Contenido
  • Contenido
  • Contenido

def. Contenido: los textos e imágenes que quieres presentar en tus páginas internas (ej. Servicios, nosotros, contacto, etc.)

Confirmo que he leído los pasos, me comprometo a llenar la encuesta y enviar el contenido para poder continuar con el proceso de mi página.
Para avanzar con el proceso no olvides responder la encuesta de retroalimentación aquí