Como prototipar rapidamente aplicativos com CSS Grid e CSS Variables

Variáveis ??CSS e Grid CSS são grandes vitórias para desenvolvedores front-end. O primeiro torna simples criar layouts de site, enquanto o segundo traz o poder das variáveis ??para suas folhas de estilo.

Neste tutorial, mostrarei como utilizá-los juntos para criar rapidamente projetos de aplicativos.

O exemplo que usaremos foi extraído diretamente do meu curso gratuito sobre como criar um aplicativo de bate-papo usando o React.js e a API do Chatkit :

Clique na imagem para chegar ao curso.

Então, se você preferir assistir a screencasts interativos durante a leitura, confira a palestra 15 e 16 do meu curso aqui. Nela, você também terá acesso ao código para experimentar também. Sinta-se à vontade para fazer isso enquanto segue este tutorial.

Configurando o contêiner de grade

Nosso aplicativo foi criado usando o CSS Grid, um módulo que facilita a construção de layouts e a reprodução deles. Isso é especialmente útil se você estiver aproveitando a propriedade grid-template-areas , que mostrarei como estamos usando mais abaixo.

Vamos primeiro dar uma olhada em como nosso aplicativo de bate-papo inicial se parece:

Se abrirmos as ferramentas de desenvolvimento no Chrome, poderemos inspecionar como a grade subjacente foi construída. Como você pode ver, ele tem seis linhas e seis colunas:

O código para criar essa grade é o seguinte:

 .aplicativo { 
display: grade;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grade-modelo-linhas: 1fr 1fr 1fr 1fr 1fr 60px;
}

Primeiro, estamos definindo o contêiner para ser uma grade. Então estamos dizendo que queremos seis colunas, e que cada uma delas deve ter uma unidade de fração ( 1fr ) de largura. Uma unidade de fração significa uma parte do espaço disponível. Então, aqui estamos dividindo a largura em seis frações igualmente amplas e damos a cada coluna uma fração.

Quanto às linhas, não estamos dividindo todas elas em altura igual, já que a última linha não é tão alta quanto as outras. Nós dissemos explicitamente que ele tem 60px altura em vez de 1fr altura:

 grade-modelo-linhas: 1fr 1fr 1fr 1fr 1fr 60px ; 

Agora que projetamos a estrutura da nossa grade, podemos passar para a próxima parte: posicionamento.

Posicionando os itens da grade

Cada filho direto de um contêiner de grade é um item de grade. Temos quatro itens, cada um sendo encaixado em um retângulo na imagem abaixo:

Para obter os itens a serem colocados nas posições acima, precisamos usar a propriedade grid-template-areas e construir uma representação visual da grade em nossa folha de estilo:

 .aplicativo { 
display: grade;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grade-modelo-linhas: 1fr 1fr 1fr 1fr 1fr 60px;
áreas de modelo de grade:
"rmmmm m"
"rmmmm m"
"rmmmm m"
"rmmmm m"
"rmmmm m"
"nssss s";

}

Cada uma das strings representa uma linha e cada um dos caracteres representa uma célula na grade. Os caracteres têm uma relação semântica com os itens da grade que eles estão representando ( lista de salas , lista de mensagens , nova forma de sala e formulário de envio de mensagens ).

Agora, para posicionar nossos itens de acordo com nossas grid-template-areas , precisaremos usar os caracteres como seu valor de grid-area . Como isso:

 .new-room-form { 
área de grade: n;
}
 .rooms-list { 
área de grade: r;
}
 .message-list { 
área de grade: m;
}
 .send-message-form { 
área de grade: s;
}

Essas classes também foram aplicadas aos nossos itens de grade em nosso HTML. No entanto, não entrarei em detalhes sobre isso, pois suponho que você saiba como adicionar classes a tags HTML.

Com isso, estamos prontos para começar a experimentar o layout. Apenas trocando alguns caracteres no valor de grid-template-areas , podemos virar completamente no layout.

No gif acima, estou tentando quatro layouts diferentes alterando as posições do item da lista de salas e o novo item de formulário da sala . A única coisa que estou mudando é a propriedade grid-template-areas .

Abaixo estão as quatro variações. Experimente e veja se você pode mapear cada um deles para o layout correspondente:

 áreas de modelo de grade: 
"nmmmm m"
"rmmmm m"
"rmmmm m"
"rmmmm m"
"rmmmm m"
"rssss s";
 áreas de modelo de grade: 
"rmmmm m"
"rmmmm m"
"rmmmm m"
"rmmmm m"
"rmmmm m"
"nssss s";
 áreas de modelo de grade: 
"mmmmm r"
"mmmmm r"
"mmmmm r"
"mmmmm r"
"mmmmm r"
"sssss n";
 áreas de modelo de grade: 
"mmmmm n"
"mmmmm r"
"mmmmm r"
"mmmmm r"
"mmmmm r"
"sssss r";

Se você fizer o meu curso de aplicativo de bate-papo do React.js , receberá sua própria cópia do código, para poder alterar o layout exatamente como preferir.

Alterando as cores com variáveis ??CSS

Agora vamos mudar as cores do aplicativo usando as variáveis ??CSS. Se você não foi exposto a variáveis ??CSS antes, dê uma olhada rápida nas imagens abaixo, pois elas resumem o núcleo:

Como você pode ver na imagem acima, isso torna seu código mais fácil de ler, já que o nome da variável é mais semântico que o valor hexadecimal. Em segundo lugar, também lhe dá mais flexibilidade no caso de você querer mudar a cor.

Vamos ver como estilizamos nosso aplicativo usando as variáveis ??CSS, começando com nossas declarações de variáveis:

 : root { 
--main-color: # 5ea3d0;
- cor secundária: branco;
--main-text-color: # 3e5869;
- cor de texto secundário: # b0c7d6;
- new-room-form: # d9e1e8;
--send-message-form: # F5F5F5;
}

Essas variáveis ??são reutilizadas 17 vezes em toda a nossa folha de estilo. Mas em vez de passar por todos esses lugares, vamos ver como a --main-color é usada como cor de fundo em ambas as mensagens e na barra lateral esquerda .

Veja como isso se desenrola no código:

 .rooms-list { 
plano de fundo: var (- main-color);
}
 .mensagem de texto { 
plano de fundo: var (- main-color);
}

A beleza das variáveis ??é que agora podemos alterar a declaração e, em seguida, essa alteração afetará o aplicativo inteiro. Vamos por exemplo fazer:

 : root { 
--main-color: vermelho;
}

… O que resulta no seguinte:

O que podemos fazer agora é simplesmente alterar todas as declarações de variáveis ??no :root e, assim, alterar a aparência e a funcionalidade do aplicativo.

Vamos, por exemplo, encontrar uma boa paleta online e simplesmente usá-la em nosso aplicativo:

Vamos substituir algumas das cores na nossa :root com as da paleta acima:

 : root { 
--main-color: # 5ea3d0;
- cor secundária: branco;
--main-text-color: # 3e5869;
- cor de texto secundário: # b0c7d6;
- new-room-form: # d9e1e8;
--send-message-form: # F5F5F5;
}

Isso resulta em um tipo de chat completamente diferente:

Combinando Grade e Variáveis

Se combinarmos isso com a alteração do layout usando o CSS Grid, obteremos dois aplicativos de bate-papo exclusivos que dificilmente se assemelham. Vamos fazer isso:

Aqui está como o nosso ponto de partida se parece comparado ao nosso exemplo final. Como você pode ver, eu mudei a paleta e o layout. A única diferença entre esses dois exemplos são as 11 linhas de código que eu corrijo aqui:

 : root { 
--main-color: # ff66ff;
--secondary-color: # fbd8fb;

--main-text-color: # 3e5869;
- cor de texto secundário: # d8b2ff;
- new-room-form: # ffb2ff;
--send-message-form: # d8b2ff; x

}
 .aplicativo { 
display: grade;
grid-template-columns: repetição (6, 1fr);
grade-modelo-linhas: 1fr 1fr 1fr 1fr 1fr 60px;
áreas de modelo de grade:
"mmmmr r"
"mmmmr r"
"mmmmr r"
"mmmmr r"
"mmmmn n"
"fffff f";

}

Muito legal, né?

Agora eu recomendo que você faça todo o meu curso. Nele, guiarei você pela criação deste aplicativo usando o React.js e a API do Chatkit . É claro que compartilharei o código completo com você para que você possa experimentar esse design por si mesmo.

Boa sorte e feliz codificação! 🙂