====== 16. Sistema de diseño: Estructura de carpetas ======
Vamos finalmente a unificar todo y crear la arquitectura definitiva que vamos a usar en clase. La carpeta del SASS es la misma con Angular y sin él; lo que cambia es dónde va y cómo se compila.
Para crear una buena arquitectura vamos a hacer lo siguiente:
* [[#Indicar a Angular que el proyecto es en Español]]
* [[#Usar Angular Material]]
* [[#Crear el CSS común a todo el proyecto]]
* [[#Crear los Componentes reusables de Angular]]
* [[#Crear las páginas del proyecto]]
Si el proyecto es HTML, CSS y JavaScript sin Angular, ver [[#Proyecto sin Angular]].
En un proyecto Angular la estructura queda así:
src/app/scss
/01_utilities
/02_base
/03_global
/04_components
main.scss
src/app/components/ui
/c-boton
/c-panel
src/app/components/paginas
/main
/productos
/login
===== Indicar a Angular que el proyecto es en Español =====
Véase: [[clase:daw:diw:angular-material#establecer_el_idioma_y_moneda]]
===== Usar Angular Material =====
Véase: [[clase:daw:diw:angular-material#anadir_angular_material]]
===== Crear el CSS común a todo el proyecto =====
Se tiene que crear la carpeta ''src/app/scss'' donde irá todo nuestro SASS. El fichero que contendrá todo el SASS es ''src/app/scss/main.scss''
En el fichero ''styles.scss'' añadir la linea siguiente para que Angular sepa donde está nuestro SASS:
@use './app/scss/main.scss' as *;
Dentro de la carpeta ''src/app/scss'' , habrá la siguiente estructura de ficheros:
src/app/scss
/01_utilities
_variables.scss
_functions.scss
_mixins.scss
_index.scss
/02_base
_tokens.scss
_reset.scss
_typography.scss
_index.scss
/03_global
_cada_uno_de_los_modificadores_globales.scss
_index.scss
/04_components
_cada_uno_de_los_componentes.scss
_index.scss
main.scss
La explicación de cada carpeta es la siguiente:
* /01_utilities
* _variables.scss: Variables de **SASS** del sistema: las listas y mapas ''$colores'', ''$font-sizes'', ''$margins'', ''$paddings'', ''$breakpoints''... de los temas de Tokens y Globales. Solo tiene variables: no genera CSS.
* _functions.scss: Funciones de SASS
* _mixins.scss: Mixins de SASS
* _index.scss: Los //imports// de cada fichero de esta carpeta.
@forward "./_variables.scss";
@forward "./_functions.scss";
@forward "./_mixins.scss";
* /02_base
* _tokens.scss: El '':root'' con los tokens de sistema (''--mlt-sys-*''), generados con bucles desde las variables de ''_variables.scss''.
* _reset.scss: El reset que usemos
* _typography.scss: Para importar tipos de letra
* _index.scss: Los //imports// de cada fichero de esta carpeta.
@forward "./_tokens.scss";
@forward "./_reset.scss";
@forward "./_typography.scss";
* /03_global
* _cada_uno_de_los_modificadores_globales.scss: Habrá un fichero por cada tipo de modificador que haya. Por ejemplo ''_g--color.scss'', ''_g--font-size.scss'', ''_g--margin.scss'' o ''_g--padding.scss''. Las versiones responsivas (''@tablet'', ''@desktop'', ''@fulldesktop'') van en el mismo fichero que la clase base, siempre **después** de las clases base (si van antes, gana la base y no hacen nada), generadas con el mapa ''$breakpoints'' de ''01_utilities/_variables.scss''. Más información en [[clase:daw:diw:sistema-diseno-bem]], [[clase:daw:diw:sistema-diseno-globales]], [[clase:daw:diw:sass]]
* _index.scss: Los //imports// de cada fichero de esta carpeta.
@forward "./_g--color.scss";
@forward "./_g--font-size.scss";
@forward "./_g--margin.scss";
@forward "./_g--padding.scss";
* /04_components
* _cada_uno_de_los_componentes.scss: Habrá un fichero por cada Bloque que sea de tipo Componente pero que **NO sean de Angular**. Por ejemplo ''_c-boton.scss'', ''_l-flex.scss'' , ''_l-columns.scss'' o ''_c-panel.scss''. Más información en [[clase:daw:diw:sistema-diseno-bem]], [[clase:daw:diw:sistema-diseno-tokens]], [[clase:daw:diw:sass]], [[clase:daw:diw:sistema-diseno-layout]]
* _index.scss: Los //imports// de cada fichero de esta carpeta.
@forward "./_c-boton.scss";
@forward "./_c-panel.scss";
@forward "./_l-columns.scss";
@forward "./_l-flex.scss";
* main.scss: Aquí se agrupa todo el código de SASS y es el único fichero que se transforma en CSS.
@forward "./02_base";
@forward "./03_global";
@forward "./04_components";
Dentro de cada fichero ''.scss'' que use algo de las utilidades (variables, funciones o mixins de SASS) se añadirá la referencia a las utilidades con la siguiente linea:
@use "../01_utilities/index" as utilidades;
Al crear el CSS/SASS es importante seguir las directrices de:
* BEM: [[clase:daw:diw:sistema-diseno-bem]]
* Tokens: [[clase:daw:diw:sistema-diseno-tokens]]
* Globales: [[clase:daw:diw:sistema-diseno-globales]]
===== Crear los Componentes reusables de Angular =====
Ahora hay que crear la carpeta donde estarán nuestros componentes de Angular. Para ello crearemos la carpeta ''src/app/components/ui''.
En esta carpeta deben estar todos los componentes **reusables** por toda la aplicación.
src/app/components/ui
/c-boton
c-boton.ts
c-boton.html
c-boton.scss
/c-panel
c-panel.ts
c-panel.html
c-panel.scss
/l-flex
l-flex.ts
l-flex.html
l-flex.scss
Para crear el SCSS se seguirán las mismas normas que al crear el SCSS común a todo el proyecto.
Más información en:
* [[clase:daw:diw:angular-creacion-componentes]]
* [[clase:daw:diw:angular-atributos-componentes]]
* [[clase:daw:diw:sistema-diseno-bem]]
* [[clase:daw:diw:sistema-diseno-tokens]]
* [[clase:daw:diw:sistema-diseno-globales]]
* [[clase:daw:diw:sass]]
* [[clase:daw:diw:sistema-diseno-layout]]
Notar la diferencia por ejemplo entre el fichero ''src/app/scss/04_components/_l-flex.scss'' y la carpeta ''src/app/components/ui/l-flex''
* ''src/app/scss/04_components/_l-flex.scss'': Estamos creando clases CSS para flex
* ''src/app/components/ui/l-flex'': Estamos creando componentes o atributos Angular para flex
Lo normal es que esté uno o el otro. Lo mismo se podría aplicar a cualquier otro layout o componentes como ''c-boton''.
===== Crear las páginas del proyecto =====
Finalmente en la carpeta ''src/app/components/paginas'', añadiremos todos los componentes específicos de la aplicación. Aquí es donde se hace uso de los distintos elementos reusables que creamos en ''src/app/components/ui''
===== Proyecto sin Angular =====
En un proyecto de HTML, CSS y JavaScript sin Angular la carpeta ''scss'' es exactamente la misma, pero va en la raíz del proyecto. No hay ''components/ui'': todos los componentes son ficheros de ''scss/04_components''.
proyecto
├─ scss
│ ├─ 01_utilities
│ ├─ 02_base
│ ├─ 03_global
│ ├─ 04_components
│ │ ├─ _c-boton.scss
│ │ ├─ _c-panel.scss
│ │ └─ _index.scss
│ └─ main.scss
├─ css
│ └─ main.css <- lo genera SASS, no se toca
├─ js
│ └─ main.js
├─ index.html
└─ productos.html
* Instalar SASS en el proyecto:
npm install --save-dev sass
* Compilar la carpeta ''scss'' en la carpeta ''css''. Con ''--watch'' se vuelve a compilar cada vez que guardas un ''.scss''. Solo sale ''css/main.css'' porque el resto de ficheros empiezan por ''_'' (ver [[clase:daw:diw:sass#ficheros_parciales|SASS: Ficheros parciales]]):
npx sass --watch scss:css
* Enlazar en cada página solo el CSS generado:
El navegador no entiende SASS: enlazar ''scss/main.scss'' no aplica ningún estilo. Y ''css/main.css'' no se edita a mano, porque la siguiente compilación lo sobrescribe y se pierde lo que hayas cambiado.