Bootstrap es uno de los frameworks más populares para la construcción de sitios web responsivos. El Framework kit de Gobierno, al estar basado en Bootstrap 4 permite utilizar todas las herramientas que este ofrece. Toda la información relacionada la puedes encontrar en la documentación oficial.

Mediante NPM #

El kit puede ser instalado en aplicaciones basadas en Node.js con el paquete de npm utilizando el siguiente comando:

Para utilizar este framework, es necesario incluir dos de los archivos que vienen dentro de la carpeta dist del paquete de NPM:

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

Para cargarlos, necesitaremos ubicar las siguientes líneas en el index de su sitio web:

El estilo de Bootstrap 4 viene incluido al instalar el framework kit de gobierno, pero no el archivo JS. Para el correcto funcionamiento del framework, es necesario que importe el archivo en conjunto con los de JQuery y Popper.js en el siguiente orden:

También son necesarias las tipografías Roboto y Robot Slab, las cuales la puede descargar con Google Fonts:

Otra alternativa para cargar el estilo framework kit de gobierno, es utilizar Sass. Para ello deberá importar el scss en su archivo style.scss. Un ejemplo de integración con Sass sería el siguiente:

Mediante CDN #

Es posible cargar el framework kit de gobierno a través de los enlaces disponibles sobre la plataforma CDN de gobierno como se muestra a continuación:

Es importante que las páginas del sitio a crear sigan los últimos estándares de desarrollo. Esto quiere decir:

• Se debe utilizar la declaración HTML5 doctype e incluir un meta tag viewport para un comportamiento responsivo adecuado.
• 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 cargue más rápido. Los scripts se cargan de manera secuencial y bloquean el resto de la carga de archivos. Colocarlos al final permite que otros elementos, comos los archivos css carguen primero.

Juntando lo anterior, un ejemplo de la página principal sería:

El framework mantiene el soporte de navegadores otorgado por bootstrap. Para más detalle puede revisar la documentación de Bootstrap en la sección de Navegadores y Dispositivos .

Las herramientas añadidas en este framework brindan soporte para varios puntos de cambio en el tamaño de la pantalla del dispositivo:

	Extra small	Small	Medium	Large	Extra large
Tamaños para los que aplica	<576px	≥576px	≥768px	≥992px	≥1200px
Prefijo	No tiene	sm	md	lg	xl