Diferencias

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

--- clase:daw:diw:1eval:tema07 [2025/11/10 14:03] – [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 40: / Línea 55: @@
         _typography.scss
         _index.scss
-    /03_layout
-        _cada_uno_de_los_layouts.scss
+    /03_global
+        _cada_una_de_los_modificadores_globales.scss
         _index.scss
     /04_components
@@ Línea 49: / Línea 66: @@
         _index.scss
-    /05_global
-        _cada_una_de_los_modificadores_globales.scss
-        _index.scss
     main.scss
@@ Línea 66: / 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 79: / Línea 93: @@
 @forward "./_typography.scss";
 </sxh>
-  * /03_layout
+  * /03_global
-    * _cada_uno_de_los_layouts.scss: Habrá un fichero por cada Bloque que sea de tipo layout. Por ejemplo ''_l-flex.scss'' y ''_l-columns.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]]
+    * _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.
 <sxh sass>
-@forward "./_l-columns.scss";
+@forward "./color";
-@forward "./_l-flex.scss";
+@forward "./font-size";
-</sxh>
+@forward "./margin";
+@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'' 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]]
+    * _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>
-  * /05_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.
-<sxh sass>
-@forward "./color";
-@forward "./font-size";
-@forward "./margin";
-@forward "./padding";
-</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>
 @forward "./02_base";
-@forward "./03_layouts";
+@forward "./03_components";
-@forward "./04_components";
+@forward "./04_global";
-@forward "./05_global";
 </sxh>
@@ Línea 135: / 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 162: / Línea 171: @@
 <note important>
-Notar la diferencia entre el fichero ''src/app/scss/03_layout/l-flex'' y la carpeta ''src/app/components/ui/l-flex''
+Notar la diferencia por ejemplo entre el fichero ''src/app/scss/03_components/l-flex'' y la carpeta ''src/app/components/ui/l-flex''
-  * ''src/app/scss/03_layout/l-flex'': Estamos creando clases CSS para flex
+  * ''src/app/scss/03_components/l-flex'': 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 normal es que esté uno o el otro. Lo mismo se podría aplicar a cualquier otro layout o componentes como ''c-button''.
-Lo mismo se podría aplicar a cualquier otro layout o componentes como ''c-button''.
 </note>
@@ Línea 215: / Línea 222: @@
-<nodisp 2>
 ===== CSS linters =====
@@ Línea 246: / Línea 253: @@
+<nodisp 2>
 ===== UIFactory =====