Veamos ahora el ejemplo o el patrón que se llama La Iosif este básicamente es cuando el diseño va cambiando
los Dib se posicionan en forma diferente en cada media Cuadri así que abrimos este índex y vamos a abrirlo
en Live Server y vamos a abrir lo que viene siendo el diseño en Firefox Developer Edition puedes ver
que si abrimos el HTML tenemos un contenedor.
Después tenemos una idea tenemos un main y este Main tiene dos entradas.
Entonces veamos como queda en lo que viene siendo el HTML.
Si lo hacemos más pequeño bueno quedaría de esta forma lo que vamos a hacer es colocar está este Sidebar
en la parte inferior y cuando esté un poco más grande estas dos entradas van a estar arriba y van a
estar mitad y mitad.
Eso más bien serían un tamaño mediano y finalmente vamos a tener las dos entradas del lado izquierdo
y el Sarver del lado derecho.
Cuando esté ya en un dispositivo más grande esto va a requerir una buena cantidad de código.
Ya vimos un ejemplo de la Shifter vamos a verlo un poco más avanzado se va a colocar en este contenedor
Layout Shifter y vamos a agregar esa clase lo vamos a agregar sin acuerdo porque desde aquí ya tenemos
que hacer algunos cambios desde el dispositivo móvil de hecho tendrá que ser en Firefox Developer Edition.
Desde aquí ya tenemos que hacer cambios porque éste tiene que estar abajo entonces lo primero que vamos
a hacer es agregar Grit display Grid y si recuerdas hemos definido columnas con Grit template Columns
en este caso no son columnas porque es el dispositivo más pequeño me interesa más bien crear un grito
de arriba hacia abajo en lugar de que sean Colombes aquí sería Rous y lo vamos a hacer de la siguiente
forma vamos a agregar 50 por ciento y 50 por ciento si guardamos cambios nuestro diseño se mantiene
prácticamente igual pero habilitã Cirith y puedes ver que tenemos una parte arriba y una parte abajo
siguiente paso es esta seit pasarlo a la parte de abajo puedes ver que tenemos estos números verticales
entonces tendría que ir del 2 hacia el 3 donde sea colocar aquí a 6 y vamos a colocar Grit rojo y verde
el 3 del 2 al 3 guardamos cambios y puedes ver que se coloca en la parte inferior entonces eso era exactamente
lo que queríamos para este caso puedes ver que después de 50 y 50 no es 50 y 50 como tal es decir puedes
ver que la parte de arriba es mucho más grande que la de abajo pero su contenido o su tamaño es definido
por el contenido que tiene después vamos a agregar un media query roba media Minuit y voy a colocar
7 6 8 píxeles para un tamaño un poco más mediano de esta altura.
Pero aquí viene algo muy muy importante no puedo utilizar este Layout Shifter porque si recuerdas mencioné
anteriormente que cuando utilizas GRID o Flex solamente afecta al primer nivel de hijos.
En este caso nos interesa posicionar los artículos por lo tanto contenido principal tendría que ser
nuestro selector
contenido principal de habilitamos display Grid y como nos interesa que una entrada está del lado izquierdo
y una del lado derecho gritan y Columns temple y Columns íbamos a colocar repito 2 una fracción se recuerda
que hay diferentes formas 50 por ciento 50 por ciento un F.R una férrea y muchas formas de hacerlo.
Guardamos cambios y puede ser que tenemos las dos columnas se colocará el gap Column gap con un gap
va a ser un RAAM guardamos cambios y cuando tenemos la separación probablemente 3mm será mejor tener
más separación y puedes ver que se ve bastante bien si lo hacemos más pequeño.
Puedes ver que tenemos las dos entradas una arriba de otra va creciendo nuestro diseño y tenemos las
dos entradas este se mantiene abajo y finalmente la idea es que cuando sea aún más grande este se posicione
arriba este otro abajo y esta barra pase de este lado.
Pero antes de continuar veamos el avance que llevamos en Crom puedes ver que en Crom se encima en lo
que vienen siendo las barras Crom.
Si se lo tomas como muy literal de decir bueno estás colocando 50 y 50 y aunque si encima no me importa
tú pediste 50 y 50 esto se soluciona con otra regla que quería introducir hasta esta parte que se conoce
como auto Grid auto Rous.
Pero los valores en lugar de definirle un número fijo porque Crom no va a tomar fijo puedes utilizar
una propiedad que se minimax y le pasas mini contén content asegúrate de describir lo bien que se ponga
de un color correcto y MAKS Content y eso es lo que hace es decir bueno se va a generar una cantidad
de robos conforme sea necesaria que el contenido lo requiera y su tamaño va a ser mínimo el contenido
que haya en la cantidad más mínima y máximo la cantidad máxima de contenido.
Si guardas cambios esto lo corrige y vamos a tener el mismo resultado en Firefox Developer Edition entonces
se va viendo bien.
Siguiente paso bueno vamos a trabajar con el medio y un poco más grande algo que a mi me gusta hacer
es agrupar mis selectores consumirían y conforme va creciendo tu proyecto va a ser mucho mejor.
Ya en este caso estamos agregando más contenido.
Por lo tanto aquí voy a colocar media Minuit iba a ser 992 píxeles y vamos a colocar el selector de
la Shifter.
De esta forma aunque sí tengan media cuesta abajo lo que estoy haciendo es ir agrupando mis electores
de esa forma voy a saber que en un lugar del código en el mismo lugar voy a encontrar todos los electores
y Shifter además de que como experiencia de usuario va a ser mucho mejor la que le vas a brindar a tus
usuarios si colocas múltiples colores al final el archivo va a subir de peso unos 20 bits no va a ser
tanto pero la experiencia va a ser mucho mejor si ya tienes experiencia con mi Aquaris.
Muchas veces se recomienda colocar los media Aquaris abajo con un gran bloque de código.
Eso no se debe de hacer nunca.
Entonces lo ideal es ir colocando diferentes Aquaris así que vamos a colocar Grit template Roads y vamos
a definir 2.
La idea es colocar las entradas del lado izquierdo y lo que viene siendo el Seibert del lado derecho
a tener 12 Ferre y un F.R Muy importante no es Rousse es Columns porque nos interesa el diseño y columnas
ser que tenemos las dos orita posicionamos estas dos.
El siguiente paso es mover este salvar a ese acá.
Si recuerdas el Seibert de momento tienes un grid Rou que dice dos a tres es decir esta parte de aquí
es decir robo de arriba hacia abajo nos interesa cambiar el rol de 1 a 2 pero también las columnas caballas
de 2 a 3 vamos a colocar la media Minuit 992 píxeles porque tienen que estar empatado con este diseño
que está aquí el SO tiene que aplicarse del mismo en el mismo tamaño si lo pones diferentes tamaños
no es lo adecuado.
El Grid Row iría del 1 al 2 1 2 y Grid Colom iría en este caso de 2 a 3 2 o 3 guardamos cambios pues
el que se posiciona correctamente para tener la separación aquí bueno lo ideal es en esta parte colocar
un Colunga de digamos 2 o 4 Reem creo que es mejor tener un poco de separación se ve bien y el siguiente
paso es que estas dos entradas quiero que esté arriba y abajo.
Si recuerdas este contenido principal hicimos un display Grit lo que voy a hacer aquí es colocar arroba
media Minuit y lo vamos a solucionar colocando contenido principal y vamos a colocar un grid y escribimos
un set sólo que va a hacer es que si aquí le agregamos Grid pero colocando un set hacemos que no tenga
ya Grid este elemento que se coloca arriba y abajo se ve bastante bien y también lo mismo en Firefox
Pradilla.
Es un ejemplo mucho más avanzado porque desde muy pequeño aquí por ejemplo si el Zaibat este tendría
que estar abajo estas dos arriba poco másgrande estas dos se colocan una frente a la otra este se mantiene
abajo y un poco más grande.
También cambia la apariencia del blog y el Ceibal se coloca del lado derecho y de eso trata un layout
Shifter cambiar bastante el diseño conforme el sitio es visitado en diferentes dispositivos en diferentes
tamaños y puede ser que este requiere muchos más Aquaris algo que quisiera notar es que si bien este
es un ejemplo del shifter no es como que el único ejemplo puedes colocar muchos otros ejemplos muchos
elementos en diferentes lugares de tu proyecto.
Básicamente el término se refiere a que los elementos cambian de lugar conforme es el de acuerdo en
el siguiente vídeo Veamos un ejemplo del layout Shifter.
Ahora con flashbacks.