Novos recursos CSS que estão mudando o design da web

Houve um tempo em que o web design ficou monótono. Designers e desenvolvedores construíram os mesmos tipos de sites repetidamente, tanto que fomos ridicularizados por pessoas em nosso próprio setor por criar apenas dois tipos de sites:

qual dos dois sites possíveis você está projetando atualmente? pic.twitter.com/ZD0uRGTqqm

— Jon Gold (@jongold) 2 de fevereiro de 2016

Esse é o limite do que nossas mentes “criativas” podem alcançar? Esse pensamento enviou uma incontrolável pontada de tristeza em meu coração.

Não quero admitir, mas talvez fosse o melhor que podíamos fazer naquela época. Talvez não tivéssemos ferramentas adequadas para fazer designs criativos. As demandas da web estavam evoluindo rapidamente, mas estávamos presos a técnicas antigas como carros alegóricos e mesas.

Hoje, o cenário do design mudou completamente. Estamos equipados com ferramentas novas e poderosas — CSS Grid, CSS custom properties, CSS shapes e CSS writing-mode , para citar alguns — que podemos usar para exercitar nossa criatividade.

Como CSS Grid mudou tudo

Grids são essenciais para web design; você já sabia disso. Mas você já parou para se perguntar como você projetou a grade que você usa principalmente?

A maioria de nós não. Usamos a grade de 12 colunas que se tornou um padrão em nossa indústria.

• Mas por que usamos a mesma grade?
• Por que as grades são feitas de 12 colunas?
• Por que nossas grades são dimensionadas igualmente?

Aqui está uma resposta possível para o porquê de usarmos a mesma grade: Não queremos fazer as contas .

No passado, com grades baseadas em flutuação, para criar uma grade de três colunas, você precisava calcular a largura de cada coluna, o tamanho de cada medianiz e como posicionar cada item da grade. Em seguida, você precisava criar classes no HTML para estilizá-las adequadamente. Foi bem complicado.

Para facilitar as coisas, adotamos frameworks de grade. No início, frameworks como 960gs e 1440px nos permitiam escolher entre grades de 8, 9, 12 e até 16 colunas. Mais tarde, o Bootstrap ganhou a guerra dos frameworks. Como o Bootstrap permitia apenas 12 colunas, e mudar isso era uma dor, acabamos optando por 12 colunas como padrão.

Mas não devemos culpar o Bootstrap. Era a melhor abordagem naquela época. Quem não gostaria de uma boa solução que funcionasse com o mínimo de esforço? Com o problema da grade resolvido, voltamos nossa atenção para outros aspectos do design, como tipografia, cor e acessibilidade.

Agora, com o advento do CSS Grid, os grids se tornaram muito mais simples . Não precisamos mais temer a matemática da grade. Tornou-se tão simples que eu diria que criar uma grade é mais fácil com CSS do que em uma ferramenta de design como o Sketch!

Por quê?

Digamos que você queira fazer uma grade de 4 colunas, cada coluna com tamanho de 100 pixels. Com CSS Grid, você pode escrever 100px quatro vezes na declaração grid-template-columns , e uma grade de 4 colunas será criada.

 .grid { display: grid; grid-template-columns: 100px 100px 100px 100px; grid-column-gap: 20px; } 

Se você quiser uma grade de 12 colunas, basta repetir 100px 12 vezes.

 .grid { display: grid; grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px; grid-column-gap: 20px; } 

Sim, o código não é bonito, mas não estamos preocupados em otimizar a qualidade do código (ainda) — ainda estamos pensando em design. CSS Grid torna muito fácil para qualquer pessoa – mesmo um designer sem conhecimento de codificação – criar uma grade na web.

Se você deseja criar colunas de grade com larguras diferentes, basta especificar a largura desejada em sua declaração grid-template-columns e pronto.

 .grid { display: grid; grid-template-columns: 100px 162px 262px; grid-column-gap: 20px; } 

Tornando as grades responsivas

Nenhuma discussão sobre CSS Grid está completa sem falar sobre o aspecto responsivo. Existem várias maneiras de tornar o CSS Grid responsivo. Uma maneira (provavelmente a mais popular) é usar a unidade fr . Outra maneira é alterar o número de colunas com consultas de mídia.

fr é um comprimento flexível que representa uma fração. Quando você usa a unidade fr , os navegadores dividem o espaço aberto e alocam as áreas para colunas com base no múltiplo fr . Isso significa que para criar quatro colunas de tamanho igual, você escreveria 1fr quatro vezes.

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 20px; } 

Vamos fazer alguns cálculos para entender por que quatro colunas de tamanhos iguais são criadas .

Primeiro, vamos supor que o espaço total disponível para a grade seja 1260px .

Antes de alocar largura para cada coluna, CSS Grid precisa saber quanto espaço está disponível (ou restante). Aqui, ele subtrai declarações de grip-gap de 1260px . Como cada espaço é de 20px , ficamos com 1200px para o espaço disponível. (1260 - (20 * 3) = 1200) .

Em seguida, soma os múltiplos de fr . Nesse caso, temos quatro múltiplos de 1fr , então os navegadores dividem 1200px por quatro. Cada coluna tem, portanto, 300px . É por isso que temos quatro colunas iguais.

No entanto, as grades criadas com a unidade fr nem sempre são iguais !

Ao usar fr , você precisa estar ciente de que cada unidade fr é uma fração do espaço disponível (ou restante).

Se você tiver um elemento mais largo do que qualquer uma das colunas criadas com a unidade fr , o cálculo precisa ser feito de forma diferente.

Por exemplo, a grade abaixo tem uma coluna grande e três colunas pequenas (mas iguais), embora tenha sido criada com grid-template-columns: 1fr 1fr 1fr 1fr .

Depois de dividir 1200px em quatro e alocar 300px para cada uma das colunas 1fr , os navegadores percebem que o primeiro item da grade contém uma imagem de 1000px . Como 1000px é maior que 300px , os navegadores optam por alocar 1000px para a primeira coluna.

Isso significa que precisamos recalcular o espaço restante.

O novo espaço restante é 1260px - 1000px - 20px * 3 = 200px ; esses 200px são então divididos por três de acordo com a quantidade de frações restantes. Cada fração tem então 66px . Espero que isso explique por que as unidades fr nem sempre criam colunas de largura igual.

Se você deseja que a unidade fr crie colunas de largura igual sempre, você precisa forçá-la com minmax(0, 1fr) . Para este exemplo específico, você também desejará definir a propriedade max-width da imagem como 100%.

Nota : Rachel Andrew escreveu um artigo incrível sobre como diferentes valores CSS (min-content, max-content, fr, etc.) afetam o tamanho do conteúdo. Vale a pena ler!

Grades de largura desigual

Para criar grades com larguras desiguais, basta variar o múltiplo de fr. Abaixo está uma grade que segue a proporção áurea, onde a segunda coluna é 1,618 vezes a primeira coluna e a terceira coluna é 1,618 vezes a segunda coluna.

 .grid { display: grid; grid-template-columns: 1fr 1.618fr 2.618fr; grid-column-gap: 1em; } 

Alterando grades em diferentes pontos de interrupção

Se você quiser alterar a grade em pontos de interrupção diferentes, poderá declarar uma nova grade em uma consulta de mídia.

 .grid { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 1em; } @media (min-width: 30em) { .grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }

Não é fácil criar grids com CSS Grid? Designers e desenvolvedores anteriores teriam matado por tal possibilidade.

Grades Baseadas em Altura

Era impossível fazer grades com base na altura de um site anteriormente porque não havia uma maneira de sabermos a altura da janela de visualização. Agora, com unidades de viewport, CSS Calc e CSS Grid, podemos até criar grades com base na altura da viewport.

Na demonstração abaixo, criei quadrados de grade com base na altura do navegador.

Jen Simmons tem um ótimo vídeo que fala sobre o design para a quarta borda — com CSS Grid. Eu recomendo muito que você assista.

Posicionamento de itens de grade

Posicionar itens de grade era uma grande dor no passado porque você tinha que calcular a propriedade margin-left .

Agora, com CSS Grid, você pode colocar itens de grid diretamente com CSS sem os cálculos extras.

 .grid-item { grid-column: 2; /* Put on the second column */ } 

Você pode até dizer a um item de grade quantas colunas ele deve ocupar com a palavra-chave span .

 .grid-item { /* Put in the second column, span 2 columns */ grid-column: 2 / span 2; } 

Inspirações

O CSS Grid permite que você organize as coisas com tanta facilidade que você pode criar muitas variações do mesmo site rapidamente. Um excelente exemplo é a página pessoal de Lynn Fisher.

Se você quiser saber mais sobre o que CSS Grid pode fazer, confira o laboratório de Jen Simmon, onde ela explora como criar diferentes tipos de layouts com CSS Grid e outras ferramentas.

Para saber mais sobre CSS Grid, confira os seguintes recursos:

• Master CSS Grid, Rachel Andrew e Jen Simmons Tutoriais em vídeo
• Layout Land, Jen Simmons Uma série de vídeos sobre layout
• Workshop de layout CSS, Rachel Andrew Um curso de layout CSS
• Aprenda CSS Grid, Jonathan Suh Um curso gratuito sobre CSS Grid.
• Criaturas de grade, Dave Geddes Uma maneira divertida de aprender CSS Grid

Projetando com formas irregulares

Estamos acostumados a criar layouts retangulares na web porque o modelo de caixa CSS é um retângulo. Além de retângulos, também encontramos maneiras de criar formas simples, como triângulos e círculos.

Hoje, não precisamos parar por aí. Com formas CSS e clip-path à nossa disposição, podemos criar formas irregulares sem muito esforço.

Por exemplo, Aysha Anggraini experimentou um layout inspirado em quadrinhos com CSS Grid e clip path .

Hui Jing explica como usar formas CSS de uma forma que permite que o texto flua ao longo da curva de Beyonce.

Se você quiser se aprofundar, Sara Soueidan tem um artigo para ajudá-lo a criar layouts não retangulares.

As formas CSS e clip-path oferecem infinitas possibilidades para criar formas personalizadas exclusivas para seus designs. Infelizmente, em termos de sintaxe, as formas CSS e clip-path não são tão intuitivos quanto o CSS Grid. Felizmente, temos ferramentas como o Clippy e o Shape Path Editor do Firefox para nos ajudar a criar as formas que queremos.

Alternando o fluxo de texto com o writing-mode CSS

Estamos acostumados a ver as palavras fluindo da esquerda para a direita na web porque a web é predominantemente feita para pessoas que falam inglês (pelo menos foi assim que começou).

Mas algumas linguagens não fluem nessa direção. Por exemplo, as palavras chinesas podem ser lidas de cima para baixo e da direita para a esquerda.

O writing-mode CSS faz o texto fluir na direção nativa de cada idioma. Hui Jing experimentou um layout baseado em chinês que flui de cima para baixo e da direita para a esquerda em um site chamado Penang Hokkien. Você pode ler mais sobre seu experimento em seu artigo, “The One About Home”.

Além dos artigos, Hui Jing tem uma ótima palestra sobre tipografia e writing-mode , “When East Meets West: Web Typography and How It Can Inspire Modern Layouts”. Eu encorajo você a assistir.

Mesmo que você não projete para idiomas como o chinês, isso não significa que você não possa aplicar o writing-mode CSS ao inglês. Em 2016, quando criei o Devfest.asia, exercitei um pequeno músculo criativo e optei por girar o texto com writing-mode .

O laboratório de Jen Simmons também contém muitos experimentos com writing-mode . Recomendo muito conferir também.

Esforço e engenhosidade percorrem um longo caminho

Mesmo que as novas ferramentas CSS sejam úteis, você não precisa de nenhuma delas para criar sites exclusivos. Um pouco de engenhosidade e algum esforço vão longe.

Por exemplo, no Super Silly Hackathon, Cheeaun gira todo o site em -15 graus e faz você parecer bobo ao ler o site.

Darin Senneff fez um avatar de login animado com trigonometria e GSAP. Veja como o macaco é fofo e como ele cobre os olhos quando você foca no campo de senha. Semelhante ao formulário de login interativo, há também uma calculadora muito interessante e interativa que ajuda a estimar a quantidade de receitas perdidas ao usar serviços externos, como JustEat!

Quando criei a página de vendas do meu curso, Aprenda JavaScript, adicionei elementos que fazem o aluno de JavaScript se sentir em casa.

Empacotando

Um web design exclusivo não é apenas sobre layout. É sobre como o design se integra ao conteúdo. Com um pouco de esforço e engenhosidade, todos nós podemos criar designs únicos que falem com nosso público. As ferramentas à nossa disposição hoje facilitam nosso trabalho.

A questão é, você se importa o suficiente para fazer um design único? Espero que você faça.