logongas

Herramientas de usuario

Herramientas del sitio

Traza:
clase:daw:diw:1eval:tema05

Diferencias

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

Enlace a la vista de comparación

Ambos lados, revisión anterior Revisión previa
Próxima revisión 		Revisión previa
clase:daw:diw:1eval:tema05 [2020/11/13 17:43]
admin 		clase:daw:diw:1eval:tema05 [2024/01/30 11:59] (actual)
admin [Grid]
Línea 10: Línea 10:
   * [[https://medium.com/@js_tut/the-complete-css-flex-box-tutorial-d17971950bdc|The Complete CSS Flex Box Tutorial]]   * [[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://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]]
  
 Vamos a explicar flex con el siguiente ejemplo: Vamos a explicar flex con el siguiente ejemplo:
Línea 142: Línea 144:
   * [[https://github.com/ohansemmanuel/Understanding-Flexbox/blob/master/05.%20Auto%20margin%20alignment/auto_margin.md|Understanding Flexbox - auto-margin]]   * [[https://github.com/ohansemmanuel/Understanding-Flexbox/blob/master/05.%20Auto%20margin%20alignment/auto_margin.md|Understanding Flexbox - auto-margin]]
  
 +<note tip>
 +{{ :clase:daw:diw:1eval:flex-frog.png?direct&100 |}}
 +Para aprender flexbox puede jugar a [[https://flexboxfroggy.com/#es|Flexbox Froggy - A game for learning CSS flexbox]]
  
 +</note>
  
 ===== Grid ===== ===== Grid =====
Línea 151: Línea 157:
     * [[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)]]
     * {{css_grid_layout_cheatsheet.pdf|}}     * {{css_grid_layout_cheatsheet.pdf|}}
-  * Grid vs FlexBox+  * 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: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 Flexbox?]]
-  * Avanzado+  * Mas información: 
 +    * [[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]] 
Línea 193: Línea 201:
 Ejemplos: Ejemplos:
   * ''grid-template-columns: 1fr 1fr 2fr'' La última columna tendrá el doble de tamaño que las anteriores   * ''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 doble de tamaño que la primera. La última siempre 50px+  * ''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.   * ''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 247: Línea 255:
  
 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]] 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>
 +
 +==== Ejemplo ====
 +Veamos ahora un ejemplo de la diferencia entre ''repeat(4,1fr)'' , ''repeat(auto-fit,100px)'' y ''repeat( auto-fit, minmax( 100px, 1fr ) )''
 +
 +<sxh css>
 +.container {
 +    display:grid;
 +    grid-template-columns: repeat(4,1fr);
 +}
 +.container2 {
 +    display:grid;
 +    grid-template-columns: repeat(auto-fit,100px);
 +}
 +.container3 {
 +    display:grid;
 +    grid-template-columns: repeat( auto-fit, minmax( 100px, 1fr ) );
 +}  
 +.item {
 +    border:1px solid red;
 +}
 +.item2 {
 +    border:1px solid green;
 +}
 +.item3 {
 +    border:1px solid blue;
 +}
 +</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>
 +</sxh>
  
 ==== grid-template-rows ==== ==== grid-template-rows ====
Línea 261: Línea 342:
  
 {{:clase:daw:diw:1eval:grid-gap.png|}} {{:clase:daw:diw:1eval:grid-gap.png|}}
 +
 +
 +<note important>
 +La propiedad ''gap'' también funciona con **flex**</note>
 +
  
  
Línea 306: Línea 392:
     <h2>Column F</h2>     <h2>Column F</h2>
   </div>   </div>
 +</div>
 +</sxh>
 +
 +==== span ====
 +Se puede hacer que un elemento ocupe más de una columna con ''grid-column: span x;'' siendo ''x'' el número de columnas que quieres que se expanda.
 +
 +<sxh css>
 +.l-columns {
 +  display: grid;
 +}
 +
 +.l-columns--4{
 +  grid-template-columns: repeat(4, 1fr);
 +}  
 +
 +.l-columns__area {
 +
 +}
 +.l-columns__area--span-2 {
 +  grid-column: span 2;
 +}
 +</sxh>
 +
 +
 +<sxh html>
 +  <div class="l-columns l-columns--4">
 +    <div class="l-columns__area"></div>
 +    <div class="l-columns__area"></div>
 +    <div class="l-columns__area"></div>
 +    <div class="l-columns__area"></div>
 +    <div class="l-columns__area"></div>
 +    <div class="l-columns__area l-columns__area--span-2"></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://www.scale.at/blog/responsive-form-layout-css-grid|Tutorial: A Responsive Form Layout with CSS Grid]]
 +===== Reglas BEM 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"
 +    * 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>&__area-YYYY</nowiki>''.
 +
 +
 +<sxh css>
 +.l-extremo {
 +  display:flex
 +  
 +  &__area-izquierda {
 +    margin-right: auto;
 +  }
 +  &__area-derecha {
 +    margin-left: auto;
 +  }  
 +}
 +
 +
 +
 +.l-columns {
 +  display: grid;
 +  grid-template-columns: repeat(1, 1fr);
 +
 +  @for $i from 1 to 12 {
 +    &--#{$i} {
 +      grid-template-columns: repeat($i, 1fr);
 +    }    
 +  } 
 +  
 +  &__area {
 +  }
 +}
 +  
 +  
 +</sxh>
 +
 +<sxh html>
 +<div class="l-extremo">
 +    <div class="l-extremo__area-izquierda">
 +        <div class="c-button">Pulsar Izquierda</div>
 +    </div>
 +    <div class="l-extremo__area-derecha">
 +        <div class="c-button">Pulsar Derecha</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="l-extremo">
 +    <div class="l-extremo__area-izquierda c-button">Pulsar Izquierda</div>
 +    <div class="l-extremo__area-derecha c-button">Pulsar Derecha</div>    
 </div> </div>
 </sxh> </sxh>
  
  
-===== Layout ===== 
 Artículos en general sobre Layout Artículos en general sobre Layout
   * [[http://1linelayouts.glitch.me/|1-Line Layouts.10 Modern CSS layout and sizing techniques]]   * [[http://1linelayouts.glitch.me/|1-Line Layouts.10 Modern CSS layout and sizing techniques]]
clase/daw/diw/1eval/tema05.1605285783.txt.gz · Última modificación: 2020/11/13 17:43 por admin

Herramientas de la página

Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: GNU Free Documentation License 1.3
GNU Free Documentation License 1.3 Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki