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! 🙂