Esta guía lo ayudará a comenzar con todas las cosas importantes (compilar el código fuente, estructura de archivos, herramientas de compilación, archivos incluidos) que están documentadas aquí.

Esta GUI amplía Bootstrap no solo basándose en sus componentes existentes, sino también introduciendo componentes y complementos completamente nuevos. La mejor manera de obtener una descripción general de esto es ver la página components.html.

Para comenzar, debe hacer lo siguiente:

1. Asegúrese de tener Node instalado utiliza npm para administrar las dependencias. Si no lo hace, la instalación es bastante fácil, simplemente visite la página de descarga de Node e instálela.
2. Descomprima su tema y abra su línea de comando, asegurándose de que la línea de comando esté en la raíz del directorio del tema descomprimido.
3. npm install: Abra su línea de comando en el directorio raíz de su tema descomprimido y ejecútelo para instalar todas las dependencias.

¡Es así de simple! Si no estás acostumbrado a usar la terminal, no te preocupes, esto es lo más avanzado posible. Si quieres cerrar el servidor, simplemente presiona Control + C.

Webpack y npm-scripts se utilizan para gestionar el desarrollo. Abra su línea de comando en el directorio raíz del tema para usar los siguientes comandos:

• npm start: Compile y mire SCSS/JS/HTML, use Live Reload para actualizar los navegadores al instante, inicie un servidor y abra una pestaña en su navegador predeterminado. Cualquier cambio realizado en los archivos fuente se compilará tan pronto como guarde el archivo.
• npm run build: Genera un /dist directorio con todos los archivos de producción.

• 📁 dist - Archivos de producción generados
• 📁 node_modules - Directorio donde npm instala las dependencias
• 📁 src
  • 📁 html - Archivos HTML
  • 📁 img - Recursos de imagen
  • 📁 js - Archivos Javascript
  • 📁 scss - Archivos SCSS para el theme
• 📄 .gitignore - Oculta todos los archivos innecesarios de Git.
• 📄 package.json - Lista de dependencias e información de npm.
• 📄 package-lock.json - Describe el árbol de dependencia exacto que se generó.
• 📄 README.md - Información general del proyecto.
• 📄 webpack.config.js - Archivo de configuración de Webpack.

Hay 2 formas básicas de user el tema

1. Personalización de SCSS. Esta es una forma más versátil y sostenible de personalizar, pero requiere los webpack pasos de compilación descritos anteriormente. Los dos beneficios principales de esta estrategia son el uso de anulaciones de variables para personalizar fácilmente los estilos de tema, además nunca tendrás que tocar la fuente Bootstrap, lo que significa que las actualizaciones futuras serán mucho, mucho más simples. Se proporcionan 2 archivos que hacen que esta estrategia sea sencilla de implementar:
   • _variables.scss: Este archivo se puede utilizar para anular las variables principales de Bootstrap, así como para personalizar elementos que se han vinculado a variables.
   • _custom.scss: Este archivo se puede utilizar para escribir SCSS personalizado que se compilará junto con los archivos principales de Bootstrap.
2. CSS compilado. Si planea usar esta GUI "tal cual", o solo necesita una personalización limitada, no dude en user el archivo theme.bundle.css compilado en el directorio dist/assets/css.