Saltar al contenido principal
Gob.cl

Primeros pasos

Mockup: esta página es una referencia inicial. Los paquetes, rutas y versiones se actualizarán cuando se publique la versión oficial del sistema.

El Framework Kit de Gobierno es un conjunto de herramientas basado en Bootstrap, React y Vue.js para el diseño y diagramación de sitios y aplicaciones web de gobierno. Contiene plantillas de formularios, botones, menús de navegación y otros elementos de diseño listos para usar.

Bootstrap

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.

Documentación oficial de Bootstrap

Vía CDN

El Framework Kit de Gobierno está disponible en el CDN de gobierno y puede ser incluido en tu proyecto de la siguiente manera:

CSS

Copia y pega la hoja de estilos <link> dentro de la etiqueta <head>, antes que cualquier otro estilo.

<link
  rel="stylesheet"
  href="https://cdn.digital.gob.cl/framework/css/gob.cl.css"
/>

Con el archivo enlazado ya puedes empezar a usar los estilos de CSS.

Tipografías

El framework utiliza las tipografías Roboto y Roboto Slab. Inclúyelas también dentro de la etiqueta <head>:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400"
/>
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400"
/>

JavaScript

Para activar la funcionalidad de los componentes interactivos (collapses, modal, accordion, dropdown) debes agregar además los archivos JavaScript antes del cierre de la etiqueta </body>.

Como el framework está basado en Bootstrap 4, es necesario cargar jQuery, Popper.js y Bootstrap en el siguiente orden:

<script
  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
  crossorigin="anonymous"
></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
  integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
  crossorigin="anonymous"
></script>
<script
  src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
  integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
  crossorigin="anonymous"
></script>
<script src="https://cdn.digital.gob.cl/framework/js/gob.cl.js"></script>

Vía NPM

El Framework Kit de Gobierno está disponible en el repositorio de NPM. Puedes instalarlo con el siguiente comando:

npm i @gobdigital-cl/gob.cl

CSS

Importa el archivo CSS en tu archivo principal de estilos:

@import "~@gobdigital-cl/gob.cl/dist/css/gob.cl.css";

Con el archivo enlazado ya puedes empezar a usar los estilos de CSS.

Si trabajas con Sass, también puedes importar el código fuente para personalizar variables del tema:

@import "node_modules/@gobdigital-cl/gob.cl/src/scss/gob.cl";

// Other styles

JavaScript

Para empezar a utilizar los componentes interactivos (collapses, modal, accordion, dropdown) debes importar el archivo JavaScript en tu archivo principal:

import "@gobdigital-cl/gob.cl/dist/js/gob.cl.js";

Recuerda que el framework depende de Bootstrap 4, por lo que también debes instalar e importar sus dependencias:

npm i jquery popper.js bootstrap

import "jquery";
import "popper.js";
import "bootstrap";
import "@gobdigital-cl/gob.cl/dist/js/gob.cl.js";

Próximos pasos

Una vez instalado el framework, revisa las siguientes secciones para comenzar a construir tus interfaces:

  • Fundamentos: color, tipografía, espaciado y grillas del sistema.
  • Componentes: catálogo de piezas reutilizables de interfaz.
  • Patrones: soluciones recurrentes para flujos y pantallas.
  • Calidad: criterios de accesibilidad y evaluación de servicios digitales.