Guia do designer para Flexbox e grade

O que os designers precisam saber sobre essas ferramentas de layout transformacional.

O CSS percorreu um longo caminho desde a sua introdução em 1996, mas as ferramentas que temos disponíveis para o layout não mudaram muito. Os layouts de tabela eram incrivelmente rígidos demais, os layouts baseados em flutuação eram basicamente um hack, os layouts baseados em posicionamento não eram adaptáveis ​​e nenhum podia lidar com muita complexidade de maneira eficiente. Não me interpretem mal - esses métodos nos levaram muito longe, mas não se destinam a fins de layout complexos.

As deficiências desses métodos antigos de layout tornaram-se ainda mais aparentes com o design responsivo da Web, no qual é fundamental abraçar a fluidez da Web.

Com o flexbox e o grid, finalmente temos ferramentas destinadas especificamente ao layout, que são mais eficientes e livres de hacks, necessárias com os métodos de layout anteriores. Elas abrem novas possibilidades para problemas antigos, possibilitam coisas que antes não eram possíveis e resolvem problemas reais que enfrentamos com um design responsivo da web.

Flexbox

O Flexbox, também conhecido como caixas flexíveis de CSS, é um novo método de layout que nos fornece controle de alinhamento que nenhum outro método CSS pode produzir. Ele se destaca no 'micro layout': a capacidade de alinhar, solicitar e distribuir espaço entre os itens em um contêiner ou alterar a largura ou a altura de um elemento para melhor preencher o espaço disponível.

Embalagem melhorada

No Design da Web responsivo, a largura disponível varia conforme a largura da janela de visualização muda de tamanho. Isso pode levar a quebra de conteúdo não intencional, especialmente quando o conteúdo é maior do que o projetado ou o contêiner do conteúdo é muito estreito. Provavelmente todos já vimos antes: o design é responsável pelo tamanho 'ideal' do conteúdo, mas assim que é implementado e o conteúdo real é adicionado, o conteúdo passa para a próxima linha, porque não havia espaço suficiente ou quebras de seu conteúdo. recipiente. Ambos não são ideais e podem causar a quebra de layouts.

O problema é não ter certeza de que o espaço disponível sempre será grande o suficiente para acomodar conteúdo que pode variar em tamanho. Tradicionalmente, usamos consultas de mídia CSS para ajustar o layout em pontos de interrupção específicos, a fim de atenuar problemas com quebra de conteúdo. Mas as consultas de mídia não levam em consideração o tamanho do conteúdo em si - elas respondem a uma largura ou altura explícitas. Isso geralmente resulta em uma quantidade excessiva de consultas de mídia para controlar uma parte específica do conteúdo em pontos de interrupção explícitos.

Exemplo de embalagem melhorada com o Flexbox

O Flexbox resolve esse problema, permitindo-nos aproveitar o espaço disponível e agrupar o conteúdo quando não estiver. Esse comportamento de ajuste automático não é apenas conveniente, mas melhora a capacidade de manutenção, porque não precisamos confiar no ponto de interrupção para ajustar manualmente o estilo. O exemplo acima demonstra esse comportamento: exiba o rótulo do local adjacente ao título, se houver espaço suficiente disponível e alinhe o rótulo do local à esquerda abaixo do título, se não houver espaço suficiente disponível.

Métodos tradicionais, como flutuar, teriam resultado no rótulo de localização alinhado à direita em viewports menores, o que é menos que o ideal. Você pode corrigir isso flutuando o rótulo para a esquerda em um ponto de interrupção específico. O problema dessa abordagem agora é que você depende de um ponto de interrupção para alterar o estilo do seu conteúdo, que pode variar em tamanho.

Espaçamento e alinhamento aprimorados

Quando se trata de espaçamento e alinhamento em CSS, tivemos que ser espertos para realizar qualquer coisa que não fosse o comportamento padrão. Mesmo efeitos que parecem triviais podem ser complicados em CSS, como alinhamento vertical ou divisão uniforme de espaço entre itens, devem contar com soluções alternativas ou hacks. Algumas coisas são absolutamente impossíveis de alcançar.

O Flexbox resolve isso, permitindo a distribuição do espaço entre um número desconhecido de itens dentro de uma área de largura ou altura desconhecida e alinhando itens no eixo X ou Y. Funciona como as ferramentas de design, como Sketch ou Illustrator, podem controlar o espaçamento e o alinhamento, permitindo o controle que esperávamos na Web.

Exemplo de melhor distribuição de espaço com o Flexbox

Um ótimo exemplo desse controle pode ser visto acima: os itens de navegação são distribuídos uniformemente, centralizados verticalmente e o primeiro e o último item são nivelados na borda do contêiner de navegação. Isso teria sido impossível usando métodos tradicionais, como aplicar bloco embutido nos itens ou confiar no layout da tabela.

Ordem de origem

A ordem de origem refere-se à ordem na qual os elementos são exibidos na página com base em onde eles aparecem no HTML. Por padrão, os elementos serão exibidos de cima para baixo e da esquerda para a direita por padrão - sua largura sendo determinada por sua propriedade de exibição.

A ordem de origem natural do documento deve guiá-lo ao pensar em como o seu design se adaptará a várias larguras da janela de exibição, mas há momentos em que é útil modificá-lo para reorganizar itens. A única maneira de fazer isso antes do flexbox era ocultar o elemento e mostrar outro, resultando em HTML duplicado ou confiar no posicionamento absoluto, que nem sempre funciona quando o conteúdo pode variar de tamanho. Com o flexbox, você pode simplesmente modificar a ordem dos itens flex sem a necessidade de modificar a estrutura HTML subjacente.

Exemplo de pedido de itens com o Flexbox

O exemplo acima demonstra o pedido no Flexbox: exibimos o logotipo no lado esquerdo do rodapé, que é consistente com o cabeçalho. Em pequenas viewports, exibimos os locais antes do logotipo. Essa reordenação faz sentido porque os locais são mais importantes nesse contexto.

Layout da grade

O layout da grade CSS é um sistema de layout bidimensional criado especificamente para a Web. Isso nos permite dividir a página em regiões que podem ser definidas em termos de tamanho, posição e camada, resultando em uma estrutura nativa incrivelmente poderosa.

Fit for Purpose

O CSS nunca teve uma ferramenta de layout adequada à finalidade, por isso tivemos que ser bastante inventivos com a maneira de aplicar uma grade ao nosso trabalho. Estruturas de grade surgiram para preencher essa necessidade, mas não sem a introdução de seus próprios problemas. Muitas das estruturas de grade mais populares requerem definição de layout na marcação, o que pode levar a inchaço do código, problemas de manutenção e desfoca a separação da estrutura e apresentação do documento.

Com a grade, não precisamos mais de uma estrutura de grade - é uma estrutura nativa inserida no CSS. Ele nos permite definir o layout em CSS de uma maneira intuitiva, abraçando o tempo todo a fluidez padrão da Web. Os recursos desta nova ferramenta de layout são infinitos e permitem a criação de layouts que só eram possíveis com Javascript antes de sua chegada.

Exemplo de layout de grade

Layouts da Web de próxima geração

No que diz respeito ao layout, ficamos presos há um bom tempo. Os padrões estabelecidos e as limitações das ferramentas de layout anteriores em CSS nos levaram ao caminho da homogeneidade de layout no passado. Você não precisa ir muito longe na Web para identificá-lo: cabeçalho, conteúdo principal, barra lateral, rodapé.

A chegada do design responsivo da web iniciou algumas novas idéias para o layout da página e, com isso, alguns bons padrões estão começando a surgir: abandone a barra lateral, simplifique o design e concentre-se no conteúdo. Mas também estamos vendo padrões emergentes que se tornaram tão onipresentes que ouvimos a exclamação de que "todos os sites têm a mesma aparência".

O layout da grade nos permitirá sair da rotina em que estivemos e nos fornecer as ferramentas necessárias para criar os layouts da próxima geração. Finalmente, podemos construir em torno do conteúdo em vez de forçá-lo a padrões de design genéricos que podem ser encontrados em qualquer outro site responsivo.

Uma palavra de cautela

É importante observar que nem todos os navegadores oferecem suporte aos recursos flexbox e grade. Devemos levar em consideração quem é nosso público-alvo para cada projeto e determinar se a maioria dos usuários se beneficiará desses recursos mais avançados, além de oferecer uma alternativa sensata para navegadores sem suporte. É perfeitamente aceitável fornecer aos usuários em navegadores legados uma versão simplificada da sua interface do usuário e aprimorá-la para usuários em navegadores mais recentes.

Tem mais. Muito mais.

Apenas arranhamos a superfície do que o flexbox e a grade podem fazer. Felizmente, existem muitas ótimas documentações disponíveis que abordam os recursos dessas novas ferramentas de layout. Aqui estão alguns dos meus favoritos:

Flexbox

Grade

Qualquer pessoa que esteja construindo para a Web está dolorosamente ciente de várias limitações quando se trata de layout em CSS. Muitas vezes, isso exigia comprometer o design para que funcionasse conforme o esperado no desenvolvimento, ou pior, contando com o Javascript para implementar o comportamento que precisávamos.

A chegada do layout da caixa flexível e da grade sinaliza uma nova era de layout na Web. Devemos adotar uma nova mentalidade no que diz respeito ao layout, a fim de não sermos limitados pelos hábitos, desvantagens e hacks do passado. Vamos adotar essas novas ferramentas e renovar nossa exploração para o que for possível com o layout na Web.