Breakpoint em HTML5 CSS3. Vídeo 100

O que é um layout?

Primeiramente vamos definir o que é um layout. O layout é a disposição dos elementos de um site (isso em desenvolvimento web), o layout é um esboço de como ficará a distribuição física dos elementos.

Existem quatro modos diferentes de se criar layouts a partir de colunas, são eles.

Utilizando:

Table;
float;
framework;
flexbox.

O layout do Em Busca do Código utiliza a propriedade float. Uma observação interessante é que até a documentação da W3C (World Wide Web Consortium) afirma que float é fácil de aprender.

Durante os nossos vídeos de HTML5 e CSS3 nós aprendemos a utilizar a propriedade float sem nenhuma dificuldade e com naturalidade, o que só confirma ainda mais a afirmação da W3C.

Flexbox

Utilizar flexbox para desenvolver seu layout significa utilizar o modo que surgiu junto com o CSS3, por isso um dos mais citados em fóruns e grupos de desenvolvedores web.

Uma desvantagem de se utilizar flexbox é que ele não funciona nos navegadores da Microsoft até o IE10.

Eu não utilizo flexbox, não o estudei, muito provavelmente existe modos de fazer com que funcione, mas essa informação está na documentação oficial sobre layout da W3C, link no final deste artigo.

O que é web design responsivo?

Web design responsivo, ou somente layout responsivo não é um programa ou um JavaScript, ele é composto somente por HTML e CSS (W3C).

O que é viewport?

Não importa o dispositivo que o usuário esteja vendo seu site, a viewport é a área visível do mesmo (de um site). No inicio (a alguns anos) não existiam smartphones então os sites eram vistos apenas através de computadores pessoais (PCs).

A viewport varia de acordo com o dispositivo, será menores em celulares e maiores em desktops (pcs e notebooks). Antes da popularização dos smartphones os sites eram estáticos, por isso quando começamos a utilizar tablets e telefones celulares o tamanho fixo desses sites eram maiores que o viewport (parte visível), por isso os navegadores começaram a diminuir o tamanho do site para caber no viewport.

Não preciso falar que para o usuário essa experiência é horrível, mas funcionava.

E qual foi a solução?

O HTML5, "dizendo" que você tem que incluir em todas as suas paginas o elemento viewport.

Grid-view

Antes de continuarmos a falar diretamente de responsividade vamos "falar" de algo que também está no meio disso tudo. Um Grid-view, ou apenas grid.

O layout de muitos sites é baseado em grid-view (grid), o que significa que ele é baseado em colunas.

Provavelmente você não use para nada, mas se quiser fazer download do nosso grid de cima, fique a vontade.

Mas essa grid de nada nos serve pois é muito difícil usa-la. Então vamos fazer uma grid que consigamos usar.

Para fazer um grid-view de 12 colunas precisamos calcular o tamanho horizontal da tela em porcentagem.

Nós já sabemos que teremos 12 colunas então precisamos criar 12 classes, vou criar essas classes com nomes de grid01 até grid12 onde a grid01 terá 8,33%, a grid02 16,66% até a frid12 que receberá 100%.

Já editando o  HTML cada classe deve estar em uma  <div>.

Agora voltamos para o CSS e adicionamos uma cor no fundo de cada classe (background), a cor de sua preferência. E adicionamos uma borda (border). Isso em todas as classes relacionadas a nossa grid.

Mas como conseguimos ver como a nossa grid está agora, vemos que não da para entender quase nada.

Ou, entendemos sim. Mas antes de utilizarmos nossa grid vamos voltar ao HTML e adicionar uma <div> como tag pai das nossas 12 classes, não esquecendo de criar uma classe para esta <div>.

Agora voltando ao CSS vamos configurar para que os elementos inseridos sempre fiquem dentro dessas div's'.

Adicionei alguns estilos e cores, EXCLUI quase todas as div's' do meu HTML e configurei meu layout do jeito que eu quis, você confere no exemplo a seguir.

Se quiser pode fazer download desde "grid".

Escolha o tamanho/proporção (%) do seu menu lateral, e do seu main (área principal do site) lembrando que a soma tem que dar 100% sempre.

Mas se diminuirmos muito esse exemplo ou você estiver vendo de um celular/tablet/smartphone esse exemplo não será muito bom. Daí surgiu a media query.

Media Query

De que cor é o espaço entre a o subtítulo "media query" e este texto? Se branco a resolução do seu dispositivo na horizontal é maior que 350px, se preto é menor que 350px.

E se o espaço entre o paragrafo acima e este for azul a sua resolução é menor que 800px, se for vermelho é maior (resolução horizontal).

Esse exemplo é muito gostoso de se fazer e realmente é o melhor modo de se aprender. Pois bem, agora é a sua vez.

Crie um documento HTML, link um documento CSS e brinque com o seu navegador a partir do código fonte acima

Falo para você fazer isso no seu computador/PC/notebook/maquina/nave porque começou a parte HARD.

Breakpoint

Melhor do que tentar explicar o que são breakpoints é explicar o que fazer.

Utilizando breakpoint nós vamos configurar o nosso layout (o layout do site) para se comportar do jeito que queremos, tanto se for visto em um desktop (pc ou notebook), tablet ou celular (smartphone).

Desenvolva o layout do seu site sem utilizar media query, apenas utilizando grid. Assim como já vimos aqui.

Depois de desenvolvido nós poderíamos adicionar um breakpoint que diria para o navegador que, quando o viewport for pequeno (tela do dispositivo em que o usuário está vendo o site), o usuário estiver em um tablet ou celular todas as nossas colunas terão um width de 100%.

Mas não vamos fazer isso. Antes de darmos continuidade se quiser faça download do arquivo exemplo do nosso projeto. Assim fica mais fácil entendermos.

Agora você já pode assistir ao vídeo.

Assista ao vídeo:

O que nós vimos no vídeo?

Vimos o conceito mobile first, então, configuramos o nosso layout para todas as colunas relacionadas a nossa grid receber um width de 100% e, configuramos um breakpoint para quando a tela tiver no mínimo 768px receber a configuração que criamos anteriormente.

Código fonte CSS:

Depois pensamos no layout para tablets e para isso copiamos as nossas classes (CSS) da nossa grid e na cópia adicionamos "-m" no nome de cada classe. E a partir dai criamos outro breakpoint para essas "novas" classes.

Código fonte CSS:

Adicionamos as novas classes (a que quisermos) as tags ou elementos de nossa preferência no documento HTML e testamos pelo Responsive Design Mode do Mozilla Firefox

Espero que essa videoaula e este curso tenha sido útil para você, são exatamente 100 códigos fontes totalmente abertos e gratuitos para você utilizar. Até logo.

Já estava esquecendo, a seguir você confere as dimensões automaticas dos navegadores da Fundação Mozilla.

Caso entenda que faltou algo confira nossas fontes.