Brazilian Modding Studio
Olá, seja bem vindo à Comunidade BMS!

Para se registrar no fórum, siga os passos:

1 - Clique em "Registrar-se" aqui em baixo;
2 - Aceite os termos de serviço;
3 - Escolha um nome de usuário e senha;
4 - Realize o login no fórum clicando em "Conectar-se".

Compartilhe
avatar
Designer - Avançado
Designer - Avançado
Título : <title/>
Mensagens : 836
Reputação : 89
Desde : 03/06/2012
Idade : 21
Localização : Gransys
Link : https://www.artstation.com/artist/lucascelli
Ver perfil do usuáriohttp://lucascelli.deviantart.com/
  • Reputação da mensagem: 100% (1 votos)
em Qua 17 Maio 2017, 05:28
Esse tutorial pode ser complexo para iniciantes. Vamos abordar um assunto um pouco mais aprofundado de HTML e CSS. Porém recomendo muito que leia! Tem algumas dicas que realmente são úteis.

Um sistema de grid é uma estrutura que permite o conteúdo ser organizado verticalmente e horizontalmente de forma consistente. É uma ótima maneira de criar estruturas para sites, blogs, galerias, aplicativos, etc.

Vamos começar criando o HTML



Vou fazer esse exemplo em uma <section> com as classes grid e clear.

O clear está se referindo ao clearfix que é uma forma que a maioria dos web designers usar pra evitar bugs em containers com elementos com float.

<section class="grid clear">


Itens que estarão no grid
Os primeiros 5 itens são apenas textos sobre algum background colorido. Os itens restantes estão com imagens no fundo. Mas por que colocar como valor do atributo style e não simplesmente usar a tag <img>? Pois inserindo como background podemos evitar que a imagem fique com a proporção distorcida ao se encaixar no container. Também podemos adicionar efeitos como parallax e usar atributos de background do CSS.

<div class="griditem">Hyun Hancock</div>
<div class="griditem">Adolph Aslinger</div>
<div class="griditem">Iona Israel</div>
<div class="griditem">Darnell Dahn</div>
<div class="griditem">Sharita Sontag</div>

<div class="griditem" style="background-image: url('https://i.imgur.com/Hq974HQ.jpg')">Dawn Deasy</div>
<div class="griditem" style="background-image: url('https://i.imgur.com/cz0sRqc.jpg')"><span class="cap">Imagem com 80px apenas</span></div>
<div class="griditem" style="background-image: url('https://i.imgur.com/44x0bBX.gif')"><span class="cap">Exemplo com GIF</span></div>
<div class="griditem" style="background-image: url('http://errado.jpg')">Link errado</div>
<div class="griditem" style="background-image: url('https://i.imgur.com/fjZ7r0q.png')">Megan Monteiro</div>

No exemplo acima eu coloquei algumas coisas como .gif, uma imagem extremamente ruim (80x80 pixels) e um link errado, confira o resultado disso na página de demonstração.


Agora já podemos fechar nossa <section> , o resto agora é com CSS.
</section>






Agora vamos criar o CSS



Definições iniciais:



Para que um grid funcione corretamente devemos fazer algumas adições no CSS do site.

Redefinindo o Box Model dos elementos da página
A primeira delas é redefinir o box model. Por padrão, o navegador não inclui padding e border dentro da largura e altura declarada para o elemento. Isso não é bom para a responsividade.

*,
*:after,
*:before {
box-sizing: border-box;
}

Esse é o modelo que eu uso! Ele limpa a box model de todos os elementos da página

Usando o ClearFix
O clearfix impede que objetos flutuantes saiam pra fora de seus containers pai, mantendo a estrutura do site. Nesse caso os itens do grid serão objetos flutuantes a fim de os alinhar horizontalmente e verticalmente.

.clear:before,
.clear:after {
content: "";
display: table;
}

.clear:after {
clear: both;
}


Criando estilo do grid:



.grid {
display: block;
position: relative;
margin: auto;
width: 80%;
height: auto;
}


Entendendo o código:

Posição do item no documento e alinhamento horizontal de container
O container do grid é exibido como um bloco (display: block;) com uma posição relativa (position: relative;), ou seja,  sua posição refere-se ao próprio lugar em relação ao documento, por ser um bloco podemos alinhar ele na página e como queremos que fique alinhado no centro (horizontalmente) nós usaremos o método mais simples que é definindo as margens como automáticas (margin: auto;) assim o navegador irá calcular margens iguais para a esquerda e direita do objeto deixando-o no centro.

Tamanho adaptivo com porcentagem
O grid terá uma largura de 80% do tamanho da tela do navegador (width: 80%), o navegador irá definir o tamanho em pixels que esse objeto terá. A
altura que será automática (height: auto;) assim o grid pode ter vários itens mas todos ainda estarão dentro do container do grid.

Criando estilo dos itens



.griditem {
display: flex;
flex-direction: column;
justify-content: center;
float: left;
width: calc(100% / 5 - 10px);
height: 150px;
margin: 5px;
padding: 5px;
text-align: center;
background-color: #607D8B;
background-attachment: scroll;
background-position: center;
background-size: cover;
color: #fff;
}


Entendendo o código:

Itens flexíveis com CSS3
Os itens do grid são exibidos como elementos flexíveis (display: flex;), esse é um recurso relativamente novo que pode ser usado em CSS porém os navegadores atuais carregam isso de forma correta.

Alinhando um elemento verticalmente com um item flex
Nesse caso o texto ficará exatamente no centro do container do item nós iremos fazer com que ele fique centralizado verticalmente e isso é uma tremenda dor de cabeça para a maioria dos web designers. Se é verticalmente então iremos trata-lo como uma coluna (flex-direction: column;), por padrão são definidos horizontalmente (row).

Agora é só alinhar o conteúdo do container do item no centro (justify-content: center;). Pronto, assim o conteúdo que estiver no container do item ficará alinhado verticalmente no centro.

Fazendo itens ficaram lado a lado com float
Os itens do grid devem ficar lado a lado então iremos trata-lo como um objeto flutuante (float: left;) assim os itens irão ficar à esquerda e se alinhar um à direita do outro. (Ah dá pra fazer isso com display: inline-block... sim dá, mas deixaria de ser um objeto flex e o alinhamento vertical seria feito por "gambiarra").

Definindo tamanho com cálculos em CSS
Nesse grid serão exibidos 5 itens lado a lado, então como iremos definir o tamanho exato desses itens? Simples: usaremos um pouco de matemática no nosso CSS.

No caso iremos definir a largura com o valor calc, com ela podemos realizar cálculos com os operadores + - * /.

Vamos à lógica do nosso CSS (width: calc(100% / 5 - 10px);) ele irá pegar o valor 100% e dividir por 5, então cada item terá 20%, porém eu subtraí 10 pixels desse cálculo, pois pretendo deixar os item com margens de 5 pixels entre si. (5px da esquerda de um + 5px da direita do outro). A altura dos itens será de 150 pixels (height: 150px;), esse valor é personalizável à seu gosto, em designs responsivos basta editar isso nos media queries (porém quando testei no meu dispositivo mobile ele adaptou a altura automaticamente à proporção dos itens).

Definindo margens externas e espaços internos
Agora vamos separar esses itens um do outro com uma margem de 5 pixels de cada lado (margin: 5px;), no cálculo acima esse ganho de 10 pixels pra cada item foi subtraído. Vamos inserir um espaço interno de 5 pixels (padding: 5px;) para que o conteúdo não fique próximo a borda do item.

O texto do conteúdo será centralizado (text-align: center;), isso faz com que se alinhe no centro horizontalmente.

Definindo e formatando o background
Nesse caso o fundo padrão é um azul-cinza (background-color: #607D8B;).

O background será anexado como scroll (background-attachment: scroll;) em computadores o valor scroll não faz muita diferença, mas em dispositivos mobile evita alguns bugs quando se usa uma imagem no fundo.

O fundo ficará posicionado no centro (background-position: center;) quando uma imagem for definida como fundo isso fará com que seja exibida a partir de seu centro (por padrão eu acho que é usado o canto esquerdo, ugh...).

Caso o fundo seja uma imagem, ela irá cobrir todo o item (background-size: cover;) o valor cover tenta fazer que a imagem cubra todo o espaço do container.

Por fim o texto exibido será branco (color: #fff;) isso torna a cor do conteúdo branca.





E finalmente: o Resultado



Você pode conferir uma demonstração no link abaixo:
Nessa página você pode conferir o código fonte e ver alguns comentários que fiz sobre como montei a estrutura.

demo

Se preferir, você pode ver  no codepen também (full).
No CodePen você pode exportar o arquivo como .zip

Esse é um grid flexível, tudo que é responsivo deve ser criado propriamente para tal tipo de dispositivo!
Porém testando no meu celular ele adaptou a altura dos itens do grid mas não confunda adaptatividade com responsividade.

Esse é sem dúvidas o tópico mais difícil que eu criei aqui, então.. valeu por ler.

______________________________
avatar
Scripter CLEO - Avançado
Scripter CLEO - Avançado
Título : Censurando since 2011
Mensagens : 22701
Reputação : 727
Desde : 03/05/2012
Idade : 23
Localização : Ibitinga - SP
Link : www.MixMods.com.br
Ver perfil do usuáriohttp://MixMods.com.br
em Qua 17 Maio 2017, 06:31
Desse tipo de tutorial que se precisa Not Bad

Há vários grids já prontos para baixar e usar sem se preocupar em montar o CSS, como do Twitter Bootstrap, Skeleton, Boilerplate etc, mas o melhor é ensinar para entender o que está acontecendo e não ir lá e pegar tudo pronto sem saber o que você está fazendo, né.

Só acho que você poderia ter separado melhor o .griditem, para o tutorial, seria interessante um .griditem com somente os necessários para o funcionamento do grid, e outra class para definir as propriedades visuais deste exemplo em específico (para o background e tal), assim separando melhor oque as pessoas precisam e não precisam para fazer esse grid no site delas.

______________________________
BMS agora em nova plataforma:
Forum.MixMods.com.br
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum