Manual de estilo
Tabla de contenidos
Layouts
Grilla
La grillas o retícula con que se diagrama el contenido en una página está basada en secciones que a su vez se componen en máximo 6 columnas con un ancho variable otorgadas por Elementor.
Una columna está anidada dentro de una sección, resultando una grilla inferior disponible dentro de un ancho determinado por la sección.
El comportamiento de estas secciones y columnas en diferentes dispositivos dependerá de las necesidades del diseño y como se ajusten según los breakpoints definidos más adelante.
Además el ancho máximo para diagramar contenido en el sitio web siempre será 1250px.
Breakpoints
Los breakpoints ejecutarán un cambio en el comportamiento o distribución de columnas, permitiendo la personalización de esta en diferentes momentos cuando la ventana del navegador tenga un ancho de:
- Inferior a 360px Adecuado para dispositivos móviles.
- Inferior a 768px Adecuado para tablets.
- Igual o mayor que 1200px Adecuado para monitores desktop estándar.
Secciones
Se encargan de contener columnas que a su vez contienen todos los elementos que componen una página. El ancho de los contenedores siempre debe estar marcado con la opción “Ancho fijo”. Este tiene un tamaño de 1200px. En pantallas menores a 1200px; utilizará el máximo disponible según el breakpoint que se ejecute.
Columnas
Son el principal contenedor de elementos dentro de una sección y la cantidad de columnas dentro de una sección dependerá de las necesidades del diseño. Una sección puede contener hasta 6 columnas en una misma sección, si la cantidad de columnas supera esa cantidad automáticamente se desplazarán hacia abajo, generando así una nueva fila.
Secciones
Header
El header es un elemento que se compone por el menú principal y un menú superior e inferior con diferentes niveles de acceso, el cual, puede variar dependiendo del usuario que esté navegando.
Menú superior
El menú superior es una sección creada para dar acceso rápido a la información de primera mano para cada uno de los usuarios del sitio web; además tener un acceso constante al SICAU, las redes sociales de la Institución y el cambio de idioma para el sitio.
Menú principal
El menú principal, como componente de navegación, comparte los principales accesos del sitio web y las categorías en las que se encuentran alojados la mayor cantidad de contenidos.
Colores
La siguiente paleta presenta los colores principales en los cuales se basa toda la comunicación de la INSTITUCIÓN UNIVERSITARIA PASCUAL BRAVO.
La siguiente paleta presenta los colores se basa en toda la comunicación destinada a los diferentes perfiles de usuario de la institución.
Tipografía
Las tipografías de ROBOTO CONDENSED y OPEN SANS corresponden a las tipografías corporativas que se encuentran en el sitio web de la INSTITUCIÓN UNIVERSITARIA PASCUAL BRAVO.
