Como Criar Sites Responsivos Com Grid CSS 3 – Parte FINAL

Para você que está acompanhando a série de tutoriais, Como Criar Sites Responsivos com Grid CSS 3, chegamos, enfim, a 3ª e última parte, onde aplicarei as técnicas e conceitos empregados nos últimos 2 tutoriais, estruturando um layout responsivo com dois breakpoints: um para smartphones e outro para tablets, utilizando uma grid responsiva com css3.

Caso seja a sua primeira vez por aqui, recomendo que siga a série do início, nos links abaixo:

Série Como Criar Sites Responsivos Com Grid CSS 3

Passo 12 – Criando a Estrutura Básica do Site

Para concluir esta série, Como Criar Sites Responsivos com Grid CSS 3, vamos aplicar o conceito Mobile First, ou seja, desenvolvendo o layout do site pensando, primeiramente, em dispositivos mobile, ok?!

Entendendo a estrutura do site – versão mobile

Como vimos na primeira parte da série, Como Criar Sites Responsivos com Grid CSS 3 – Parte 1, o layout para versão mobile foi dividido da seguinte forma:

Wireframe Grid Responsivo - Versão Mobile First

Wireframe Grid Responsivo – Versão Mobile First

A estrutura está dividida em 4 áreas:

  • header – que conterá o logotipo
  • .services – composta por 3 blocos sobre os serviços oferecidos
  • .clients – existirá 4 blocos sobre clientes
  • footer – rodapé com ícones para redes sociais e copyright

Montando a estrutura básica da página index.html

Veja o resultado:

Criação da estrutura html básica do site responsivo

Criação da estrutura html básica do site responsivo

DEMO

Passo 13 – Aplicando a grid responsiva em todas as seções do site

Como visto no tutorial anterior, Como Criar Sites Responsivos com Grid CSS 3 – Parte 2, cada seção deve receber um .container o qual englobará todas as linhas (.row) e colunas (.col-*) da respectiva seção. Então, vejamos como ficará cada uma das 4 partes do layout responsivo.

Seção header

A div que contem a classe col-, explicarei mais à frente, como complementá-la. Por enquanto, deixemos ela assim mesmo, ok?! 😉

Seção .services

Perceba que para cada um dos serviços, foi inserido uma coluna na mesma linha. Com essa estruturação, podemos determinar, em breve, o posicionamento um abaixo do outro para smartphones e, lado a lado, para outros dispositivos.

Seção .clients

Seguindo a mesma linha de raciocínio da seção anterior, para cada cliente, alocamos uma coluna distinta, totalizando 4.
E, assim como na seção .clients, o footer conterá 4 colunas, as quais configuraremos em breve.

Vejamos o resultado até aqui:

DEMO

Passo 14 – Aplicando os breakpoints para smartphones

Como explicado no início, para fins de aprendizagem, criamos apenas uma grid responsiva apenas com dois breakpoints: min-width:320px para smartphones e min-width:768px para tablets.

Breakpoint para a seção header

Esta seção, como ocupará toda a largura do layout, utilizará as 12 colunas da grid, com isso, aplicaremos a classe .cont-smart-12:

Breakpoint para a seção .services

De acordo com o layout definido para smartphones, toda vez que um dispositivo tiver uma resolução mínima de 320px de largura, cada uma das 3 colunas ocupará 12 colunas da grid. Desta feita, teremos:

Breakpoint para a seção .clients

Besta seção, de acordo com o layout acima, teremos um estrutura com 4 clientes, distribuídos de 2 em 2, um sobre o outro. Para isso, cada coluna, utilizará 6 colunas da grid responsiva. Assim, teremos:

Breakpoint para a seção footer

Seguindo a ideia do layout, os ícones das mídias sociais, utilizarão 4 colunas da grid responsiva, cada, e os dados do copyright, utilizarão 12 colunas, Assim teremos a seguinte estrutura:

Vejamos o resultado até aqui:

DEMO

Passo 15 – Aplicando os breakpoints para tablets

A estrutura para smatphones está definida e pronta para ser utilizada. Porém, quando definimos a media queries como especificado abaixo:

informamos ao navegador que, enquanto não houver outros breakpoints, a formatação mínima de 320px será replicada para todos os dispositivos maiores que esta dimensão.

Contudo, como nossa grid contém um breakpoint para tablets:

significa que a estrutura do layout seguirá a mesma, a partir de 320px de largura até 767px. Mas, a partir de 768px, sofrerá as mudanças que determinaremos a seguir:

Estrutura do layout de breakpoint para tablet

Estrutura do layout de breakpoint para tablet

Breakpoint para a seção header

Assim como para smartphones, esta seção ocupará 12 colunas da grid e, fica facultativo a aplicação da classe .col-tablet-12. Mas, para efeito de aprendizagem, vamos inseri-la:

Breakpoint para a seção .services

Para smartphones, definimos que cada bloco de serviço ocuparia 12 colunas da grid responsiva. No entanto, para tablets, faremos com que cada bloco ocupe apenas 4 colunas da grid. Com isso, conseguiremos distribuir, em uma mesma linha, os três blocos:

Breakpoint para a seção .clients

Na estrutura para smartphones, determinamos que cada bloco de clientes ocuparia 6 colunas da grid. Já para tablets, cada bloco ocupará 3 colunas da grade. Vejamos:

Breakpoint para a seção footer

E, por fim, para ter uma melhor harmonia na estrutura do layout para tablets, determinaremos que o bloco com copyright ocupará 6 colunas da grid e que cada ícones das mídias sociais ocupará 2 colunas da grade para cada um dos seus blocos.

Resultado Final

Veja o resultado até aqui. Vá redimensionando a janela do navegador para ver o resultado e/ou abra o link em um tablet e/ou smartphone 🙂

DEMO

Bom, pessoal, a princípio, tinha determinado que esta série, Como Criar Sites Responsivos com Grid CSS 3, conteria três partes, mas, atendendo a pedidos, incluirei uma 4ª parte bônus, onde formatarei um site com um layout bacana utilizando a estrutura que construímos até aqui, ok?!

Série Como Criar Sites Responsivos Com Grid CSS 3


Posts Relacionados
Deixe uma resposta
Captcha Clique para atualizar o código