Atualize seus layouts CSS com Atomic Layout

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á     Clique aqui   )}

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 :

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 com md , o prop seria aplicado de md a xl
• down : aplica prop a um ponto de interrupção especificado e down. Por exemplo, se down for usado com md , a prop seria aplicada de md a xs
• 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á     Clique aqui   )}

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á      Clique aqui    )}  )
}

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 .