segunda-feira, 6 de janeiro de 2020

row, row, row

Tanto para Bootstrap quanto Flexbox, o conceito do que se coloca na linha é o dominante na construção de um layout. Porque o que causa maior impacto na variação da resolução dos dispositivos é a questão do WIDTH diferente para telas menores ou maiores. A altura HEIGHT é de certa forma ilimitada, pois na vertical, desde que se aceite a barra de rolagem, não existe limite. A barra de rolagem horizontal é considerado um absurdo nos layouts modernos, mesmo porque é chato pra caramba ficar movendo o dedo na horizontal em um dispositivo, na vertical parece ser mais natural para as pessoas (Salvo Instagram que veio com essa idéia de colocar as coisas na horizontal).

Desta forma a opção por Bootstrap ou Flexbox vai determinar a forma com que pensamos a linha.

Bootstrap
Na imagem abaixo temos tres elementos A, B e C que foram posicionados na linha. Bootstrap vai necessitar que se defina quantas colunas cada um dos itens irá ocupar. A, nesse exemplo ocupa 4 colunas, B ocupa 6 colunas e o restante vai para C (2 colunas), totalizando 12 colunas.

Nesse cenário é necessário que se pense na dimensão de A, B e C nas diversas larguras de dispositivos, <768 (extra-small), >=768 (small), >= 992 (medium) e >=1200 (large). As chamadas media querie (https://www.w3schools.com/css/css3_mediaqueries.asp). Apesar do editor Responsive Size do Genexus entregar um modelo mais visual para a definição das colunas, na prática o que temos mesmo é um conjunto de definições HTML + CSS que farão parte do código da página, basicamente, <div class="row"><div  class="col-xs-12 col-sm-4"> responsáveis pela 'alocação' dos recursos na interface.

O problema Bootstrap é que a segunda linha (se houver), deverá ter o mesmo dimensionamento definido na primeira linha. Então ao se posicionar os elementos na linha, na prática estamos definindo as colunas, não linhas. Se por exemplo, buscarmos criar um layout que inclua uma segunda linha com um item D ocupando as 12 colunas, teremos que aumentar bastante a complexidade do código HTML, visto que teriamos que transformar Row 1 e Row 2 em containers diferentes.


Bootstrap produz um código mais poluido, com muitos containers, rows e cells. Dê uma olhada no source produzido pelo Genexus para ver o emaranhado de <div>'s resultante, até mesmo de interfaces simples. Fazendo uma analogia com o passado, seria algo como ter que colocar <table> dentro de  <table> para posicionar as coisas.


Flexbox
Flexbox vai num caminho diferente e mais simples. Uma linha é um container e o que tem dentro desta são os itens, o layout consiste em incluir os itens na medida em que existe espaço disponível para ser apresentado, na sequencia em que são incluídos (isso pode ser revertido ao oposto também). E dependendo da configuração se não houver espaço se inclui uma "quebra de linha" (wrap).


O que se determina para cada item individualmente é sua largura minima e máxima, (min-width, max-width) ou se o mesmo poderá crescer ou reduzir conforme ocorre o redimensionamento da interface.

Para layouts mais complexos, os itens poderão ser transformados em containers, bastando definir a propriedade display:flex. Nesse cenário poderiamos ter A transformado em A1, A2 e A3, e B em B1, B2, B3, simplesmente incluindo uma definição no style dos itens.


Naturamente flexbox produz código HTML + CSS mais conciso, e praticamente o mesmo efeito obtido por Bootstrap poderá ser realizado com poucas definições em flexbox.

Resumo
Bootstrap busca um controle mais absoluto sobre as colunas, em um mundo onde não temos controle de nada na verdade. Comparando com o Flexbox é muito mais complexo de ser programado, exigindo muita definição e div's.

Flexbox é mais simples, mas vai exigir CSS e definição das media queries de forma manual. Pois o Genexus não oferece um editor Responsive Sizes para o Flexbox. Portanto, será necessário mais 'programação' e interfaces de mais 'baixo nivel' neste cenário, se é que definir classes CSSs pode ser considerado programação.








Nenhum comentário: