Diferencias

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

--- clase:daw:diw:1eval:tema06 [2025/11/03 11:37] – creado - editor externo 127.0.0.1
+++ clase:daw:diw:1eval:tema06 [2025/11/07 12:28] (actual) – Lorenzo
@@ Línea 6: / Línea 6: @@
 Flex se utiliza para colocar cosas de forma horizontal o vertical.
-  * [[https://css-tricks.com/snippets/css/a-guide-to-flexbox/|A Complete Guide to Flexbox]]
+  * [[https://css-tricks.com/snippets/css/a-guide-to-flexbox/|A Complete Guide to Flexbox]]
   * {{css_flexbox_layout_cheatsheet.pdf|Flexbox Layout Cheatsheet. Otra gía rápida de flexbox}}
   * [[https://medium.com/@js_tut/the-complete-css-flex-box-tutorial-d17971950bdc|The Complete CSS Flex Box Tutorial]]
   * [[https://medium.com/@js_tut/flexbox-the-animated-tutorial-8075cbe4c1b2|Flexbox — The Animated Tutorial]]
   * [[https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties|In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?]]
-  * [[https://flexboxfroggy.com/#es|Flexbox Froggy - A game for learning CSS flexbox]]
+  * [[https://flexboxfroggy.com/#es|Flexbox Froggy - A game for learning CSS flexbox]].
 Vamos a explicar flex con el siguiente ejemplo:
 <sxh html>
-<div class="flex flex--direction-row flex--justify-content-center">
+<div class="l-flex l-flex--direction-row l-flex--justify-content-center">
-  <div class="flex__area">Item1</div>
+  <div class="l-flex__area">Item1</div>
-  <div class="flex__area">Item2</div>
+  <div class="l-flex__area">Item2</div>
-  <div class="flex__area Flex-area--grow2">Item3</div>
+  <div class="l-flex__area l-flex__area--grow-2">Item3</div>
-  <div class="flex__area">Item4</div>
+  <div class="l-flex__area">Item4</div>
-  <div class="flex__area">Item5</div>
+  <div class="l-flex__area">Item5</div>
 </div>
 </sxh>
@@ Línea 26: / Línea 28: @@
 <sxh css>
-.flex {
+.l-flex {
   display: flex;
   &--direction-row {
-    flex-direction: row;
+    flex-direction: row;
   }
   &--justify-content-center {
-    justify-content: center;
+    justify-content: center;
   }
   &__area {
-    // Si tuvieras más propiedades para el área, las pondrías aquí
+    // Si tuvieras más propiedades para el área, las pondrías aquí
-    &--grow2 {
+    &--grow2 {
-      flex-grow: 2;
+      flex-grow: 2;
-    }
+    }
   }
 }
@@ Línea 49: / Línea 51: @@
 Como vemos hay dos tipos de elementos, el contenedor y los items que hay centro. El contenedor siempre tendrá la siguiente línea ''display:flex;''.
   * Veamos otro ejemplo:
 <sxh html>
-<div class="flex flex--direction-row flex--justify-content-center">
+<div class="l-flex l-flex--direction-row l-flex--justify-content-center">
-  <div class="flex-area">
+  <div class="l-flex-area">
-    <div class="flex flex--direction-row flex--justify-content-center">
+    <div class="l-flex l-flex--direction-row l-flex--justify-content-center">
-      <div class="flex-area"></div>
+      <div class="l-flex-area"></div>
-      <div class="flex-area"></div>
+      <div class="l-flex-area"></div>
-    </div>
+    </div>
   </div>
-  <div class="flex__area">Item2</div>
+  <div class="l-flex__area">Item2</div>
-  <div class="flex__area flex__area--grow2">Item3</div>
+  <div class="l-flex__area l-flex__area--grow2">Item3</div>
-  <div class="flex__area">Item4</div>
+  <div class="l-flex__area">Item4</div>
-  <div class="flex__area">Item5</div>
+  <div class="l-flex__area">Item5</div>
 </div>
 </sxh>
@@ Línea 71: / Línea 73: @@
 Para hacer que los item se muestren de forma vertical u horizontal. Sus valores son
   * ''flex-direction:row'' Los items se colocan en horizontal. Es decir en una única línea.
 {{:clase:daw:diw:1eval:flex-row.png|}}
   * ''flex-direction:column'' Los items que solocal en vertical. Es decir en una única línea.
 {{:clase:daw:diw:1eval:flex-colum.png|}}
@@ Línea 81: / Línea 83: @@
 ==== flex-wrap ====
 Para hacer que si no caben en una línea, se pasen a la línea siguiente.
   * ''flex-wrap:wrap'' Si se añade se pasa de línea en vez de mantenerse en la misma
 {{:clase:daw:diw:1eval:flex-wrap.png|}}
@@ Línea 89: / Línea 91: @@
 Alguno de sus posibles valores son:
   * ''justify-content:flex-start''
   * ''justify-content:flex-end''
   * ''justify-content:center''
   * ''justify-content:space-between''
   * ''justify-content:space-around''
   * ''justify-content:space-evenly''
 {{:clase:daw:diw:1eval:flex-justify-content.png|}}
@@ Línea 102: / Línea 104: @@
 Alguno de sus posibles valores son:
   * ''align-content:flex-start''
   * ''align-content:flex-end''
   * ''align-content:center''
   * ''align-content:strech''
   * ''align-content:space-between''
   * ''align-content:space-around''
 {{:clase:daw:diw:1eval:flex-align-content.png|}}
@@ Línea 115: / Línea 117: @@
 Alguno de sus posibles valores son:
   * ''align-items:flex-start''
   * ''align-items:flex-end''
   * ''align-items:center''
   * ''align-items:stretch''
   * ''align-items:baseline''
 {{:clase:daw:diw:1eval:flex-align-items.png|}}
@@ Línea 126: / Línea 128: @@
 Permite que crezca el item si hay mas espacio. Por defecto el valor es ''0'' que significa que no crece, sino que se queda con el espacio que necesita para su contenido.
   * ''flex-grow:1'': Todos los items con este valor crecerán para ocupar más espacio pero todos los que tengan este valor tendrán el mismo tamaño entre ellos
   * ''flex-grow:2'': Como al anterior pero todos los que tengan este valor tendrán el mismo tamaño entre ellos pero el **doble** que los de ''flex-grow:1''
   * ''flex-grow:3'': Como al anterior pero todos los que tengan este valor tendrán el mismo tamaño entre ellos pero el **triple** que los de ''flex-grow:2''
 {{:clase:daw:diw:1eval:flex-grow.png|}}
@@ Línea 138: / Línea 140: @@
 <sxh html>
 <div style="display: flex;">
     <div style="flex-grow: 0;border:1px solid red">AAAAA</div>
-    <div style="flex-grow: 1;border:1px solid red">BBBBB</div>
+    <div style="flex-grow: 1;border:1px solid red">BBBBB</div>
-    <div style="flex-grow: 2;border:1px solid red">CCCCC</div>
+    <div style="flex-grow: 2;border:1px solid red">CCCCC</div>
 </div>
 </sxh>
@@ Línea 152: / Línea 154: @@
 Indica que un item puede reducir su tamaño en comparación con otros items cuando el contenedor es más pequeño que el tamaño total de los elementos.
   * ''flex-shrink:1'': Los items con este valor pueden reducir su tamaño para ajustarse al contenedor.
   * ''flex-shrink:0'': Los items con este valor no se reducirá, independientemente del tamaño del contenedor.
@@ Línea 162: / Línea 164: @@
 <note tip>
 Solo tiene sentido usar ''flex-shrink:1'' si se indica ''flex-basis'' y si valor no es ''auto''.
 Ya que si ''flex-basis:auto'' el item ya tendré el tamaño mínimo del contenido así que no se podrá hacer más pequeño y por lo tanto no se necesita ''flex-shrink:1''
@@ Línea 178: / Línea 180: @@
 <html lang="es">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Ejemplo de Flexbox</title>
+    <title>Ejemplo de Flexbox</title>
-    <style>
+    <style>
-        .container {
+        .container {
-            display: flex;
+            display: flex;
-        }
+        }
-        .item {
+        .item {
-            border: 1px solid #FF0000;
+            border: 1px solid #FF0000;
-        }
+        }
-        .item1 {
+        .item1 {
-            flex-basis: 300px;
+            flex-basis: 300px;
-            flex-shrink: 1;
+            flex-shrink: 1;
-        }
+        }
-        .item2 {
+        .item2 {
-            flex-basis: 300px;
+            flex-basis: 300px;
-            flex-shrink: 0;
+            flex-shrink: 0;
-        }
+        }
-        .item3 {
+        .item3 {
-            flex-grow:1
+            flex-grow:1
-        }
+        }
-    </style>
+    </style>
 </head>
 <body>
 <div class="container">
     <div class="item item1">AAAAAAAAAAAAAAA</div>
-    <div class="item item2">BBBBBBBBBBBBBBB</div>
+    <div class="item item2">BBBBBBBBBBBBBBB</div>
-    <div class="item item3">CCCCCCCCCCCCCCC</div>
+    <div class="item item3">CCCCCCCCCCCCCCC</div>
 </div>
@@ Línea 214: / Línea 216: @@
 La explicación es:
   * El ''item1'' empieza con un tamaño de ''300px'' (por ''flex-basis: 300px;'') pero se puede hacer más pequeño si es necesario (por ''flex-shrink: 1;'')
   * El ''item2'' empieza con un tamaño de ''300px'' (por ''flex-basis: 300px;'') pero **NO** se puede hacer más pequeño (por ''flex-shrink: 0;'')
   * El ''item3'' ocupará todo el espacio que haya libre (por ''flex-grow:1'') y eso incluye hacerlo más grande o pequeño
@@ Línea 228: / Línea 230: @@
 Mas información en:
   * [[https://css-tricks.com/understanding-flex-grow-flex-shrink-and-flex-basis/|Understanding flex-grow, flex-shrink, and flex-basis]]
   * [[https://www.paradigmadigital.com/dev/diferencia-flex-basis-width/|Diferencia entre flex basis y width]]
   * [[https://ed.team/blog/guia-definitiva-de-flexbox-2-flex-basis-flex-frow-flex-shrink|Guia definitiva de Flexbox (2): Flex basis, flex-frow, flex-shrink]]
   * [[https://www.desarrollolibre.net/blog/css/las-propiedades-flex-grow-flex-shrink-y-flex-basis|Las propiedades flex-grow, flex-shrink y flex-basis]]
 ==== margin  y auto ====
 Una utilidad de flexbox es hacer menús pero a veces queremos mover algunos item hacia la derecha.El truco para hacerlo es usar ''margin-left: auto;'' En los siguientes páginas se indica como hacerlos.
@@ Línea 240: / Línea 242: @@
 <sxh html>
 <div style="display:flex">
   <div >Item1</div>
   <div >Item2</div>
   <div >Item3</div>
   <div style="margin-left:auto">Item4</div>
   <div >Item5</div>
 </div>
 </sxh>
@@ Línea 253: / Línea 255: @@
 Mas información en:
   * [[https://medium.com/flexbox-and-grids/the-most-popular-navigation-bars-created-with-flexbox-6c0f59f55686|The Most Popular Navigation Bars created with Flexbox]]
   * [[https://github.com/ohansemmanuel/Understanding-Flexbox/blob/master/05.%20Auto%20margin%20alignment/auto_margin.md|Understanding Flexbox - auto-margin]]
 <note tip>
@@ Línea 265: / Línea 267: @@
 Grid permite colocar cosas en dos dimensiones. Como si fuera una rejilla (un grid en inglés).
   * Guías completas de Grid:
-    * [[https://css-tricks.com/getting-started-css-grid/|Getting Started with CSS Grid]]
+    * [[https://css-tricks.com/getting-started-css-grid/|Getting Started with CSS Grid]]
-    * [[https://css-tricks.com/snippets/css/complete-guide-grid|A Complete Guide to Grid]]
+    * [[https://css-tricks.com/snippets/css/complete-guide-grid|A Complete Guide to Grid]]
-    * [[https://tympanus.net/codrops/css_reference/grid/|CSS Grid is a two-dimensional layout system created specifically to tackle grid-based user interfaces on the web.]]
+    * [[https://tympanus.net/codrops/css_reference/grid/|CSS Grid is a two-dimensional layout system created specifically to tackle grid-based user interfaces on the web.]]
-    * [[https://www.codeinwp.com/blog/css-grid-tutorial-layout/|The Ultimate CSS Grid Tutorial for Beginners (With Interactive Examples)]]
+    * [[https://www.codeinwp.com/blog/css-grid-tutorial-layout/|The Ultimate CSS Grid Tutorial for Beginners (With Interactive Examples)]]
-    * {{css_grid_layout_cheatsheet.pdf|}}
+    * {{css_grid_layout_cheatsheet.pdf|}}
   * Grid vs FlexBox:
-    * [[https://www.youtube.com/watch?v=hs3piaN4b5I|Video:Flexbox vs. CSS Grid — Which is Better?]]
+    * [[https://www.youtube.com/watch?v=hs3piaN4b5I|Video:l-flexbox vs. CSS Grid — Which is Better?]]
-    * [[https://css-tricks.com/css-grid-replace-flexbox/|Does CSS Grid Replace Flexbox?]]
+    * [[https://css-tricks.com/css-grid-replace-flexbox/|Does CSS Grid Replace l-flexbox?]]
   * Mas información:
-    * [[https://css-tricks.com/almanac/properties/j/justify-items/|justify-items]]
+    * [[https://css-tricks.com/almanac/properties/j/justify-items/|justify-items]]
-    * [[https://www.youtube.com/watch?v=0Gr1XSyxZy0|Los 9 grandes errores con CSS Grid]]
+    * [[https://www.youtube.com/watch?v=0Gr1XSyxZy0|Los 9 grandes errores con CSS Grid]]
-    * [[https://css-tricks.com/things-ive-learned-css-grid-layout/|Things I’ve Learned About CSS Grid Layout]]
+    * [[https://css-tricks.com/things-ive-learned-css-grid-layout/|Things I’ve Learned About CSS Grid Layout]]
-    * [[https://www.webstoemp.com/blog/notes-on-using-css-grid-in-production/|Notes on using CSS Grid in production]]: Tiene de interesante el uso de "@movil" y el uso de bucles en SASS
+    * [[https://www.webstoemp.com/blog/notes-on-using-css-grid-in-production/|Notes on using CSS Grid in production]]: Tiene de interesante el uso de "@movil" y el uso de bucles en SASS
-    * [[https://gridbyexample.com/|Grid by Example]]
+    * [[https://gridbyexample.com/|Grid by Example]]
 <sxh css>
 .container {
 	display:grid;
   	grid-template-columns: 1fr 1fr 2fr;
   	grid-template-rows: 1fr 2fr;
 }
@@ Línea 294: / Línea 296: @@
 <sxh html>
 <div class="container">
   <div class="item">Item1</div>
   <div class="item">Item2</div>
   <div class="item">Item3</div>
   <div class="item">Item4</div>
   <div class="item">Item5</div>
   <div class="item">Item6</div>
 </div>
 </sxh>
@@ Línea 306: / Línea 308: @@
 Indica el tamaño de cada columna
 Las unidades pueden ser:
   * Tamaño fijo: Usar px
   * auto: Coje el menos tamaño posible
   * fr: Es una fracción del espacio libre después de quitar las columnas de tamaño fijo (Las 2 formas anteriores, px y auto)
 Ejemplos:
   * ''grid-template-columns: 1fr 1fr 2fr'' La última columna tendrá el doble de tamaño que las anteriores
   * ''grid-template-columns: 1fr 1fr 50px'' La segunda columna tendrá el mismo de tamaño que la primera. La última siempre 50px
   * ''grid-template-columns: 1fr 2fr 80px auto'' La última tendrá un tamaño mínimo posible, la tercera tendrá 80px, la segunda el doble que la primera.
@@ Línea 322: / Línea 324: @@
 <sxh css>
 .container {
   grid-template-columns: 1fr 1fr  1fr  1fr  1fr  1fr;
 }
  </sxh>
 se puede escribir:
 <sxh css>
   grid-template-columns: repeat(6, 1fr);
 </sxh>
@@ Línea 333: / Línea 335: @@
 \\
 o  en vez de
 <sxh css>
 .container {
   grid-template-columns: 100px 100px 100px 100px 100px 100px ;
 }
  </sxh>
 se puede escribir:
 <sxh css>
   grid-template-columns: repeat(6, 100px );
 </sxh>
@@ Línea 350: / Línea 352: @@
 <sxh css>
 .container {
   grid-template-columns: repeat(auto-fit, 100px );
 }
  </sxh>
 En ese caso ocupará todas las  filas que sea necesario para poder poner ponerlo todo. Es una forma de hacer las cosas responsivas.
 \\
@@ Línea 362: / Línea 364: @@
 <sxh css>
 .container {
   grid-template-columns: repeat( auto-fit, minmax( 100px, 1fr ) );
 }
 </sxh>
 Que hará que cada columna ocupe como mínimo 100px y si hay mas espacio crecerá hasta ocupar todo. Pero se crearán tantas filas como sea necesario. Mas información en   [[https://timwright.org/blog/2017/08/26/css-grid-layout/|repeat,auto-fit,minmax,1fr]]  y en [[https://www.youtube.com/watch?v=mVQiNpqXov8|MinMax in CSS Grid — 3/3 Flexibility]]
 <note tip>
 La función ''minmax'' es similar a las propiedades css de:
   * ''min-width''
   * ''min-height''
   * ''max-width''
   * ''max-height''
 </note>
@@ Línea 381: / Línea 383: @@
 <sxh css>
 .container {
     display:grid;
-    grid-template-columns: repeat(4,1fr);
+    grid-template-columns: repeat(4,1fr);
 }
 .container2 {
     display:grid;
-    grid-template-columns: repeat(auto-fit,100px);
+    grid-template-columns: repeat(auto-fit,100px);
 }
 .container3 {
     display:grid;
-    grid-template-columns: repeat( auto-fit, minmax( 100px, 1fr ) );
+    grid-template-columns: repeat( auto-fit, minmax( 100px, 1fr ) );
 }
 .container4 {
     display:grid;
-    grid-template-columns: repeat( 4, minmax( 100px, 1fr ) );
+    grid-template-columns: repeat( 4, minmax( 100px, 1fr ) );
 }
 .item {
     border:1px solid red;
 }
 .item2 {
     border:1px solid green;
 }
 .item3 {
     border:1px solid blue;
 }
 .item4 {
     border:1px solid pink;
 }
 </sxh>
 <sxh html>
   <p>repeat(4,1fr)</p>
 <div class="container">
   <div class="item">Item1</div>
   <div class="item">Item2</div>
   <div class="item">Item3</div>
   <div class="item">Item4</div>
   <div class="item">Item5</div>
   <div class="item">Item6</div>
   <div class="item">Item7</div>
   <div class="item">Item8</div>
 </div>
 <br>
 <p>repeat(auto-fit,100px)</p>
 <div class="container2">
   <div class="item2">Item1</div>
   <div class="item2">Item2</div>
   <div class="item2">Item3</div>
   <div class="item2">Item4</div>
   <div class="item2">Item5</div>
   <div class="item2">Item6</div>
   <div class="item2">Item7</div>
   <div class="item2">Item8</div>
 </div>
 <br>
 <p>repeat( auto-fit, minmax( 100px, 1fr ) )</p>
 <div class="container3">
   <div class="item3">Item1</div>
   <div class="item3">Item2</div>
   <div class="item3">Item3</div>
   <div class="item3">Item4</div>
   <div class="item3">Item5</div>
   <div class="item3">Item6</div>
   <div class="item3">Item7</div>
   <div class="item3">Item8</div>
 </div>
 <p>repeat( 4, minmax( 100px, 1fr ) )</p>
 <div class="container4">
   <div class="item4">Item1</div>
   <div class="item4">Item2</div>
   <div class="item4">Item3</div>
   <div class="item4">Item4</div>
   <div class="item4">Item5</div>
   <div class="item4">Item6</div>
   <div class="item4">Item7</div>
   <div class="item4">Item8</div>
 </div>
@@ Línea 472: / Línea 474: @@
 <sxh css>
 .container {
   gap: 15px 10px;
 }
 </sxh>
@@ Línea 480: / Línea 482: @@
 <note important>
-La propiedad ''gap'' también funciona con **flex**</note>
+La propiedad ''gap'' también funciona con **l-flex**</note>
@@ Línea 488: / Línea 490: @@
 <sxh css>
-.columns {
+.l-columns {
   display: grid;
   grid-template-columns: repeat(1, 1fr);
 }
-.columns--2 {
+.l-columns--2 {
   grid-template-columns: repeat(2, 1fr);
 }
-.columns--3 {
+.l-columns--3 {
   grid-template-columns: repeat(3, 1fr);
 }
-.columns--4 {
+.l-columns--4 {
   grid-template-columns: repeat(4, 1fr);
 }
@@ Línea 508: / Línea 510: @@
 <sxh html>
-<div class="columns columns--3">
+<div class="l-columns l-columns--3">
   <div>
-    <h2>Column A</h2>
+    <h2>Column A </h2>
   </div>
   <div >
-    <h2>Column B</h2>
+    <h2>Column B</h2>
   </div>
   <div>
-    <h2>Column C</h2>
+    <h2>Column C </h2>
   </div>
   <div>
-    <h2>Column D</h2>
+    <h2>Column D</h2>
   </div>
   <div>
-    <h2>Column E</h2>
+    <h2>Column E</h2>
   </div>
   <div>
-    <h2>Column F</h2>
+    <h2>Column F</h2>
   </div>
 </div>
 </sxh>
@@ Línea 534: / Línea 536: @@
 <sxh css>
-.columns {
+.l-columns {
   display: grid;
   &--4 {
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(4, 1fr);
   }
   &__area {
-    // Si tuvieras más estilos para el área, irían aquí
+    // Si tuvieras más estilos para el área, irían aquí
-    &--span2 {
+    &--span2 {
-      grid-column: span 2;
+      grid-column: span 2;
-    }
+    }
   }
 }
 </sxh>
@@ Línea 552: / Línea 554: @@
 <sxh html>
-  <div class="columns columns--4">
+  <div class="l-columns l-columns--4">
-    <div class="columns__area"></div>
+    <div class="l-columns__area"></div>
-    <div class="columns__area"></div>
+    <div class="l-columns__area"></div>
-    <div class="columns__area"></div>
+    <div class="l-columns__area"></div>
-    <div class="columns__area"></div>
+    <div class="l-columns__area"></div>
-    <div class="columns__area"></div>
+    <div class="l-columns__area"></div>
-    <div class="columns__area columns__area--span2"></div>
+    <div class="l-columns__area l-columns__area--span2"></div>
-    <div class="columns__area"></div>
+    <div class="l-columns__area"></div>
   </div>
 </sxh>
   * Mas información
-    * [[https://webdesign.tutsplus.com/how-to-build-web-form-layouts-with-css-grid--cms-28776t|How to Build Web Form Layouts With CSS Grid]]
+    * [[https://webdesign.tutsplus.com/how-to-build-web-form-layouts-with-css-grid--cms-28776t|How to Build Web Form Layouts With CSS Grid]]
-    * [[https://www.scale.at/blog/responsive-form-layout-css-grid|Tutorial: A Responsive Form Layout with CSS Grid]]
+    * [[https://www.scale.at/blog/responsive-form-layout-css-grid|Tutorial: A Responsive Form Layout with CSS Grid]]
 ==== grid-template-areas ====
@@ Línea 573: / Línea 575: @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>TODO supply a title</title>
+        <title>TODO supply a title</title>
-        <meta charset="UTF-8">
+        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <style>
+        <style>
-            .contenedor {
+            .contenedor {
-                display: grid;
+                display: grid;
-                grid-template-areas:
+                grid-template-areas:
-                  "cabecera cabecera cabecera cabecera cabecera"
+                  "cabecera cabecera cabecera cabecera cabecera"
-                  "lateral-izquierdo cuerpo cuerpo cuerpo lateral-derecho"
+                  "lateral-izquierdo cuerpo cuerpo cuerpo lateral-derecho"
-                  "pie pie pie pie pie";
+                  "pie pie pie pie pie";
-            }
+            }
             .cabecera {
-                grid-area: cabecera;
+                grid-area: cabecera;
-            }
+            }
             .cuerpo {
-                grid-area: cuerpo;
+                grid-area: cuerpo;
-            }
+            }
             .lateral-izquierdo {
-                grid-area: lateral-izquierdo;
+                grid-area: lateral-izquierdo;
-            }
+            }
             .lateral-derecho {
-                grid-area: lateral-derecho;
+                grid-area: lateral-derecho;
-            }
+            }
             .pie {
-                grid-area: pie;
+                grid-area: pie;
-            }
+            }
         </style>
-    </head>
+    </head>
     <body>
-        <div class="contenedor">
+        <div class="contenedor">
-            <div class="cabecera">CABECERA</div>
+            <div class="cabecera">CABECERA</div>
-            <div class="lateral-izquierdo">IZQUIERDA</div>
+            <div class="lateral-izquierdo">IZQUIERDA</div>
-            <div class="cuerpo">CUERPO</div>
+            <div class="cuerpo">CUERPO</div>
-            <div class="lateral-derecho">DERECHA</div>
+            <div class="lateral-derecho">DERECHA</div>
-            <div class="pie">PIE</div>
+            <div class="pie">PIE</div>
-        </div>
+        </div>
-    </body>
+    </body>
 </html>
@@ Línea 624: / Línea 626: @@
 Mas información:
   * [[https://css-tricks.com/almanac/properties/g/grid-template-areas/|grid-template-areas]]
   * [[https://www.smashingmagazine.com/understanding-css-grid-template-areas/|Understanding CSS Grid: Grid Template Areas]]
 ===== Reglas de Layout =====
 Para hacer una clase de Layout hay que seguir las siguientes reglas:
   * Siempre con dos elementos.
-    * El ''div'' principal, al que llamaremos "padre"
+    * El ''div'' principal, al que llamaremos "padre"
-    * Los ''div'' hijos que llamaremos "áreas" (Es para seguir la nomenclatura de grid)
+    * Los ''div'' hijos que llamaremos "áreas" (Es para seguir la nomenclatura de grid)
   * El CSS solo debe tener cosas para modificar la posición (y a veces tamaño) de las Áreas pero no cambiar ni sus colores, fuentes, etc.
   * Puede ser optativo poner en las areas la clase del elemento si no tiene utilidad.
   * Las clases CSS de los elementos que son area se llamará ''<nowiki>&-area</nowiki>'' o ''<nowiki>&-areaYYYY</nowiki>''.
 <sxh css>
-.extremo {
+.l-extremo {
   display:flex
   &__area-izquierda {
-    margin-right: auto;
+    margin-right: auto;
   }
   &__area-derecha {
-    margin-left: auto;
+    margin-left: auto;
   }
 }
-.columns {
+.l-columns {
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   @for $i from 1 to 12 {
-    &--#{$i} {
+    &--#{$i} {
-      grid-template-columns: repeat($i, 1fr);
+      grid-template-columns: repeat($i, 1fr);
-    }
+    }
   }
   &__area {
   }
 }
 </sxh>
 <sxh html>
-<div class="extremo">
+<div class="l-extremo">
-    <div class="extremo__area-izquierda">
+    <div class="l-extremo__area-izquierda">
-        <div class="c-button">Pulsar Izquierda</div>
+        <div class="c-button">Pulsar Izquierda</div>
-    </div>
+    </div>
-    <div class="extremo__area-derecha">
+    <div class="l-extremo__area-derecha">
-        <div class="c-button">Pulsar Derecha</div>
+        <div class="c-button">Pulsar Derecha</div>
-    </div>
+    </div>
 </div>
 </sxh>
   * En un área se podría poner un componente ya que sus propiedades CSS no van a //chocar//.
 <sxh html>
-<div class="extremo">
+<div class="l-extremo">
-    <div class="extremo__area-izquierda c-button">Pulsar Izquierda</div>
+    <div class="l-extremo__area-izquierda c-button">Pulsar Izquierda</div>
-    <div class="extremo__area-derecha c-button">Pulsar Derecha</div>
+    <div class="l-extremo__area-derecha c-button">Pulsar Derecha</div>
 </div>
 </sxh>
@@ Línea 691: / Línea 693: @@
 Artículos en general sobre Layout
   * [[http://1linelayouts.glitch.me/|1-Line Layouts.10 Modern CSS layout and sizing techniques]]
   * [[https://moderncss.dev/|Modern CSS Solutions]]
@@ Línea 702: / Línea 704: @@
 <sxh html>
 <landing-page>
   <landing-page__cabecera>CABECERA</landing-page__cabecera>
   <landing-page__lateral-izquierdo>IZQUIERDA</landing-page__lateral-izquierdo>
   <landing-page__cuerpo>CUERPO</landing-page__cuerpo>
   <landing-page__lateralDerecho>DERECHA</landing-page__lateral-derecho>
   <landing-page__pie>PIE</landing-page__pie>
 </landing-page>
 </sxh>