Advertisement
  1. Web Design
  2. Salvattore

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

Scroll to top
Read Time: 5 min

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.

1
<html>
2
<head>
3
        <link rel="stylesheet" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
4
        <title>Salvattore + Bootstrap</title>
5
    </head>
6
    <body>
7
8
    <!-- É aqui onde a mágica acontece! -->
9
10
    <script src="salvattore.js"></script>
11
12
    </body>
13
</html>

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.

1
<div class="row">
2
<div class="col-xs-12 col-md-4"></div>
3
    <div class="col-xs-6 col-sm-3 col-md-4"></div>
4
    <div class="col-xs-6 col-sm-3 col-md-4"></div>
5
    <div class="col-xs-12 col-sm-3 col-md-4"></div>
6
    <div class="col-xs-6 col-md-4"></div>
7
    <div class="col-xs-6 col-md-4"></div>
8
</div>

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:

1
<div class="panel panel-primary">
2
<div class="panel-heading">Cabeçalho de painel sem título</div>
3
    <div class="panel-body">Conteúdo do painel</div>
4
</div>

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á:

1
<div id="grid" data-columns>
2
<div class="panel panel-primary">
3
        <div class="panel-heading">Cabeçalho de painel sem título</div>
4
        <div class="panel-body"> Conteúdo do painel </div>
5
    </div>
6
7
    <!-- replique o painel tantas vezes quanto quiser -->
8
9
</div>

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

1
@media screen and (min-width: 1px) and (max-width: 767px){
2
#columns[data-columns]::before {
3
        content: '2 .col-xs-6';
4
    }
5
}
6
@media screen and (min-width:768px) and (max-width: 991px){
7
    #columns[data-columns]::before {
8
        content: '3 .col-sm-4';
9
    }
10
}
11
@media screen and (min-width:992px) and (max-width: 9999px){
12
    #columns[data-columns]::before {
13
        content: '4 .col-md-3';
14
    }
15
}

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:

1
function append(title, content) {
2
// constroi/seleciona nossos elementos

3
    var grid = $('#columns')[0];
4
    var item = document.createElement('div');
5
    // build the html

6
    var h = '<div class="panel panel-primary">';
7
    h += '<div class="panel-heading">';
8
    h += title;
9
    h += '</div>';
10
    h += '<div class="panel-body">';
11
    h += content;
12
    h += '</div>';
13
    h += '</div>';
14
    salvattore['append_elements'](grid, [item])
15
    item.outerHTML = h;
16
}
17
$.getJSON("https://www.googleapis.com/books/v1/volumes?q=inauthor:Ernest+Hemingway&callback=?", function (data) {
18
    $(data.items).each(function (i, book) {
19
        append(book.volumeInfo.title, book.volumeInfo.description);
20
    });
21
});

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.

1
<div id="grid" data-columns></div>

A Salvattore preencherá as colunas por nós.

Nosso código finalizado parecerá com isso:

1
<!DOCTYPE html>
2
3
<html>
4
<head>
5
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
6
    <style type="text/css">
7
        @media screen and min-width 1px and max-width 767px {
8
            #columns[data-columns]::before {
9
                content: '2 .col-xs-6';
10
            }
11
12
        }
13
14
        @media screen and min-width768px and max-width 991px {
15
            #columns[data-columns]::before {
16
                content: '3 .col-sm-4';
17
            }
18
19
        }
20
21
        @media screen and min-width992px and max-width 9999px {
22
            #columns[data-columns]::before {
23
                content: '4 .col-md-3';
24
            }
25
26
        }
27
    </style>
28
29
    <title></title>
30
</head>
31
32
<body>
33
    <div class="container">
34
        <h1 class="col-xs-12">Livros por Ernest Hemingway</h1>
35
36
        <div data-columns="" id="columns">
37
            <div></div>
38
            <div></div>
39
            <div></div>
40
        </div>
41
    </div>
42
43
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
44
    <script src="salvattore.js"></script>
45
    <script>
46
        function append(title, content) {
47
            var grid = document.querySelector('#columns');
48
            var item = document.createElement('div');
49
            var h = '<div class="panel panel-primary">';
50
            h += '<div class="panel-heading">';
51
            h += title;
52
            h += '</div>';
53
            h += '<div class="panel-body">';
54
            h += content;
55
            h += '</div>';
56
            h += '</div>';
57
            salvattore['append_elements'](grid, [item]) item.outerHTML = h;
58
        }
59
        $.getJSON("https://www.googleapis.com/books/v1/volumes?q=inauthor:Ernest+Hemingway&callback=?", function (data) {
60
            $(data.items).each(function (i, book) {
61
                append(book.volumeInfo.title, book.volumeInfo.description);
62
            });
63
        });
64
    </script>
65
</body>
66
</html>

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
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.