Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Salvattore
Webdesign

Crie Grades Dinâmicas com Salvattore e Bootstrap em Apenas 10 Minutos

by
Difficulty:IntermediateLength:ShortLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

A Salvattore proclama-se uma alternativa ao jQuery Masonry com uma importante diferença: usar configurações através do CSS ao invés do JavaScript. Esse tipo de grade (grid) pode ser visto por toda a web, provavelmente, a mais famosa de todas é a do Pinterest.

Hoje, usarei a Salvattore juntamente do Twitter Bootstrap 3 para criar uma maravilhosa estrutura de grade responsiva.

Começando: O Que É Preciso

Primeiro, precisará de uma cópia da biblioteca JavaScript Salvattore (reduzida ou original). Depois, precisará buscar o CSS do Twitter Bootstrap. Ao invés de baixar e mantermos nossa própria cópia, usaremos a versão do BootstrapCDN, pela NetDNA.

Uma vez feito isso, estamos pronto para começar a configuração da Salvattore! 

Agora, você precisará ou de uma folha de estilo externa ou de uma tag <style type='text/css'> dentro do elemento head. A maior parte do nosso trabalho será feito dentro da folha de estilo. 

Nota: você precisa incluir os atributostype e rel para que a Salvattore funcione apropriadamente.

Um Resumo Rápido Sobre a Grade do Bootstrap

O Twitter Bootstrap provê uma estrutura de grades flexível que segue a abordagem Mobile First.

Você deve ter notado o padrão col-[size]-[column number] no trecho de código acima. Com os tamanhos xssm,md e lg disponíveis, somos capazes de configurar diferentes tamanhos de colunas para diferentes pontos de quebra do layout (breakpoints), sem precisar escrever uma media query sequer. Veja só esse exemplo que mostra como as colunas funcionam nos diferentes tamanhos de tela.

Painéis do Bootstrap

Nós criaremos uma grade flutuante usando o componente Painel do Bootstrap. O código usado para criar o painel é mais ou menos assim:

Juntando Tudo e Usando a Mágica do Salvattore

Agora que temos as peças necessárias do Bootstrap, juntaremos tudo ao Salvattore. Por hora, começaremos com seis painéis vazios. Mais para frente, faremos tudo dinamicamente para dar algum conteúdo para cada painel.

Para o Salvattore funcionar corretamente, o recipiente (container) da nossa grade precisa de um atributo data-columns. Eis como o código ficará:

O próximo passo é abrir nossa folha de estilos e adicionar as seguintes etiquetas através de pseudo-elementos:

Os pontos de quebra escolhidos espelham diretamente as media queries do Bootstrap. A Salvattore usa o pseudo-elemento ::before e o atributo content para definir as classes das colunas criadas e, então, tenta dividi-los em colunas iguais.

Tornando Dinâmico

Mantivemos tudo restrito ao CSS, até agora, mas se quiser ir além, usar JavaScript permite algumas coisas bem bacanas.

A Salvattore eleva o nível ao oferecer funcionalidades adicionais. Com essas funções e uma conexão com uma API para preencher os painéis (usaremos a API do Google Book para buscar livros do autor Ernest Hemingway), podemos construir uma grade dinâmica. Eis o código JavaScript que usaremos:

Nota: É necessário usar o jQuery

Primeiro, criamos uma função chamada append que terá como parâmetro nossos título e conteúdo, e os envolvemos no código do painel. E então, usamos a função salvattore['append_elements'](grid, [item]) para adicionar o item à nossa grade. Por fim, executamos a chamada AJAX para buscar os dados dinamicamente.

Para que isso funcione corretamente, teremos de remover todo o conteúdo do recipiente da grade.

A Salvattore preencherá as colunas por nós.

Nosso código finalizado parecerá com isso:

Conclusão

A Salvattore torna a criação de grades dinâmicas no estilo da Masonry bem fácil, mesmo para quem não sabe muito de JavaScript. Dito isso, com um pouco de JavaScript, criar grades dinâmicas atreladas a conteúdo dinâmico é muito simples. Por último, o Bootstrap provê uma estrutura de nomenclatura de classes que facilita a construção de grades para quaisquer pontos de quebra.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.