Como Criar Sites Responsivos Com Grid CSS 3 – Parte #2

Nesta nova série de tutoriais, Como Criar Sites Responsivos com Grid CSS 3, farei uma abordagem diferente sobre a utilização de grids para a criação de sites responsivos. Você verá nesta série, Como Criar Sites Responsivos com Grid CSS 3, uma maneira de construir sua própria grid, tornando-a uma ferramenta padrão para seus próximos projetos de responsive web design.

Série Como Criar Sites Responsivos Com Grid CSS 3

Passo 5 – Aplicando o box-sizing

Na postagem anterior da série, Como Criar Sites Responsivos Com Grid CSS 3 – Parte #1, falei um pouco sobre box-sizing e o seu papel. Com isso, iniciaremos o arquivo grid.css, aplicando o seletor universal “*”. Mas, atenção, para questão de performance, muito cuidado ao utilizar este seletor universal, mas como este exemplo é relativamente simples, não há problema em utilizá-lo.

DEMO

Passo 6 – O .container

O papel do container, além de agrupar todos os elementos da grid, é de deixar seu conteúdo centralizado e, principalmente, trabalhar com sua fluidez, deixando a largura em 100% e no máximo de 1320 pixel.

DEMO

Passo 7 – O posicionamento das colunas com o seletor [class*=’col-‘]

Este seletor, demonstra que todas as classes (class*) que contenham o prefixo ‘col-‘, receberão formatações direcionados ao posicionamento das colunas. E, para posicionar, existem diversas formas como floats, inline-blocks, display-table, display-flex, etc. O método que utilizarei será com a propriedade float. Outro detalhe é que, quando uma coluna está vazia, ele tende a flutuar sobre a outra e, para evitar isso, vamos usar um altura mínima (min-height) de 1px. Veja como ficará:

DEMO

Passo 8 – Formatando as linhas .row

A finalidade das linhas é manter as colunas dentro delas e evitar que transbordem umas sobre as outras. Então, precisamos limpar os elementos que flutuam sobre a linha para podermos manter a estrutura da grid com o clear. Já a propriedade display, faz com que a exibição da linha seja vista como um bloco. Vamos aproveitar e inserir essa formatação para todo o container.

DEMO

Passo 9 – Criação da grid CSS 3

Agora sim, começa a “brincadeira” desta série, Como Criar Sites Responsivos com Grid CSS 3: a criação da grid.

Padronizando a nomenclatura

Primeiramente, vamos padronizar a nomenclatura da classe que receberá as instruções de responsividade com foco em smartphones. Para diferenciar da outra grade que será para tablets, determinemos o sufixo col-smart- como padrão mobile, onde o ‘smart’ é a abreviação para smartphone. Caso se sinta mais à vontade, você poderá padronizar seu próprio sufixo, como por exemplo, col-s-.

Se você não entendeu ainda o porquê ou onde utilizaremos a nomenclatura, acalme-se, você saberá agora 🙂

Calculando a largura das colunas

Como já foi definido no post anterior, Como Criar Sites Responsivos Com Grid CSS 3 – Parte #1, criaremos uma grade com 12 colunas. Com isso, é muito importante entender que toda linha, obrigatoriamente, deverá possuir, sempre, a quantidade de 12 colunas, independente de quantas você utilizará. Por exemplo, se em uma linha você precisará de 2 colunas iguais, você usará 2 elementos com 6 colunas cada, ou seja, 2×6=12. Veja a diagramação abaixo:

Variação de layouts utilizando as colunas da grid responsiva

Variação de layouts utilizando as colunas da grid responsiva

E, para calcular o valor de cada coluna da grid (em porcentagem devido ao Responsive design), basta dividirmos 100% por 12 colunas: 100/12 = 8.33333%.

Isso significa que 1 coluna terá 8.33333% de largura. traduzindo para a grid: col-smart-1 = width: 8.33333%.

Perceba que utilizei 5 casas decimais para a largura, assim, melhora a precisão na hora do navegador renderizar o código.

Seguindo essa lógica, uma classe com duas colunas da grid, será representada como: col-smart-2 = width: 16.66667%, e assim por diante.

Por conseguinte, formaremos uma classe para cada uma das 12 colunas, class=”col-smart-n”, onde ‘n’ é o número que definirá quantas colunas a seção deverá abranger. Inseri cores de fundo para cada classe, afim de melhorar no entendimento, mas atente-se às larguras. Veja a seguir:

DEMO

Calculando as calhas (gutter)

Existem diversas maneiras de calcularmos as calhas (espaçamento entre as colunas), desde incluindo elas no cálculo das colunas, em porcentagem, até criarmos classes com padding e/ou margins definidos. Preferi, no caso da nossa série, Como Criar Sites Responsivos com Grid CSS 3, criar uma nova classe chamada ‘cont’, para inserirmos o conteúdo de cada coluna, tudo bem? Dessa forma, como as configurações das colunas já estão definidas, o que formatarmos na classe .cont, não interferirá nelas.

Portanto, definiremos margens para esquerda e direita para a classe .cont, no valor de 10px. Com isso, atenderemos os 10px das margens do contêiner e os 20px entre as colunas.

Assim, vejamos como ficará nosso código:

DEMO

Gostando da série, Como Criar Sites Responsivos com Grid CSS 3? Espero que sim, pois agora, finalizaremos toda a estrutura HTML a grid, para ficar exatamente como na imagem abaixo:

Grid CSS 3 com estrutura html5 completa

Grid CSS 3 com estrutura html5 completa

DEMO

Passo 10 – Media queries & breakpoints

Nossa grid responsiva está quase completa, pois, de uma maneira ou de outra, se a olharmos em um desktop e num celular, teremos uma adaptação sim.

Bom, como mencionei no post anterior, Como Criar Sites Responsivos Com Grid CSS 3 – Parte #1, tratarei uma abordagem mobile-first, e, para isso, vamos tratar as consultas de mídias (media queries) e criar dois pontos de interrupção (breakpoints), onde o CSS será alterado com base no tamanho da tela dos navegadores.

Na “vida real”, geralmente trabalho com 4 ou 5 breakpoints, mas para este tutorial, utilizarei apenas 2:

  • col-smart: para smartphones de no mínimo 320px
  • col-tablet: para tablets de no mínimo 768px

Inserindo @media screen and (min-width: 320px)

DEMO

Se você diminuir a largura do seu navegador ou exibir a demonstração acima em um celular, com visualização de 320px até 767px, terá uma boa visualização responsiva. No entanto, passando de 767 px, certamente não perceberá nenhuma alteração, pois, apenas, criamos o ponto de interrupção, mas não tratamos como deverá ser exibido essa grid, correto?

Mas antes, deixa eu apresentar os recursos nativos do Mozila Firefox e do Google Chrome para exibição Responsive em vários devices (dispositivos):

View Responsive Devices Firefox e Chrome

View Responsive Devices Firefox e Chrome

Também gosto de alguns plug-ins e ferramentas online, mas deixarei para um próximo post, ok?

Formatando @media screen and (min-width: 320px)

Vamos tratar, linha por linha de acordo com nosso breakpoint que ficou no mínimo de 320px e irá até o próximo brekpoint 767px, pois, 768px já é outra formatação.

Formatando a linha 01

O resultado que desejamos quando o usuário estiver visualizando a linha 01 com as 12 colunas em um dispositivo até 767 px, será este:

Media Queries Smart-1: de 1 lin x 12 col, para 1 lin x 4 col

Media Queries Smart-1: de 1 lin x 12 col, para 1 lin x 4 col

O que quero dizer ao navegador com a imagem anterior:

Eu quero que você exiba para o usuário que tiver com um dispositivo até 767 px, 4 colunas da linha 1, ao invés de 12, como estava programado antes.

E para que os navegadores entendam meu comando, escrevo diretamente a eles, alterando todos as classes, da 1ª linha, col-smart-1 para col-smart-3:

DEMO

Bem, você chegou a perceber que existe um “probleminha” de comunicação entre as minhas instruções e os navegadores? Se você redimensionar a página acima dos 767px, a linha 1 continuará replicando o comando direcionado aos smartphones, pois, não informei os navegadores sobre o que fazer com resolução a partir de 768px. Então, reformularei o meu comando:

Eu quero que você exiba para o usuário que tiver com um dispositivo até 767 px, 4 colunas da linha 1, e 12 colunas, quando o usuário estiver com um dispositivo a partir de 768px.

Desta forma, em uma mesma DIV, inseriremos duas classes contendo as especificações desejadas, ou seja, para smartphones até 767px de largura, exibirá 4 colunas na linha 1; para tablets a partir de 768px, exibirá 12 colunas:

Com isso, todas as 12 colunas do código html, deverão conter a estrutura adicional acima e a complementação do CSS a seguir:

Formatando @media screen and (min-width: 768px)

DEMO

Formatando a linha 2

Seguindo a mesma linha de raciocínio anterior, nosso intuito é transformar a linha 2, que contém 6 colunas, em 2 colunas para smartphones:

Formatando a 2ª linha para smartphones

Formatando a 2ª linha para smartphones

Desta feita, nosso código, já adaptado para tablets, ficará assim:

DEMO

Passo 11 – Finalizando a responsive grid CSS 3

Agora que você pegou o jeito, vamos finalizar todo a grid para ficar com esta formatação para smartphones, pois a de tablets, já está feita.

Versão final da responsive grid css 3

Versão final da responsive grid css 3

RESULTADO FINAL DA RESPONSIVE GRID CSS 3

Bom, encerramos a 2ª parte da série, Como Criar Sites Responsivos com Grid CSS 3. Na 3ª e última parte, você verá uma aplicação para um projeto de criação de site responsivo. Aguardo você lá.

CarlosHPS Webdesigner 8)

Série Como Criar Sites Responsivos Com Grid CSS 3


Posts Relacionados
Comentários ( 6 )
  1. Rodrigo
    28 de julho de 2016 at 10:51
    Responder

    so ficou meio confuso a parte da media, resumindo ali so mudou o nome da class? e a % faz resto?

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      29 de julho de 2016 at 9:58
      Responder

      Rodrigo,

      No geral, o ideal, é que não se altere as % da grid. Trabalhamos mais com as classes e subclasses, etc.

      Por exemplo, se você utilizar o framework Bootstrap, a grid dele, praticamente, a gente não mexe. Apenas adaptamos as classes e/ou criamos as nossas, com base na biblioteca deles, veja:

      Resposta ao comentário: Criar Sites Responsivos com Grid CSS 3 - Parte #2

      Esclareci?

  2. Rodrigo
    12 de agosto de 2016 at 17:18
    Responder

    SE PEGAR ESSE MODELO DE GRID

    ELE RESPEITA O MIN-WIDTH E ADAPTA É ISSO? PORQUE TAVA TENTANDO ACHAR A DIFERENÇA ENTRE AS MEDIA QUERY..

    @media screen and (min-width: 768px){

    .col-tablet-1{background: #5969A5; width: 8.33333%;}
    .col-tablet-2{background: #6B5D9D; width: 16.66667%;}
    .col-tablet-3{background: #854D91; width: 25%;}
    .col-tablet-4{background: #AD498F; width: 33.33332%;}
    .col-tablet-5{background: #CB4587; width: 41.66665%;}
    .col-tablet-6{background: #CA4546; width: 49.99998%;}
    .col-tablet-7{background: #CA7E45; width: 58.33331%;}
    .col-tablet-8{background: #CAB345; width: 66.66664%;}
    .col-tablet-9{background: #B6CA45; width: 74.99997%;}
    .col-tablet-10{background: #94CA45; width: 83.33333%;}
    .col-tablet-11{background: #46CA45; width: 91.66663%;}
    .col-tablet-12{background: #45CABC; width: 100%;}

    }

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      15 de agosto de 2016 at 19:02
      Responder

      Rodrigo, é exatamente isso.
      Veja se este esquema melhora seu entendimento:
      Breakpoints Media Queries Grid Responsive
      Att.:

      CarlosHPS 8)

  3. vanderlei
    18 de agosto de 2016 at 11:20
    Responder

    muito bom carlos! Alguma previsão para o post da 3 parte?

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      21 de agosto de 2016 at 15:52
      Responder

      Vanderlei, já está no “forno”. Em breve, publicarei.
      Abs.
      CarlosHPS 8)

Deixe uma resposta
Captcha Clique para atualizar o código