Tailwind
Tailwind é um framework CSS focado em utilitários, com isso você consegue escrever uma grande parte do seu código com o mínimo de CSS próprio, aumentando a produtividade, clareza e consistência do código. Além de ser facilmente customizável, já conta com um reset css padrão para garantir que seu CSS funcione como deveria.
O código
Vamos iniciar montando nossa estrutura HTML básica e importar o CDN do Tailwind como passado na documentação.
Feito isso, já podemos utilizar os utilitários do Tailwind. O próximo passo é definir o container da nossa página.
Para definir um container é muito simples e bastante parecido com o Bootstrap. Basta utilizar a classe container. Diferente do Bootsrap, a classe container não vem centralizada e nem com padding por padrão, mas podemos facilmente adiciona-los utilizando as classes mx-auto e px-4.
Container definido, agora vamos fazer nosso card para montarmos nossa grid.
Um card bem simples, contendo uma imagem aleatória provida pela Lorem Picsum, um título e uma descrição.
Para o corpo do card, utilizaremos:
- max-w-xs para limitar o tamanho máximo do nosso card, que nos dará até 20 rem (320 px) de largura
- mt-4 para dar uma margem top de 1 rem (16 px)
- bg-white para garantir que a cor de fundo do nosso carde seja sempre branca
- shadow para aplicar uma leve sombra no nosso card
Perceba que todos as classes são utilitários do Tailwind o que nos leva a zero linhas de CSS escritas até agora.
Vamos replicar este card algumas vezes para podermos fazer nossa grid de cards, como não temos nenhum container definindo o fluxo desses cards isso fará com que crie uma enorme coluna de cards e não queremos isto, então vamos criar uma div para alinhar os cards na horizontal criando uma linha para cada 3 cards e assim teremos nossa grid.
O resultado que teremos é este:
Agora vamos adicionar um botão em cima dos cards para logo em seguida iniciar a lógica que transformará nossa grid de cards em uma lista.
Para centralizar o botão na horizontal utilizamos a classe flex junto com justify-center e my-8 para criar uma margem vertical.
No botão, para estilizar usamos um background azul: bg-blue-500, texto branco: text-white, um espaçamento horizontal: px-4 e a borda arredonda: rounded-full.
Onde a mágica acontece
Você pode ter notado no código acima que existe uma função switchLayout sendo chamada ao clicar-mos no nosso botão. É justamente esse cara que transformará nossa grid em uma lista. Vamos lá:
O código é bastante simples. Pegamos todos os elementos com a classe card, e percorreremos cada um deles adicionando ou removendo as classes max-w-full e flex com a ajuda toggle, uma função muito shoooow da classList.
Mas pera aí! Essa classe card veio da onde? E essa classe max-w-full vai funcionar com a classe max-w-xs que adicionamos anteriormente? Calma, calma, vamos as explicações!
A classe card vai servir como um seletor para os nosso cards, logo deve ser posto na div principal dos nossos cards, ficando assim:
Com ela também podemos corrigir o tamanho da imagem ao transformar o card em lista, para que tudo fique maravilindo.
Conclusão
Algo muito simples e muito comum de se ver na web. E como sempre, você pode ver o código do que fizemos aqui no github do blog.
Aqui Compila 