×

Contingencia 1

Conoce la información oficial más reciente sobre esta
emergencia. Estamos actualizando constantemente.

×

Contingencia 2

Conoce la información oficial más reciente sobre esta
emergencia. Estamos actualizando constantemente.

×

Contingencia 3

Conoce la información oficial más reciente sobre esta
emergencia. Estamos actualizando constantemente.

×

Contingencia 4

Conoce la información oficial más reciente sobre esta
emergencia. Estamos actualizando constantemente.

×

Contingencia 5

Conoce la información oficial más reciente sobre esta
emergencia. Estamos actualizando constantemente.

Otras Contingencias

Contingencia 1

Bajada ipsum dolor sit amet, consectetur adipiscing elit, sed ipsum dolor set it a me do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Contingencia 2

Bajada ipsum dolor sit amet, consectetur adipiscing elit, sed ipsum dolor set it a me do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Contingencia 3

Bajada ipsum dolor sit amet, consectetur adipiscing elit, sed ipsum dolor set it a me do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Contingencia 4

Bajada ipsum dolor sit amet, consectetur adipiscing elit, sed ipsum dolor set it a me do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Contingencia 5

Bajada ipsum dolor sit amet, consectetur adipiscing elit, sed ipsum dolor set it a me do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Encuentra mas información

Onemi

Bajada ipsum dolor sit amet, consectetur adipiscing elit, sed ipsum dolor set it a me do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Shoa

Bajada ipsum dolor sit amet, consectetur adipiscing elit, sed ipsum dolor set it a me do eiusmod tempor incididunt ut labore et dolore magna aliqua.

X

Framework kit Gobierno

Conjunto de herramientas para el diseño y diagramación de sitios y aplicaciones web de gobierno. Contiene plantillas de formularios, botones, cuadros, menús de navegación y otros elementos de diseño. Basado en Twitter Bootstrap.

1. Comenzando

Mediante NPM

Este paquete está en NPM y puede ser descargado con npm mediante el siguiente comando:

npm i @gobdigital-cl/gob.cl

Para utilizar este framework, es necesario incluir los siguientes archivos que vienen dentro de la carpeta dist el paquete de NPM.

  • JS: @gobdigital-cl/dist/js/gob.cl.js
  • CSS: @gobdigital-cl/dist/css/gob.cl.css
  • CSS: @gobdigital-cl/dist/css/gob.cl.css

Este framework depende de Bootstrap 4, por lo que se debe incluir dentro del sitio, como se muestra en el ejemplo más abajo.

También es necesario las tipografías Roboto y Robot Slab, las cuales se puede descargar con Google Fonts como muestra el ejemplo.


                      

También puede ser usado desde Sass importando el .scss. Un ejemplo de integración con Sass sería el siguiente:

Variables: _variables.scss


                      

Estilo: style.scss


                    

Recomendaciones

  • El body debe tener 3 tags de HTML anidados:
    1. header
    2. main
    3. footer
  • Los scripts de javascript, deben ir al final del body para que el sitio. Los scripts se cargan de manera secuencial y bloquean el resto de la carga. Colocarlos al final permite que elementos y css carguen primero.

Mediante CDN

Próximamente

Modificar este framework con Sass

El Framework al igual que bootstrap fue escrito en Sass y puede ser modificado utilizando sus variables, mixins, mapas y más.

El mejor lugar para aprender a modificar el estilo del framework es la documentación de bootstrap

Se recomienda no modificar la diagramación ni los elementos que apuntan a una mejor accesibilidad.

A modo de ejemplo, puedes crear un nuevo archivo custom-gob.cl.scss el que incluye el archivo original y modificaciones a las variables que quieras realizar. En el siguiente ejemplo, cambiaremos el color primary por un azul más oscuro:

@import "carpeta_del_framework/src/scss/gob.cl";$primary: #0A132D;

Luego, en vez de utilizar el css del framework en el sitio, se podría utilizar el nuevo custom-gob.cl.scss

2. Bootstrap

Este Framework está basado en Bootstrap 4 por lo que adicionalmente pueden usarse todas las herramientas que este ofrece. La documentación de Bootstrap se puede encontrar en el siguiente:link.

3. Tipografía

La tipografía elegida para ser utilizada en este kit es Roboto, en sus familias Roboto y Roboto Slab. Esta tipografía fue seleccionada por ser una familia diseñada para facilitar la lectura, sobre todo en móviles, ya que es la tipografía por defecto en dispositivos con sistema operativo Android.

Roboto

Es la tipografía base del kit. Debe ser utilizada por defecto en todos los textos del sitio que no sean títulos. Los tamaños y jerarquías están indicados más abajo.

Aa

abcdefghijklmnñopqrstuvwxyz. 1234567890 -=[];',./!@#$%^&*()_+.

ABCDEFGHIJKLMNÑOPQRSTUVWXYZ. 1234567890 -=[];',./!@#$%^&*()_+.

Roboto Slab

Es la tipografía para destacar los títulos de las secciones del sitio. Sólo debe ser ocupada en títulos, ya que es una tipografía con un peso visual importante en comparación a Roboto regular.

Aa

abcdefghijklmnñopqrstuvwxyz. 1234567890 -=[];',./!@#$%^&*()_+.

ABCDEFGHIJKLMNÑOPQRSTUVWXYZ. 1234567890 -=[];',./!@#$%^&*()_+.

gobCl

Es la tipografía oficial del Gobierno de Chile. Sólo puede ser ocupada en títulos y llamados de acción.

Aa

abcdefghijklmnñopqrstuvwxyz. 1234567890 -=[];',./!@#$%^&*()_+.

ABCDEFGHIJKLMNÑOPQRSTUVWXYZ. 1234567890 -=[];',./!@#$%^&*()_+.

Estilos tipográficos

H1

font-family: Roboto Slab;
font-size: 2.4rem;
font-weight: 400;

H2

font-family: Roboto Slab;
font-size: 1.6875rem;
font-weight: 400;

H3

font-family: Roboto Slab;
font-size: 1.4375rem;
font-weight: 400;

H4

font-family: Roboto;
font-size: 1.25rem;
font-weight: 400;
H5
font-family: Roboto Slab;
font-size: 1.25rem;
font-weight: 400;
H6
font-family: Roboto Slab;
font-size: 1.125rem;
font-weight: 400;
Body Default

Texto por defecto a usar.

font-family: Roboto;
font-size: 1rem;
font-weight: 400;
color: #212529;

Párrafos

Texto para párrafos.

font-family: Roboto;
font-size: 1rem;
font-weight: 400;
color: #4a4a4a;
Links

Texto utilizado en descripciones que funcionen como enlaces.

font-family: Roboto;
font-size: 1rem;
font-weight: 400;
color: #111;
Small

Texto utilizado para detalles complementarios

font-family: Roboto;
font-size: .6875rem;
font-weight: 400;
color: #212529;
Citas

Texto utilizado para crear citas.

font-family: Roboto;
font-size: 1rem;
font-style: italic;
font-weight: 400;
color: #4a4a4a;

4. Colores

La paleta de colores que se eligió para el kit responde a la necesidad de mantener la identidad de los colores que componen el sistema de marcas del gobierno pero llevados a un plano más digital.

Es importante mencionar, que los colores provistos por bootstrap están también soportados y pueden ser vistos acá.

Colores Primarios

Terciario
(tertiary)
#E22C2C
Primario
(primary)
#001C41
Secundario
(secundary)
#0F69B4

Colores Secundarios

Verde
(green)
#2D717C
Anaranjado oscuro
(orange-a)
#E0701E
Anaranjado claro
(orange-b)
#FFA11B
Morado
(purple)
#6633CC
Negro
(black)
#111111
Gris oscuro
(gray-a)
#4A4A4A
Acentuar
(gray-b)
#8A8A8A
Neutral
(neutral)
#EEEEEE
Blanco
(white)
#FFFFFF

Estos colores, tienen entre paréntesis el nombre del color en el framework que pueden ser utilizados para colorear los distintos componentes del framework. Bootstrap 4 ya trae una lista de colores y las clases de css para utilizarlas. Este framework extiende las mismas funcionalidades con los colores previamente definidos.

Utilización de colores

Títulos
black
Párrafos
gray-a
Íconos
gray-b
Fondo
white
Bordes
accent

Colores del logo

primary
secondary
dark

Ejemplos

Texto con color "primary"
Texto con color "secondary"
Texto con color "tertiary"
Texto con color "accent"
Texto con color "gray-a"
Texto con color "gray-b"
Texto con color "gray-c"
Alert de bootstrap con fondo "accent" y borde "primary"

                      

Elheader es un elemento importante dentro del cuerpo de cualquier sitio web, contiene la imagen corporativa de la institución, un menú de navegación principal y la posibilidad de tener un menú secundario y un buscador.

Como la estructura de navegación se basa en la estructura de Bootsdtrap, los estados activos (con.active) para indicar que la página actual se puede aplicar directamente a los.nav-link o sus elementos.nav-item inmediatos.

Ejemplo de Header


                  

Es posible agregar el logotipo del sitio web, simplemente insertando la imagen dentro de la etiqueta.logo. Cuando el sitio web se visualiza en una resolución para móviles, el logotipo es reemplazado por medio de la hoja de estilos por un logotipo estandar. Este logotipo se mantendrá en todas las resoluciones.

En el caso de no tener un logotipo o que el logotipo de la institución pierda lectura por el reducido tamaño, el Kit también otorga la posibilidad de ingresar texto, generando un logotipo con el formato del isologo reducido, Para esto, se debe agregar la etiqueta con clase.lg-logo-text dentro de.logo junto con su estructura html segun el siguiente ejemplo:


                  

Entendiendo que el sitio web pueda tener otros colores de fondo, aplicando el estilo .bg_dark directamente en la etiquetanav se lograrán el siguientes resultado


                  

6. Secciones

Una recomendación, es que el sitio se divida en secciones, como se muestra a continuación:

Ejemplo de título de la sección

Este sería el contenido de la sección


                    

Para implementar una sección, se debe crear primero un elemento section.section, el cual tiene 3 elementos hijos: un encabezado div.section-header un cuerpo div.section-body y una acción div.section-action.

A modo de ejemplo, este sitio está dividido en secciones, esta sección tiene en su encabezado un tag h2 con el título "6. Secciones", y un cuerpo que es este párrafo con los ejemplos. Una forma de hacer separación entre las distintas secciones es con las clases demargen de bootstrap 4.

En el siguiente ejemplo ejemplo utilizaremos la clase.mt-3 para incluir un margen superior y separar esta sección de la anterior:

Otra recomendación, es colocar un borde inferior al título de la sección. En el ejemplo anterior, logramos esto utilizando las clases debordes y de bootstrap 4. El color del borde, lo logramos con clases de colores para borde explicadas en la sección decolores.

7. Geo-referencial

Ejemplos para estructuras tipo para páginas de búsqueda de sucursales o puntos geolocalizados, la estructura incluye detalle de una "casa matriz".


                  

Geo-referencial Detalle

Un resultado de busqueda supondrá una estructura con detalle del resultado, pero también con la capacidad de poder seguir buscando resultados:


                  

8. Botones

Los botones de este kit abarcan todas las necesidades que deberían cubrir este tipo de elementos, por lo que no se deben ocupar otros botones.

Botón principal

El botón principal de este kit siempre es este. El resto de botones se debe usar a criterio de quien esté poniendo en práctica el kit siempre priorizando los botones que corresponden a la paleta de colores principales.
Para botones con tamaño por defecto agregue la clase .btn-default-size

Botones secundarios


                

9. Íconos

El framework incluye un conjunto de íconos que vienen en el font "gob-cl"

cl-youtube
cl-instagram
cl-facebook
cl-twitter
cl-mess
cl-search
cl-agenda
cl-agendarhora
cl-alerta
cl-ayuda
cl-beneficios
cl-boot
cl-callcenter
cl-cargar
cl-cerrar
cl-certificado_1
cl-claveunica
cl-contraste
cl-descargar
cl-editar
cl-filtro
cl-hablar
cl-img
cl-info
cl-like
cl-link
cl-login
cl-lupa
cl-mas
cl-menos
cl-menu
cl-no-like
cl-notificacion
cl-pause
cl-play
cl-print
cl-sound
cl-sucursales
cl-telefono
cl-trash
cl-ver
cl-mail-alt

10. Componentes Presentacionales

Los componentes presentacionales sirven para mostrar de manera sencilla e intuitiva información a los usuarios

Noticias

Este componentes presenta la información general de una noticia con lead

Proyecto
13 de Julio de 2018

Jurado al estilo “Masterchef” elige el mejor pan de pascua FOSIS

“Donde la Tía Maggi” fue la preparación ganadora según la experta opinión de Yann Yvin, Daniela Castro y Daniel Greve, quienes escogieron entre cuatro distintos panes de pascua de mujeres emprendedoras en la Plaza de Armas de Santiago.

Proyecto
13 de Julio de 2018

Jurado al estilo “Masterchef” elige el mejor pan de pascua FOSIS

“Donde la Tía Maggi” fue la preparación ganadora según la experta opinión de Yann Yvin, Daniela Castro y Daniel Greve, quienes escogieron entre cuatro distintos panes de pascua de mujeres emprendedoras en la Plaza de Armas de Santiago.

Proyecto
13 de Julio de 2018

Jurado al estilo “Masterchef” elige el mejor pan de pascua FOSIS

“Donde la Tía Maggi” fue la preparación ganadora según la experta opinión de Yann Yvin, Daniela Castro y Daniel Greve, quienes escogieron entre cuatro distintos panes de pascua de mujeres emprendedoras en la Plaza de Armas de Santiago.


                  

Este componentes presenta la información general de una noticia

Lorem ipsum dolor sit amet, consectetur adiscing elit

Cras ligula neque, ullamcorper vel mattis in, auctor ac massa. Vestibulum in.

Lorem ipsum dolor sit amet, consectetur adiscing elit

Cras ligula neque, ullamcorper vel mattis in, auctor ac massa. Vestibulum in.

Lorem ipsum dolor sit amet, consectetur adiscing elit

Cras ligula neque, ullamcorper vel mattis in, auctor ac massa. Vestibulum in.


                  

Este componentes presenta la información general de una noticia

Jurado al estilo “Masterchef” elige el mejor pan de pascua FOSIS

Ver más

Jurado al estilo “Masterchef” elige el mejor pan de pascua FOSIS

Ver más

Jurado al estilo “Masterchef” elige el mejor pan de pascua FOSIS

Ver más

                  

Destacados

Este componente presenta la información general de un elemento destacado


                  

Detalle de noticia

Este componente presenta la información general del detalle de una noticia

Post

ipsum dolor sit amet

adipiscing elit
Autor Name (o Institución)13 de Julio de 2018

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut odio pretium, semper metus quis, congue lectus. Morbi imperdiet dui tellus, et bibendum dui posuere ut. Vestibulum vitae sem nibh. Curabitur vel ipsum volutpat, sollicitudin sapien id, eleifend tortor. Suspendisse lectus felis, pulvinar vitae mollis a, blandit eget nunc. Ut sed tellus risus. Sed quis iaculis ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent at urna imperdiet sem pellentesque luctus. Cras at nisl arcu. Nulla ullamcorper at metus et molestie. Maecenas imperdiet pharetra ornare.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut odio pretium, semper metus quis, congue lectus. Morbi imperdiet dui tellus, et bibendum dui posuere ut. Vestibulum vitae sem nibh. Curabitur vel ipsum volutpat, sollicitudin sapien id, eleifend tortor. Suspendisse lectus felis, pulvinar vitae mollis a, blandit eget nunc. Ut sed tellus risus. Sed quis iaculis ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent at urna imperdiet sem pellentesque luctus. Cras at nisl arcu. Nulla ullamcorper at metus et molestie. Maecenas imperdiet pharetra ornare.

"Maecenas quis urna molestie, maximus ex ut, porttitor enim. Etiam interdum felis quis risus fermentum pretium."

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut odio pretium, semper metus quis, congue lectus. Morbi imperdiet dui tellus, et bibendum dui posuere ut. Vestibulum vitae sem nibh. Curabitur vel ipsum volutpat, sollicitudin sapien id, eleifend tortor. Suspendisse lectus felis, pulvinar vitae mollis a, blandit eget nunc. Ut sed tellus risus. Sed quis iaculis ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent at urna imperdiet sem pellentesque luctus. Cras at nisl arcu. Nulla ullamcorper at metus et molestie. Maecenas imperdiet pharetra ornare.

Comparte esta noticia

                  

Data Card

Este componente presenta información que puede ser acompañada por un dato numérico

120
trámites por digitalizar

Cras ligula neque, ullamcorper vel mattis in, auctor ac massa. Vestibulum in pulvinar tortor, ut viverra turpis.

23
trámites digitalizados

Cras ligula neque, ullamcorper vel mattis in, auctor ac massa. Vestibulum in pulvinar tortor, ut viverra turpis.

177
trámites, aún no digitalizados

Cras ligula neque, ullamcorper vel mattis in, auctor ac massa.

200
trámites en total

Cras ligula neque, ullamcorper vel mattis in, auctor ac massa.

0
sin revisar

Cras ligula neque, ullamcorper vel mattis in, auctor ac massa.


                  

11. Perfiles

Página de perfil

Cuando se tiene una página que muestra un perfil, se puede utilizar el siguiente componente. El siguiente ejemplo, muestra como sería una página dedicada al presidente de la república.

Nombre

Nombre del cargo

Información de contacto:

Familia

Sebastián Piñera Echenique nació en Santiago de Chile, el 1 de diciembre de 1949, hijo de José Piñera Carvallo (1917-1991) y Magdalena Echenique Rozas (1919-2000). Fue el tercero de seis hermanos. Estudió en el colegio de los padres alemanes del Verbo Divino (1955-1964), donde destacó como uno de los mejores alumnos y como miembro del Movimiento Scout. De su educación destaca que fue cristiana, plural, con mucha libertad, sentido del deber y una fuerte vocación de servicio público.

Tras el triunfo del Presidente Eduardo Frei Montalva (1964), su padre fue nombrado Embajador de Chile en Bélgica. En 1967, su padre asumió la Embajada de Chile en la Organización de Naciones Unidas (ONU) y volvió a Chile terminar el último año de Colegio en el Verbo Divino.

En 1973 se casó con Cecilia Morel Montes, orientadora familiar y juvenil del Instituto Carlos Casanueva y licenciada en Familia y Relaciones Humanas de la Universidad Mayor. Juntos, son padres de Magdalena (1975), Profesora de Historia y Geografía; Cecilia (1978), Médico Pediatra; Sebastián (1982), Ingeniero Comercial y Cristóbal (1984), Psicólogo. Juntos son abuelos de ocho nietos, más un noveno en camino.

Docente y Emprendedor

En 1968, ingresó a la Facultad de Economía de la Pontificia Universidad Católica de Chile. Más tarde se tituló como Ingeniero Comercial, distinguido con el Premio Raúl Iver al mejor alumno de la generación. Viajó a Estados Unidos en 1973 para obtener un Master y un Doctorado en Economía en la Universidad de Harvard, relacionándose con destacados economistas, varios de ellos Premios Nobel.

En 1976, al volver a Chile se dedicó prioritariamente a la docencia impartiendo clases en las Facultades de Economía de la Pontificia Universidad Católica de Chile, Universidad de Chile y Universidad Adolfo Ibáñez.


                      

Sección: Perfil

En cambio, cuando el objeto de la página no es el perfil, pero se quiere mostrar un perfil destacado, se modifica a una versión más reducida. En el siguiente ejemplo, mostrarmos el perfil de una ministra en el contexto de la página de un miniesterio

Consuelo Valdés

Ministra de las culturas, las artes y el patrimonio.

Arqueóloga, con título revalidado en la Universidad del Norte, posee un Máster en Estudios Latinoamericanos con mención en Antropología de la Universidad de Alabama y un Diploma en Producción Audiovisual de la Universidad de Stanford.

Ha sido Subdirectora del Departamento Académico del Consejo de Rectores de las Universidades Chilenas, acompañando en la gestión al entonces Director Juan Gómez Millas.


                      

Componente: Perfil

Por último, si estamos mostrando una lista de perfiles, es mejor utilizar el componente de perfil. El siguiente ejemplo, utilizamos la grilla de bootstrap para mostrar una fila con dos columnas en la que cada una usa el componente de perfil.

Consuelo Valdés

Ministra de las culturas, las artes y el patrimonio.

Abogado de la Pontificia Universidad Católica (2002), Art Administration Certificate por la New York University (2007), y Master of Laws (LLM) y Law and Technology Certificate of University California, Berkeley (2009-2010). También es Bachiller en Ciencias Sociales y Humanidades de la PUC (1995-1996) y Licenciado en Estética (2002-2003) de la misma universidad.

Consuelo Valdés

Ministra de las culturas, las artes y el patrimonio.

Abogado de la Pontificia Universidad Católica (2002), Art Administration Certificate por la New York University (2007), y Master of Laws (LLM) y Law and Technology Certificate of University California, Berkeley (2009-2010). También es Bachiller en Ciencias Sociales y Humanidades de la PUC (1995-1996) y Licenciado en Estética (2002-2003) de la misma universidad.


                      

12. Banners

13. Componentes dinámicos

Accesibilidad

El toolbar de accesibilidad es un plugin de jQuery que puede ser configurado vía javascript o desde data-attributes.

Además, vía javascript se puede configurar un callback para escuchar el cambio del font-size


                      

                    
X

                    

Se puede utilizar Read Speaker en el toolbar de accesibilidad, usando el skin del framework rsbtn-gobcl-skin , con la siguiente configuración (cambiando la url por la correspondiente en su cuenta):


                    
No es un demo funcional debido a que el uso de readspeaker requiere una licencia pagada.

La siguiente configuración no es necesaria ya que le framework trae configurado el skin, solo se presenta a modo informativo para desarrollo, skin Javascript para el tema rsbtn-gobcl-skin.


                    

El framework incluye un subset de clases de bootstrap disponibles con la accesibilidad del texto, al texto se puede aumentar dos veces de tamaño, para cada aumento se aplica una clase al body .a11y-font-1, .a11y-font-2 respectivamente, la clase por default es .a11y-font-0

Bajo estas clases se puede usar un subset de boostrap, específicamente el sistema de columnas, las utilidades de espaciado, manejo de texto y display, por ejemplo: se puede usar .a11y-font-1-col-12 esta clase hará una columna de 12 en el primer aumento de texto.

Siguiendo el ejemplo se podrían aplicar las siguientes clases .a11y-font-1-d-none, .a11y-font-1-m-0, a11y-font-1-text-center y todas las que formen parde del subset de boostrap antes mencionado, además, aparte de los prefijos .a11y-font-1- .a11y-font-2- existe el prefijo .a11y-fonts-; este permite aplicar el estilo a todos los aumentos de texto. .a11y-fonts-d-none agregará display: none tanto para .a11y-font-1 como .a11y-font-2

Búsqueda

El componente de búsqueda por defecto solo tiene comportamientos visuales, configurando los data-attributesview-filter,scrapping-value (default:search-value) yscrapping-class (default:.searchable) se pueden realizar búsquedas sobre el DOM.

El componente se puede configurar tanto vía data-attributes como desde la llamada del plugin en javascript


                      

                      

Ejemplo del componente simple:


                      

Ejemplo del componente con filtrado:

Simple


                      

Es posible hacer grupos de elementos de los listados sobre los que se realizará la búsqueda, de esta forma se puede mostrar un mensaje de error por grupo al no conseguir resultados.

Es necesario usar el data-attributedata-groups enviandole un arreglo en JSON con los selectores que identifican a cada grupo, y agregarle a cada elemento.searchable el selector del grupo al que pertence.

Para identificar el tag que contendrá el mensaje de error por cada grupo se usa la clase.search-not-found y.not-found-<group-name>

Grupo A

No se encontraron resultados en el grupo a

Grupo B

No se encontraron resultados en el grupo b

Grupo C

No se encontraron resultados en el grupo c

                      

Contingencia

El modo contingencia se activa vía javascript desde un plugin de jQuery, puede ser configurado desde un objeto literal al activarlo o vía data-attributes


                      

                      

Al estar activa una contingencia la seccion section.contingency bloquea todo el contenido

Al hacer click en cualquier elemento que tenga la clase .contingency-behavior-open se mostrarán las contigencias dejando el contenido del sitio bloqueado.

Al hacer click en cualquier elemento que tenga la clase .contingency-behavior-close se dejarán de mostrar las contingencias.

Dentro de la sección de contingencias al hacer click en cualquier elemento con la clase .contingency-behavior-change con el data attribute data-target, se mostrará la información de la contingencia indicada por data-target. Los elementos que se desee tengan este comportamiento deben tener la clase .contingency-item y .contingency-<number>

por defecto se muestra la contigencia con la clase .contingency-1, valor que se le puede dar a la sección de contigencias en el objeto literal de configuración o vía data-attributes.

Redirección

El framework puede mostrar un aviso de redirección que cubre toda la pantalla.

El aviso de redirección se mostrará sobre cualquier link que tenga la clase .redirecting-behavior-link configurado con los data-attributes: data-target redirección a mostrar y opcionalmente data-timeout utilizado para indicar el tiempo de espera antes de hacer la redirección.


                      

Sección de redirección 1 usada en el ejemplo.


                      

Sección de redirección 2 usada en el ejemplo.


                      

Smooth Scroll

Al incluir el framework las anclas por defecto tienen smooth scroll, se tomará por defecto elmargin-top delbody como offset, si se desea tomar como referencia otro elemento se le puede pasar un selector en el data-attributedata-main al body.

El framework tiene un footer, que se puede ver al final de este sitio. Para utilizarlo, se debe comenzar con un tagfooter, el cual contiene un único elementodiv.container. El contenido del footer simplemente se coloca dentro de este container.

Recomendamos tener el logo del sitio en el footer, y si es posible, tener dos versiones del logo, uno para escritorio y otro para dispositivos móviles. Ambas imágenes deben ser colocadas dentro de un linka.footer-logo y las imágenes deben tener las clasesimg.footer-default-logo y img.footer-mobile-logo permiten al framework saber qué logo mostrar

Para sitios que son más pequeños en alto que la página en la que se está mostrando, el footer se colocará al final del sitio si se respetó el contenido del body (header main footer). Además el body debe tener la clase footer-links-x donde x es un número de 1 a 20, que le indica al body, la cantidad de links que tiene el footer y esto le permite ajustar el tamaño del main y footer para que se posicione al final de la página y de la ventana.

Mostramos ahora un ejemplo de un footer