Bibliotecas de front-end como Material UI, Bootstrap e Ant Design tornam a vida de um desenvolvedor mais fácil, simplificando layouts e aumentando a velocidade de desenvolvimento. No entanto, Atomic Layout, uma nova biblioteca, usa uma abordagem totalmente diferente para criar unidades de layout reutilizáveis.
Quando criamos um layout específico usando bibliotecas de front-end existentes, os componentes e espaçamentos dependem do contexto e vice-versa. A dependência mútua torna os estilos de layout não flexíveis, causando dores de cabeça para os desenvolvedores ao tentarem fazer quaisquer melhorias ou modificações.
O layout atômico segue os princípios de design atômico e usa os CSS Grid para criar unidades de layout reutilizáveis. Ele evita a dependência mútua, desacoplando o espaçamento e os componentes, criando, assim, unidades livres de contexto para a criação de layouts.
Neste artigo, instalaremos o Atomic Layout e exploraremos esses conceitos com exemplos adequados. Vamos começar!
Instalação
O Atomic Layout é uma biblioteca baseada no React que usa componentes estilizados. Comece criando um aplicativo React e instalando os pacotes necessários.
Instale o aplicativo Create React:
$ npx create-react-app atomic-layout
Instale componentes estilizados:
$ npm i componentes estilizados atômicos
Implementação
Tudo no Atomic Layout segue a composição, que é uma entidade física real composta de vários subelementos. Por exemplo, um cabeçalho é uma composição de um logotipo, menu e ações de navegação.
Criaremos um elemento de cartão responsivo com uma imagem, algum texto e um botão. Crie um novo arquivo chamado Card.js e cole o seguinte código nele:
import React from'react' exportar função padrão Card () { Retorna ( Olá
)
}
Agora que nosso elemento React foi criado, vamos importar o componente composição de nosso Layout Atômico e envolvê-lo em nosso componente React da seguinte maneira:
import React from'react'
importar {Composition} de'atomic-layout' exportar função padrão Card () { Retorna ( Olá
)
}
O componente composição leva um objeto área que define o projeto de nosso layout. Definimos a área como uma string e a passamos para nosso componente composição :
import React from'react'
importar {Composition} de'atomic-layout' const areasPhone=` imagem texto botão
`
exportar função padrão Card () { Retorna ( <Áreas de composição={areasPhone}> Olá
)
}
A propriedade area aceita o valor, disponibilizando os componentes React area . Eles podem ser acessados por meio da função de renderização filha da seguinte maneira:
import React from'react'
importar {Composition} de'atomic-layout' const areasPhone=` Imagem Texto Botão
`
exportar função padrão Card () { Retorna ( <Áreas de composição={areasPhone}> {(Áreas)=> ( <> Imagem Texto Botão )} )
}
Agora, temos nosso componente básico de cartão pronto para aceitar conteúdo. Para recapitular, criamos vários componentes estilizados e os importamos para nosso Card.js .
Agora, execute o projeto com o seguinte script:
$ npm início
Obteremos o seguinte resultado:
Nesta imagem, você verá três áreas diferentes. Podemos definir a relação espacial entre eles, fornecendo adereços adicionais à nossa composição. Vamos especificar um intervalo de 100px entre os elementos da grade, adicionando um prop chamado gap ao componente composição :
<áreas de composição={areasMobile} lacuna={100}>
{(Áreas)=> (
Olá )}
Você verá o seguinte:
Acessórios responsivos
Podemos tornar nosso componente de cartão responsivo definindo um novo plano para ele. Imagine que queremos ajustar nosso componente de cartão para tablets. Crie outro modelo de string:
const areasTablet=` Botão de texto de imagem `
Temos um problema aqui. Não podemos passar o componente do cartão para nossa propriedade areas porque ele já tem um valor para a tela do telefone, que é o padrão no Atomic Layout.
Para resolver esse problema, usaremos adereços responsivos, que têm uma estrutura de Prop name + Breakpoint + Behavior .
Breakpoints
Breakpoints são certas condições nas quais nosso layout adquire um novo estado, e podemos atribuir diferentes valores à propriedade area usando o breakpoint. Os adereços para a composição têm pontos de interrupção diferentes, e o Atomic Layout usa xs , o ponto de interrupção para dispositivos móveis, por padrão.
O layout atômico usa Bootstrap 4 pontos de interrupção :
| Nome | xs |
sm |
md |
lg |
xl |
|---|---|---|---|---|---|
| Largura da tela | <576px | ≥576px | ≥768px | ≥992px | ≥1200px |
Comportamento
O comportamento simplesmente define como um prop é aplicado. Possui os seguintes valores:
-
up: aplica prop ao ponto de interrupção especificado e acima. Este é o comportamento padrão. Por exemplo, se up for usado commd, o prop seria aplicado demdaxl -
down: aplica prop a um ponto de interrupção especificado e down. Por exemplo, se down for usado commd, a prop seria aplicada demdaxs -
apenas: aplica a prop apenas ao ponto de interrupção especificado
Para telas de tamanho médio, podemos usar o areaTablet em nossa composição:
{(Áreas)=> ( Olá )}
Vamos executar nosso projeto novamente para verificar se o layout foi reestruturado para tablets:
Usamos o ponto de interrupção Md para obter a saída exata definida por areaTablet para um iPad. Cada prop no Atomic Layout pode ser responsivo, o que pode levar a velocidade de desenvolvimento a um nível totalmente novo.
Visibilidade do conteúdo
O layout atômico nos permite definir a visibilidade do conteúdo usando o componente Visível , um componente utilitário que envolve elementos filhos e permite que eles se tornem visíveis quando certas condições são atendidas, como pontos de interrupção específicos ou larguras de janela. Podemos usar o componente Visible sem CSS.
Importe o componente Visible do pacote e envolva suas áreas com ele. O componente Visible aceita os pontos de interrupção como acessórios. Nosso código agora deve ser semelhante ao seguinte snippet:
import React from'react'
import {Composition, Visible} de'atomic-layout'
importar botão de'./Button'
importar texto de'./Text'
importar imagem de'./Image' const areasPhone=` Imagem Texto Botão
`
const areasTablet=`
Botão de texto de imagem `
exportar função padrão Card () { Retorna ( {(Áreas)=> ( <> Olá )} )
}
O texto ficará visível apenas em telas de tamanho médio. Vamos executar nosso projeto novamente para verificar se podemos ver o texto em uma tela de celular:
O texto fica oculto quando usamos um display para celular. Mudar para um tablet o tornará visível:
Conclusão
Vamos ver o que torna o Atomic Layout diferente de outras bibliotecas de front-end.
Componentes independentes
As áreas na composição são independentes porque seu espaçamento não está vinculado a um contexto específico, auxiliando na criação de layouts suaves e reutilizáveis.
Promove CSS Grid
CSS Grid é poderoso. Na minha opinião, é o futuro para a posição de layouts. Enquanto outras bibliotecas são baseadas principalmente em Flexbox, o uso de CSS Grid pelo Atomic Layout o torna adaptável para o futuro.
Espaçamento
O foco principal do Atomic Layout é distribuir o espaçamento da melhor maneira possível. O layout atômico define com eficácia a composição do layout, em vez de usar linhas e colunas.
Produção rápida
Lidar com conteúdo dinâmico no Atomic Layout é simples e rápido devido a recursos como adereços responsivos e o componente Visibilidade. Os desenvolvedores podem fazer layouts de nível de produção sem escrever uma única linha de CSS e ainda obter um resultado responsivo.
Unificação
Os layouts criados com o Atomic Layout são extremamente responsivos e compartilham configurações globais, tornando todo o aplicativo unificado.
Ao contrário de outras bibliotecas, o Atomic Layout se concentra em uma única coisa: lidar com o espaçamento e a estrutura do layout. O Atomic Layout se destaca em seu trabalho, fornecendo uma experiência de desenvolvimento imbatível.
Agora, você tem tudo de que precisa para começar a usar o Atomic Layout. Boa programação!
A postagem Atualize seus layouts CSS com Layout Atômico apareceu primeiro no LogRocket Blog .
