Em um mundo rodeado de novas tecnologias e constantes atualizações de padrões em dispositivos móveis, nós como desenvolvedores precisamos estar cada vez mais preparados e atentos a um fator crucial para uma boa experiência ao usuário. Estou me referindo a responsividade de nossas páginas e layout’s.

Não há como negar que é praticamente impossível garantirmos que qualquer página ou aplicação vá sempre ser executada em um mesmo padrão de tela ou dispositivo, se fazendo necessário sempre construirmos nossos layout’s de maneira que o usuário tenha uma experiência consistente, seja acessando via celular, tablet, notebook’s ou até mesmo via desktop (onde o céu é o limite quando se trata de tamanho e resolução de tela).

Dados os fatos cabe a nós, desenvolvedores, pensar em soluções funcionais e aplica-las no processo de desenvolvimento de nossas páginas. Desde a realocação de itens e menus até a adequação de proporções e unidades de medidas dos elementos presentes na página, tudo isso e muito muitas outras estratégias voltadas a um layout adaptativo se inserem no conceito de responsividade.

O presente artigo se trata de uma abordagem simples e direta à responsividade no desenvolvimento web, mais particularmente às ferramentas CSS para tal. Não aprofundaremos na tecnicidade dos elementos e das propriedades. O objetivo é que você saia desse artigo com uma visão mais clara e assertiva sobre o que se trata a responsividade no CSS, sua importância no mercado atual e ferramentas que temos a disposição para tornarmos nossos layout’s cada vez mais adaptativos, sem perder pontos no que se diz respeito a experiência do usuário.

Começando das “ferramentas” (propriedades) mais simples às mais avançadas abordaremos de maneira breve e sucinta respectivamente os seguintes tópicos:

1. Mobile-first.
2. Unidades de medidas relativas.
3. Order.
4. Flex-Box.
5. Grid-Layout
6. Media Queries

Mobile-first

Mobile-first se trata de um conceito utilizado não só no CSS, mas em todo o desenvolvimento web no geral. A ideia é priorizar a criação e otimização de experiência em dispositivos móveis para a partir da versão mobile expandirmos nossos layouts para telas maiores. Esse conceito ganhou muita força frente ao crescimento do uso de dispositivos móveis no acesso web.

Para a devida aplicação desse conceito utilizaremos de outros conceitos e “ferramentas” (propriedades), que vermos em tópicos a seguir.

Unidades de medidas relativas

As unidades de medidas relativas são de suma importância no desenvolvimento de um layout responsivo e escalável, se adaptando as mudanças de contexto.

Enquanto unidades de medida absolutas como o pixel são usadas em elementos que desejamos ter medidas fixas independente do tamanho de tela do usuário, nas unidades relativas nós podemos definir tamanhos e disposições do elemento com base no em características do elemento pai, ou do tamanho de tela disponível.

Vamos abordar a seguir as principais unidades de medida relativas:

% - Sendo uma das mais utilizadas, a porcentagem leva em consideração o tamanho do elemento pai.

.item {
  width: 50%;
 }

fr – O fr se trata da fração total da container pai. Duas frações de uma tela inteira então seriam duas áreas com o exato tamanho uma da outra, cada uma ocupando exatamente metade da tela.

 .item {
  width: 2fr;
 }

em – Essa unidade de medida é relativa ao tamanho da fonte do elemento pai, sendo 1em o exato tamanho da fonte do elemento pai, e 2em por exemplo o dobro.

 .item {
  width: 2em;
 }

rem – Similar ao em, porém nesse caso o parâmentro é a fonte do elemento raiz (HTML)

 .item {
  width: 2rem;
 }

vw (Viewport Width) – Relativa à largura da janela de visualização do navegador. 50vw por exemplo representa 50% da largura da janela de visualização do usuário.

 .item {
  width: 50vw;
 }

vh (Viewport Height) – Relativa à altura da janela de visualização do navegador. 50vh por exemplo representa 50% da altura da janela de visualização do usuário.

 .item {
  width: 50vh;
 }

Order

Por padrão, nossos elementos são exibidos na tela de acordo com a ordem em que os estruturamos no HTML, porém a partir da propriedade order nós podemos reorganizar visualmente esses elementos, inclusive para diferentes configurações a depender do tamanho da tela em que o usuário vai acessar nossa página.

A propriedade é de simples aplicação, onde o valor é qualquer número inteiro, positivo ou negativo, e a ordem de exibição segue do menor número para o maior.

.item1 {
 order: 1;
}
.item2 {
 order: 2;
}

Flex-Box

O flex-box se trata de uma forma de organizar nossos elementos dentro de um container de forma mais dinâmina e flexível. O flex-box trabalha com a flexibilidade de nossos elementos em uma dimensão apensa, ou na vertical ou na horizontal, sendo muito útil na formatação de menus ou barras de navegação mais simples ou até em layout’s mais complexos quando combinado com outras propriedades e técnicas que veremos a frente.

O flex-box é aplicado alterando o comportamento display do container desejado, tornando-o um flex-container. Segue um exemplo da aplicação do display flex em um container.

É importante pontuar que os itens contidos dentro de um flex-container são entendidos como flex-items, estando sujeitos a propriedades específicas de posicionamento e configuração do display flex. Vou elencar a seguir as principais propriedades mencionadas, bem como suas respectivas sintaxes:

flex-direction: Se trata de uma propriedade responsável por definir a direção dos itens contidos no flex-container. Caso estejam dispostos na horizontal a propriedade aceita o valor row (padrão) e row-reverse (da direita para a esquerda), caso os flex-items estejam dispostos na vertical a propriedade aceita os valores column (padrão, de cima para baixo) e column-reverse (de baixo para cima).

.container {
  flex-direction: row-reverse;
}

align-items: Se trata de uma propriedade utilizada para alinhar verticalmente nossos flex-items dentro do flex-container. Aceita os seguintes valores:

stretch – Se trata do valor padrão da propriedade, onde os itens são dimensionados para ocupar todo o espaço disponível no container. Útil quando precisamos deixar todos os elementos padronizados.

flex-start – Nesse caso os itens são alinhados tendo como base o começo do eixo perpendicular do container.

flex-end - Nesse caso os itens são alinhados tendo como base o final do eixo perpendicular do container.

center – Onde os itens são alinhados centralizados ao eixo perpendicular do container.

baseline – Os itens são alinhados tendo como base a própria linha de base dos elementos.

Segue a sintaxe básica da propriedade:

.container {
  align-items: baseline;
}

align-self: Funciona sob a mesma lógica do align-items, porem é uma propriedade aplicada ao item, e não ao container, e controla individualmente o posicionamento de cada flex-item. Essa propriedade aceita exatamente os mesmos valores do align-items, respondendo da mesma maneira aos respectivos valores.

.item {
  align-self: center;
}

justify-content: Enquanto o align-items nós controlamos o posicionamento dos elementos através do eixo perpendicular, no justify-content nós controlamos o posicionamento no eixo principal do nosso flex-container.

Aceita os seguintes valores:

flex-start – É o valor padrão e define que os itens fiquem agrupados no inicio da linha ou coluna, deixando um espaço vazio ao final.

flex-end – Define que os itens fiquem agrupados ao final da linha ou coluna, deixando um espaço vazio no incio.

center – Os itens são alinhados no centro da linha ou coluna.

space-between – Os itens são distribuídos igualmente pela linha ou coluna

space-around – Os itens são distribuídos igualmente pela linha ou coluna, porém um espaço vazio é adicionado ao inicio ou final da linha ou coluna.

space-evenly – Os itens são distribuídos igualmente pela linha ou coluna, porém um espaço vazio é adicionado ao inicio ou final da linha ou coluna e todos os espaçamentos possuem a mesma medida.

.container {
  justify-content: space-between;
}

flex-wrap: É usada pra controlar como os itens flexíveis são tratados quando não há espaço espaço o suficiente ao longo do eixo principal.

Ela define se os itens devem quebrar para uma nova linha ou coluna ou se eles devem ser compactados.

   Aceita os valores:

nowrap – Se trata do valor padrão e define que os itens devem ser compactados para caber na mesma linha ou coluna.

wrap – Define que os itens quebrem para a próxima linha u coluna quando não couberem na presente.

wrap-reverse – Se comporta da mesma maneira que o valor wrap, porém dispõe os itens no sentido inverso ao padrão.

.container {
  flex-wrap: wrap
}

flex-grow - Utilizada em layouts flexbox para especificar a proporção de espaço adicional que um item flexível deve ocupar quando há espaço disponível no container flexível ao longo do eixo principal.

Controla a capacidade de crescimento de um item flexível em relação aos outros itens flexíveis dentro de uma mesmo container.

flex-shrink -  Segue a mesma lógica da propriedade flex-grow, porém a flex-shrink vai controlar quanto os itens vão diminuir caso seja necessário.

.container {
  display: flex;
}
.item {
  flex-grow: 1;   
  flex-shrink: 1;
}

Se nos usarmos um pouco da criatividade podemos perceber que o flex-box e suas propriedades são de grande valor e importância no desenvolvimento de layouts responsivos, nos oferendo uma gama de aplicações voltadas ao comportamento e posicionamento de nossos itens em relação ao seu container pai.

Como dito anteriormente o flex-box é ainda mais poderoso quando combinado com outras “ferramentas” de configuração do nosso layout.

Grid-Display

O grid layout segue uma lógica similar ao flex-box, porém trabalha de maneira bidimensional sobre o layout, nos dando uma maior gama de possibilidades quando se trata de responsividade. Como o próprio nome já diz o grid layout utiliza um esquema em grade para a disposição e configuração do layout. Segue a sintaxe básica, que deve ser aplicada sempre ao container pai da “grade”.

.container {
  display: grid;
}

Assim como no flex-box, o grid nos oferece mais uma gama de propriedades voltadas a posicionamentos de itens, elementos e containers.

O grid layout trabalha com sob um esquema de linhas, colunas, gaps (espaçamento entre as linhas e colunas) e células. A partir desse esquema é possível posicionar, alinhas e configurar o comportamento do nosso layout conforme um ou mais tamanhos de tela.

Devido a extensão e densidade que engloba todos os conceitos e propriedades relativas ao grid-layout, me atenho a abordar somente ao que é relativo ao tema do presente artigo, responsividade.

Algumas propriedades já vistas no tópico flex-box se repetem no grid-layout, como justify-content, align-content e align-self, e geram exatamente o mesmo comportamento a respeito do comportamento dos itens dentro da célula ou do container.

Também encontramos propriedades específicas do grid-layout, conforme veremos a seguir:

grid-templates-columns e grid-templates-rows: Se tratam respectivamente da definição das colunas e linhas que nosso display grid terá. Ao definirmos as colunas e linhas também definiremos suas respectivas dimensões.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 150px;
}

grid-templates-areas: Se tratam de marcações definidas a partir de parâmetros das próprias linhas e colunas. Essas marcações irão definir as áreas do nosso grid-layout, como cabeçalho, rodapé, barra de navegação e menu lateral por exemplo.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 150px;
  grid-templates-areas: 
      "header header header"
      "sidebar main main"
      "footer footer footer"  
}

grid-column e grid-row: Definem onde determinado item (o item onde aplicaremos tais propriedades) começa e termina tendo como referência nossas linhas e colunas. No caso o grid-column define a coluna de inicio e de fim e o grid-row define a linha de inicio e fim, respectivamente.

.rodape {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 4;
}

Media Querie

Por último mas não menos importante temos as media queries, que nos permitem definir carcterísticas e configurações específicas de elementos e disposições a depender do tamanho da tela do dispositivo do usuário. 

    As media queries são grandes aliadas de todas as outras propriedades e configurações vistas acima no presente artigo e são amplamente utilizadas na construção de layouts responsivos. Elas nos permitem por exemplo que possamos definir certa disposição de itens e containers para um dispositivo de tela pequena (celular), outra configuração e disposição para um dispositivo de tela média (tablete) e uma terceira configuração para dispositivos de telas grandes (notebooks e desktops).

@media (condição) { 
  /* Estilos a serem aplicados se a condição for verdadeira */ 
}
  

     Lembrando que a ideia é todos os elementos vistos acima sejam utilizados em conjunto, afinal de contas eles se complementam para a construção e elaboração de um layout escalável e responsivo.

     Espero que de alguma forma esse artigo tenha deixado mais claro sobre o que se trata o conceito de responsividade e como o CSS é capaz de nos fornecer “ferramentas” cada vez mais adequadas para cada tipo de caso e contexto.

    Caso queiram outros artigos aprofundando em alguma propriedade ou conceito em específico deixem nos comentários do artigo que estarei acompanhando e darei a atenção necessária.