Estructura del proyecto

Tipo: Artículo

Versión: 2.x.x

Este artículo explica cómo se divide el repositorio de SISASS y dónde debes trabajar según el tipo de cambio. El proyecto separa el código fuente del framework, la carga core que usa el instalador y una explicación simple del sitio de documentación.

Leyenda

  • Raíz
  • Carpeta
  • Archivo JavaScript
  • Archivo SCSS

Descripción general

  • src/ contiene el código de SISASS. Aquí se crean y mantienen los mixins, funciones y módulos SCSS que definen el comportamiento del framework.

  • files/ contiene los archivos planos que install.js copia al instalar SISASS. El instalador reconstruye la ruta final assets/scss/core/ o src/core/ según el modo, y esa copia solo se hace en la instalación inicial; no se sincroniza después con src/.

  • docs/ contiene el sitio de documentación y toma como base los módulos de src/, por eso refleja la estructura y el comportamiento del framework sin duplicarlo.

Un partial en SASS es un archivo SCSS pensado para contener una parte del código de estilos y ser reutilizado desde otros archivos, en lugar de compilarse normalmente como una hoja CSS independiente. Es decir, un archivo modular de Sass que no se compila por separado. Puede entenderse como un fragmento que no genera un archivo CSS.

Rutas principales del repositorio

En esta parte se muestran las rutas principales de SISASS. Se omiten algunos scripts y archivos auxiliares.

Ruta Responsabilidad Cuándo revisarla
src/ Fuente de los módulos SCSS del framework. Si necesitas utilizar mixins, funciones o módulos de SISASS.
files/ Archivos que utiliza el instalador, en el momento de realizar la primera instalación. Si realizas la instalación de SISASS y deseas entender mejor qué archivos se copian durante la instalación.
install.js Script que copia los archivos de files/ en el proyecto que instala SISASS y aplica las variantes de instalación personalizadas. Cuando cambia el destino por defecto al hacer la instalación, o al usar --dep para realizar una instalación específica para algunos frameworks.
docs/ Sitio de documentación y recursos para presentar y explicar el comportamiento de SISASS. Cuando cambia una explicación, aparece una nueva característica de SISASS.

Fuente del framework: src

La carpeta src/ es la base real del framework: concentra el código fuente que se mantiene y desde el que se construye todo el comportamiento distribuible.

Ruta Qué contiene Relación con el framework
src/_sisass.scss Punto de entrada de las utilidades core exportadas. Reexporta _vendor.scss, _base.scss y _mediaqueries.scss; no reexporta reset, componentes, efectos ni formas.
src/_base.scss Mixins y funciones de uso general. Centraliza utilidades base de SISASS. Para más info: Visita el artículo completo de los mixins y funciones presentes en _base.scss
src/_vendor.scss Mixins de compatibilidad y prefijos. Proporciona utilidades para propiedades que necesitan tratamiento vendor. Para más info: Visita el artículo completo de los mixins y funciones presentes en _vendor.scss
src/_mediaqueries.scss Mixins para breakpoints, altura y orientación. Construye las media queries usadas por las utilidades responsive. Para más info: Visita el artículo completo de los mixins y funciones presentes en _mediaqueries.scss
src/_reset.scss Reset global de elementos HTML. Es un módulo independiente; no forma parte de los @forward de _sisass.scss. Para más info: Visita el artículo completo de los mixins y funciones presentes en _reset.scss
src/components/ Componentes reutilizables. Son una colección de componentes como botones, carruseles y modales, realizados completamente en CSS sin JS, con ayuda de SISASS.
src/effects/ Efectos visuales, animaciones y keyframes. Son una colección de animaciones, efectos visuales y keyframes.
src/shapes/ Formas geométricas reutilizables. Contiene construcciones geométricas reutilizables.

No existe un archivo de variables en src/. Las variables distribuidas están en files/_variables.scss y la documentación define sus propias variables en docs/assets/scss/core/_variables.scss. La entrada _sisass.scss no representa todo el árbol de src: los componentes, efectos, formas y el reset se mantienen como módulos separados. Revisa el archivo que contiene la utilidad que vas a cambiar antes de editar el punto de entrada.

Activos de instalación: files/

La ruta files/ agrupa la carga core que el instalador utiliza en algunos modos. Ahora contiene los parciales distribuidos de forma plana; no contiene una copia completa de los módulos de src.

Archivo Estado y propósito actual
files/_variables.scss Contiene valores base para colores, tipografía, ruta de iconos, breakpoints y tiempos.
files/_fonts.scss Contiene una plantilla comentada para declarar fuentes; el modo sqhtml reemplaza esa plantilla por declaraciones de Roboto.
files/_mixin.scss Es un archivo base para mixins distribuidos y actualmente funciona como placeholder.
files/_keyframes.scss Es un archivo base para keyframes distribuidos y actualmente funciona como placeholder.
files/_index.scss Es un placeholder en la carga normal; sqhtml2 lo genera de nuevo usando instances.config.js.
files/_layout.scss Usa instances y sirve como punto de conexión para la composición distribuida.

La distribución actual instala únicamente esta carga core. No instala sisass.scss, reset.scss, ni los directorios components/, effects/ o shapes/ de src. Por tanto, no debes asumir que la instalación estándar entrega por sí sola todos los módulos disponibles en el repositorio.

Cómo funciona la instalación

Modo Origen Destino o efecto
Instalación normal files/ Crea assets/scss/core/ en la raíz del proyecto consumidor y copia allí los parciales distribuidos.
--path files/ Crea assets/scss/core/ dentro de la ruta indicada, por ejemplo resources/assets/scss/core/.
--dep sqhtml La misma carga que la instalación normal o --path. Después de copiar, ajusta _variables.scss y _fonts.scss para SQHTML en la ruta final generada.
--dep sqhtml2 files/ Ignora --path, copia directamente en ../../src/core/, aplica los ajustes de SQHTML y genera _index.scss.

En una instalación personalizada, --path cambia la raíz de los recursos, no la fuente del framework. En cambio, sqhtml2 es una integración especial que fuerza su propio destino y genera referencias a módulos del proyecto consumidor; por eso no debe interpretarse como el flujo general de SISASS.

Dónde trabajar según el cambio

Necesidad Ubicación inicial Resultado esperado
Cambiar el comportamiento de un mixin o una función. src/ Actualizas la fuente del framework; revisa la documentación porque sus estilos importan módulos desde esta ruta.
Cambiar lo que instala el paquete. files/ e install.js Actualizas manualmente el activo distribuible y su proceso de copia.
Cambiar la integración con SQHTML. install.js y, si aplica, instances.config.js Modificas la rama correspondiente de --dep.
Corregir una explicación o una página del sitio. docs/ Modificas la documentación sin alterar la fuente ni la distribución del framework; su compilación sí depende de src.
Implementar una tarea con criterios específicos. spec/ Consultas y verificas la especificación asociada.

Regla práctica: modifica src para el framework, files/ para la carga core plana que se distribuye, install.js para el flujo de instalación y docs/ para explicar y compilar el sitio documental. No asumas que una carpeta se sincroniza automáticamente con otra ni que la carga instalada contiene todo el árbol fuente.