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.
Esta paleta de color debe ser añadida directamente al panel, esta sección es netamente de ejemplo
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
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
Técnicamente se usan las mismas clases de las imágenes, pero quien determina el tamaño es el marco/ div contenedora
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
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
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
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
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"
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
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.