Diferencias

Muestra las diferencias entre dos versiones de la página.

--- clase:daw:diw:1eval:tema07 [2025/11/10 17:00] – [Crear los Componentes reusables de Angular] Lorenzo
+++ clase:daw:diw:1eval:tema07 [2025/11/13 09:52] (actual) – [Crear las páginas del proyecto.] Lorenzo
@@ Línea 16: / Línea 16: @@
 Véase: [[clase:daw:diw:1eval:tema02#anadir_angular_material]]
+<sxh gutter:false>
+src/app/scss
+    /01_utilities
+    /02_base
+    /03_global
+    /04_components
+    main.scss
+src/app/components/ui
+    /c-button
+    /c-panel
+src/app/components/paginas
+   /main
+   /productos
+   /login
+</sxh>
 ===== Crear el CSS común a todo el proyecto =====
@@ Línea 42: / Línea 57: @@
-    /03_components
+    /03_global
+        _cada_una_de_los_modificadores_globales.scss
+        _index.scss
+    /04_components
         _cada_uno_de_los_componentes.scss
         _index.scss
-    /04_global
-        _cada_una_de_los_modificadores_globales.scss
-        _index.scss
     main.scss
@@ Línea 63: / Línea 80: @@
     * _index.scss: Los //imports// de cada fichero de esta carpeta.
 <sxh sass>
-@forward "./_sass-variables.scss";
+@forward "./_variables.scss";
 @forward "./_functions.scss";
 @forward "./_mixins.scss";
@@ Línea 76: / Línea 93: @@
 @forward "./_typography.scss";
 </sxh>
-  * /03_components
+  * /03_global
-    * _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-button.scss'', ''_l-flex.scss'' , ''_l-columns.scss'' o ''_c-panel.scss''. Más información en [[clase:daw:diw:1eval:tema03.c]] , [[[clase:daw:diw:1eval:tema04]], [[clase:daw:diw:1eval:tema05]], [[clase:daw:diw:1eval:tema06]]
-    * _index.scss: Los //imports// de cada fichero de esta carpeta.
-<sxh sass>
-@forward "./_c-button.scss";
-@forward "./_c-panel.scss";
-@forward "./_l-columns.scss";
-@forward "./_l-flex.scss";
-</sxh>
-  * /04_global
     * _cada_una_de_los_modificadores globales.scss: Habrá un fichero por cada tipo de modificador que haya. Por ejemplo ''_g--margin.scss'', ''_g--padding.scss'', ''_font-size.scss'' o ''_color.scss''. Más información en [[clase:daw:diw:1eval:tema03.c]] , [[[clase:daw:diw:1eval:tema04]], [[clase:daw:diw:1eval:tema05]]
     * _index.scss: Los //imports// de cada fichero de esta carpeta.
@@ Línea 94: / Línea 102: @@
 @forward "./padding";
 </sxh>
+  * /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-button.scss'', ''_l-flex.scss'' , ''_l-columns.scss'' o ''_c-panel.scss''. Más información en [[clase:daw:diw:1eval:tema03.c]] , [[[clase:daw:diw:1eval:tema04]], [[clase:daw:diw:1eval:tema05]], [[clase:daw:diw:1eval:tema06]]
+    * _index.scss: Los //imports// de cada fichero de esta carpeta.
+<sxh sass>
+@forward "./_c-button.scss";
+@forward "./_c-panel.scss";
+@forward "./_l-columns.scss";
+@forward "./_l-flex.scss";
+</sxh>
   * main.scss: Aquí se agrupa todo el código de SASS y es el único fichero que se transforma en CSS.
 <sxh sass;title:main.scss>
@@ Línea 126: / Línea 144: @@
         c-button.ts
         c-button.html
-        c-button.css
+        c-button.scss
     /c-panel
         c-panel.ts
         c-panel.html
-        c-panel.css
+        c-panel.scss
     /l-flex
         l-flex.ts
         l-flex.html
-        l-flex.css
+        l-flex.scss
 </sxh>
@@ Línea 204: / Línea 222: @@
-<nodisp 2>
 ===== CSS linters =====
@@ Línea 235: / Línea 253: @@
+<nodisp 2>
 ===== UIFactory =====