Como Criar Sites Responsivos com Grid CSS 3 – Parte #1

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.

Recomendo que, antes de iniciar esta série, Como Criar Sites Responsivos com Grid CSS 3, que acompanhe as três postagens da série anterior: Criar Site Responsivo com HTML5 e CSS3 – Parte 01Criar Site Responsivo com HTML5 e CSS3 – Parte 02Criar Site Responsivo com HTML5 e CSS3 – Parte FINAL, pois, os principais conceitos de web design responsivo e aplicações em layouts, já foram explanados por lá, e, com isso, para não tornar o conteúdo redundante, repetitivo, serei mais direto aqui, tudo bem?

Série Como Criar Sites Responsivos Com Grid CSS 3

Ao final desta série, Como Criar Sites Responsivos com Grid CSS 3, você terá visto:

  • Como criar um sistema de grid responsivo com css 3
  • Como criar sites responsivos com o grid css 3 que você desenvolverá
  • Conhecerá o editor Brackets, uma poderosa ferramenta de edição para web
  • Entenderá como é o fluxo de conversão de um layout desenvolvido em grid, para responsive web design

Passo 1 – Conhecendo o projeto do site responsivo com grid

O projeto responsivo consiste em uma grade de 12 colunas, de 90 px cada uma; gutters(calhas, espaço entre as colunas) de 20 px; margin (margem dos lados esquerdo e direito) de 10 px cada uma; totalizando uma width (largura) de 1.320 px ao total e 1.300 px de área útil.

responsive grid 12 colunas

Fig. 01 – Responsive grid de 12 colunas

Abaixo, dois dispositivos objetos de estudo deste tutorial, Como Criar Sites Responsivos com Grid CSS 3, um mobile de 320 px e um tablet de 768 px. Veja como o conteúdo ficou distribuído em cada um de acordo com sua visualização:

Passo 2 – Conhecendo um pouco sobre grid e sua importância

Grid, a grosso modo, nada mais é que uma grade, uma grelha, uma malha. representada por linhas e colunas que permite trabalhar de maneira rápida, eficiente e consistente, todos os itens e conteúdos que estão sobre ela.

O surgimento das grids

A utilização de grids sempre esteve presente na web a partir do momento que os desenvolvedores sentiram a necessidade de ter uma maior controle sobre a disposição e controle do conteúdo em websites. E tudo começou quando se usava muito tabelas para exercer essa função (não sinto falta desta técnica…rsrsrs), seguida pelo tableless e o emprego dos floats e inline-block (se você já usa CSS, deve saber do que estou falando), mas o uso de hacks (gambiarras técnicas do CSS) eram constantes devido a não aceitação dos navegadores da época. E, apesar do surgimento do flexbox, cuja função é trabalhar com layouts simples e não complexas, mesmo assim, faltava algo (flexbox+grid = show). E, com o surgimento das grid, de uma certa maneira, solucionou-se vários problemas.

E o que é um responsive grid (grade responsiva)?

O objeto central desta série,  Como Criar Sites Responsivos com Grid CSS 3, advem do conceito de grade responsiva, que trata-se de um conjunto de elementos do CSS que nos auxiliam na organização do conteúdo de um projeto web, que vai se adequando aos diferentes dispositivos os quais ele está sendo visualizado.

Quais os maiores benefícios das responsives grids aos usuários?

  • Maior e melhor experiência do usuário – UX
  • Mais atenção ao que importa, como o conteúdo
  • Facilidade na leitura independente do dispositivo

E o benefícios para web designers e desenvolvedores?

  • Maior gerenciamento da disposição do conteúdo
  • Atualizações e manipulações são mais fáceis
  • Linguagem visual uniforme
  • Rapidez na codificação
  • Aumento da produtividade
  • Versatilidade devido às inúmeras combinações de layout

Mas por que fazer uma grid do zero se existem vários frameworks excelentes no mercado?

Imagine a seguinte situação:

Você precisa apertar um parafuso frouxo da sua cadeira. Você abre a gaveta da sua mesa de trabalho e visualiza uma chave de fenda e um canivete suíço. Qual destas ferramentas vocês escolherá para resolver seu problema?

  • Chave de fenda
  • Canivete suíço

Ambas as ferramentas lhe ajudarão, porém, uma simples chave de fenda já seria o suficiente, não acha? Pois, usar o canivete suíço, na prática, seria como subutilizá-lo.

Então, o intuito de criar um grid personalizado é devido à sua exigência como desenvolvedor. Se você vai fazer um trabalho simples, sem muitos recursos e não quer se perder com tantas funcionalidades que um framework como o Bootstrap, Foundation, UIkit ou Metro UI, por exemplo.

Não estou dizendo para não usá-las, pelo contrário: usem e abusem desses frameworks robustos, mas às vezes, para fazer uma anotação, um simples bloco de notas resolve, ao invés de um Word, não é?

E a quantidade de colunas, qual é a ideal?

Aí vai depender do seu projeto. As grids de 12 colunas (as quais faremos aqui, nesta série Como Criar Sites Responsivos com Grid CSS 3), são bastante difundidas por terem uma flexibilidade maior para dividir o layout e melhor organizar o conteúdo. É possível criar diversas variações como mostrado a seguir:

Responsive Grid CSS 12 Columns

Responsive Grid CSS 12 Columns

Alguns exemplos de websites desenvolvidos com grids de 12 colunas

Para mais exemplos, acesse o site 960 Grid System

Técnicas para desenvolvimento de grids CSS

Existem algumas técnicas para a criação de grades responsivas em CSS, dentre elas:

  • Margens negativas
  • Propriedade box-sizing (técnica escolhida para esta série)
  • Atributo table da propriedade display (display: table;)
  • Propriedade flexbox
  • Atributo grid da propriedade display (display:grid)

Entenda a utilização da propriedade box-sizing

Por padrão, os navegadores calculam a largura (width) e altura (height) dos elementos de uma página da seguinte maneira:

largura (width) + preenchimento (padding) + borda (border) = à largura final

altura (height) + preenchimento (padding) + borda (border) = à altura final

O problema aqui é que quando definirmos as dimensões de um elemento, ele aparece maior do que deveria, causando transtornos para nós, desenvolvedores.

Veja este exemplo:

Veja o resultado:

Preenchimento padrão dos navegadores com relação aos dimensionamentos dos elementos da página

Preenchimento padrão dos navegadores com relação aos dimensionamentos dos elementos da página

Com o surgimento do CSS3,  momentos obscuros como este, deixaram de ser um drama para os desenvolvedores, trazendo a propriedade box-sizing.

Assim, acrescentando essa propriedade no exemplo anterior, obteremos o seguinte resultado:

Utilizando a propriedade box-sizing do CSS3

Utilizando a propriedade box-sizing do CSS3

Este será o método adotado por esta série, Como Criar Sites Responsivos com Grid CSS 3.

Compatibilidade da propriedade css3 box-sizing com os principais navegadores

Navegadores compatíveis com a propriedade css box-sizing

Navegadores compatíveis com a propriedade css box-sizing – Fonte: http://caniuse.com/#search=box-sizing

Passo 3 – Preparativos iniciais para o desenvolvimento do projeto da grid responsiva

Se você já acompanha meu blog, sabe que sempre inicio meus projetos com a organização básica da minha área de trabalho e os arquivos que a comporão, além dos aplicativos que utilizarei. E, se você é um(a) novato(a) por aqui, #ficaAdica 😉

Tenha seu editor HTML/CSS em mãos

Como mencionei no início desta série, Como Criar Sites Responsivos com Grid CSS 3, utilizarei o Brackets, minha nova “paixão”….rsrs Mas, se sua paixão for pelo Adobe Dreamweaver, o Sublime Text, o Coda, o Notepad++ ou até mesmo o velho e bom, bloco de notas, não tem problema, a codificação que farei aqui independerá da utilização de um software ou outro.

Organize seu ambiente

Deixemos tudo no seu devido lugar, como na imagem abaixo:

Organizando pastas e arquivos do projeto do grid responsivo

Organizando pastas e arquivos do projeto do grid responsivo

Crie a estrutura HTML5 básica do arquivo grid.html

Para ressaltar, destaquei as linhas 5 e 7 que fazem referência a visualização dos dispositivos (viewport) e arquivo CSS, respectivamente.

Entenda os elementos que compõe a Responsive Grid CSS

Elementos de uma responsive grid css

Elementos de uma responsive grid css

Uma grid lembra muito uma tabela, com linhas, colunas e espaçamento entre as células. Utilizarei uma nomenclatura na língua inglesa devido a sua habitual padronização em frameworks profissionais e, quando chegarmos a este nível, já estaremos habituados, ok?!

Portanto, uma grid básica possui 4 elementos:

  1. container – área que envolve todos os outros elementos
  2. rows – linhas
  3. columns – colunas
  4. gutters – calha; espaçamento entre as colunas

Com base nessas definições, vejamos como detalhar um pouco mais o layout do projeto:

Mobile First - Organização do layout website

Mobile First – Organização do layout website

Passo 4 – Mobile First, conheça um pouco sobre ele

Esse tema merece uma postagem específica, mais, vou resumi-lo para que entenda porque iniciei o layout da imagem acima, voltado para smatphones.

Eu disse que mereceria um post específico sobre o tema, pois é muita informação para ser assimilada. Todos esses números e tendências, já revelam o quão será predominante o uso correto e aprendizagem de técnicas e conceitos como responsive design e mobile first.

Porém, para resumir, o conceito de mobile first surgiu como uma mudança que o projeto e desenvolvimento de projetos web seja iniciado, primeiramente, pensando-se em dispositivos móveis, para depois, em PC’s, TV’s, aparelhos de grandes resoluções.  O jeito de se pensar em design, UX, arquitetura de informação sofreu mudanças importantes e trata o conteúdo com maior enfoque.

Está entendendo agora porque iniciaremos a criação do grid com o desenvolvimento voltado para o conceito mobile first?

E tem mais, no site mediaqueri.es você encontrará exemplos maravilhosos de sites responsivos e uma visão interessante sobre o projeto de desenvolvimento de sites responsivos.

Exemplo Mobile First - CapRadio Go Anywhere Raffle

Exemplo Mobile First – CapRadio Go Anywhere Raffle

Exemplo Mobile First - Think with Google

Exemplo Mobile First – Think with Google

Exemplo Mobile First - Nanoc

Exemplo Mobile First – Nanoc

E aí, interessou-se mais sobre esta série, Como Criar Sites Responsivos com Grid CSS 3? Acompanhe a parte #2.

Série Como Criar Sites Responsivos Com Grid CSS 3

CarlosHPS Webdesigner 8)


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