La carpeta dist/ es el destino de los archivos de código fuente luego de ser compilados, disponibles para ser cargados en algún proyecto.

La carpeta site/ es donde se aloja el sitio web de ejemplo y esta documentación con su estilo personalizado.

En src/ se alojan las siguientes subcarpetas:

• fonts/, img/, svg/: Contienen los archivos estáticos.
• scss/, js/: Contienen los archivos de código fuente y scripts.
• templates/: Contiene los archivos de código fuente de las páginas de documentación y el sitio de ejemplo.

Interesa en particular el directorio scss/, el cual contiene las siguientes carpetas:

La carpeta abstracts/ contiene elementos transversales al framework. Destacan los archivos _functions.scss y _mixins.scss los cuales proveen herramientas que facilitan el desarrollo, como por ejemplo, métodos para obtener el color que reemplaza a otro en la versión contraste, la generación de clases para distintos tipos de displays personalizados para cada breakpoint, entre otras utilidades. El archivo _variables.scss contiene los valores de colores, tamaños, etc, disponibles como variables reutilizables a lo largo del proyecto. También aquí se sobrescriben algunas variables de bootstrap.

La carpeta base/ contiene la definición de estilos relacionados a elementos generales de un sitio tales como la tipografía, los íconos, los títulos, entre otros.

Las carpetas components/, icons/, layout/ y pages/ contienen los distintos elementos y componentes implementados en este framework. En las siguientes secciones podrá tener más detalles y ver algunos ejemplos.

La carpeta themes/ es donde se alojan las clases relativas a la funcionalidades de accesibilidad, contraste y aumento de la fuente. La estructura interna de esta carpeta replica la del directorio padre scss/ de manera de que un archivo en este directorio es la implementación de accesibilidad del equivalente en nombre en la carpeta padre.

La carpeta vendors/ corresponde a la integración y personalización de librerías externas.

Bootstrap está diseñado para ser extendido a través de sus variables Sass, mapas Sass y css personalizado. En lo ideal, siempre hay que evitar tocar el código fuente. Lo mismo aplica para este kit. Por lo tanto, como guía de desarrollo se presentan los lineamientos para una correcta personalización, basados en los de la Documentación de Bootstrap.

Para importar el kit, en el archivo de ejemplo custom.scss debe agregar lo siguiente:

/* Sass del framework kit de gobierno */@import "ruta-al-kit-de-gobierno/gob.cl/src/scss/gob.cl";

En el archivo scss/abstracts/_variables.scss se encuentran disponibles las variables que definen el diseño del framework, cada una acompañada del flag !default, lo que permite que pueda sobrescribir estos valores, copiando y pegando las variables en tu archivo custom.scss y quitando el flag !default. Una vez hecho esto, cualquier reasignación posterior será omitida.

Así mismo, cualquier variable de Bootstrap puede ser sobrescrita. Puede revisar las variables disponibles en el código fuente de Bootstrap, en el archivo scss/_variables.scss.

En el siguiente ejemplo, cambiaremos el color del background del proyecto y el alto del navbar en el archivocustom.scss:

/* Color del background */
$body-bg: #ccffff;

/* Alto del navbar */
$navbar-height: 60px;

/* Sass del framework kit de gobierno */
@import "../node_modules/@gobdigital-cl/gob.cl/src/scss/gob.cl";

Además de este tipo de variables, existen los mapas de valores los cuales permiten iterar sobre estos y generar clases para cada llave con su valor correspondiente. Para editar estos valores, extenderlos o eliminarlos, el principio es el mismo, en su archivo custom.scss deberá copiar y pegar las variables con sus valores por defecto, hacer las modificaciones correspondientes y remover el tag !default.

Como ejemplo, para modificar colores del tema:

/* Modificando los colores del tema primary y danger */
$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

/* Sass del framework kit de gobierno */
@import "../node_modules/@gobdigital-cl/gob.cl/src/scss/gob.cl";

Ejemplo para añadir un color nuevo:

/* Añadiendo un nuevo color custom-color */
$theme-colors: (
  "custom-color": #900
);

/* Sass del framework kit de gobierno */
@import "../node_modules/@gobdigital-cl/gob.cl/src/scss/gob.cl";

Hay que tener presente que no se debe declarar 2 veces la variable a modificar dado que el kit tomará en cuenta sólo la última declaración. Por tanto, para editar colores del tema y a la vez añadir uno nuevo tendrá que hacer lo siguiente:

/* Modificando primary y danger. Añadiendo el color custom-color */
$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136,
  "custom-color": #900
);

/* Sass del framework kit de gobierno */
@import "../node_modules/@gobdigital-cl/gob.cl/src/scss/gob.cl";