Spanish (Español) translation by Rodney Martinez (you can also view the original English article)
Salvattore también cuenta como un alternativa jQuery Masonry con una importante diferencia: éste usa la configuración CSS en vez de JavaScript. Éste tipo de cuadrículas pueden verse por toda la web, probablemente en los sitios más famosos como Pinterest.
Hoy, usaremos Salvattore en combinación con Twitter Bootstrap 3 para hacer una asombrosa estructura de cuadrícula fluida.
Comencemos: Qué necesitará.
En primer lugar, usted necesitará obtener la biblioteca JavaScript Salvattore (originalmente o como recurso). Después, necesitará enlazar Twitter Bootstrap CSS. En lugar de descargar y hospedar su propia copia, prestaremos ésta directamente de NetDNA BootstrapCDN.
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 |
<!-- This is where the magic happens! -->
|
9 |
|
10 |
<script src="salvattore.js"></script> |
11 |
|
12 |
</body>
|
13 |
</html>
|
Una vez que esto esté completo, ¡entonces estará listo para comenzar con la configuración en Salvattore!
Luego, necesitará, ya sea; una hoja de estilo externa o una etiqueta <style type='text/css'> en su encabezado. La mayor parte de nuestro trabajo será realizado en la hoja de estilo.
Nota: debe incluir los atributos type y rel para que Salvattore funcione adecuadamente.
Una rápida cuadrícula Boostrap
Twitter Boostrap proporciona una poderosa y flexible estructura de cuadrícula, la cual se enfoca en los medios de consultas de forma ascendente. Echemos un vistazo a una fila de columnas.
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>
|
Observará en el marcado anterior el modelo col-[size]-[column number]. Con tamaños disponibles de xs, sm, md y lg, somos capaces de configurar directamente el tamaño de las columnas para diferentes puntos de corte sin escribir una consulta específica. Eche un vistazo a éste ejemplo que muestra como las columnas giran en diferentes anchos de pantallas.
Paneles Boostrap
Crearemos una cuadrícula fluida usando el componente; panel de Bootstrap. El marcado para crear el panel se construye así:
1 |
<div class="panel panel-primary"> |
2 |
<div class="panel-heading">Panel heading without title</div> |
3 |
<div class="panel-body">Panel content</div> |
4 |
</div>
|
Uniéndolo con la magia de Salvattore
Ahora que tenemos las piezas Bootstrap que necesitamos, vamos a unirlas con Salvattore. Por ahora, empezaremos con seis paneles vacíos; después, los haremos dinámicos para darle a cada panel algo de contenido.
Para que Salvattore funcione apropiadamente, nuestro contenedor de cuadrícula necesita un atributo data-columns. Así es como luce nuestro marcado:
1 |
<div id="grid" data-columns> |
2 |
<div class="panel panel-primary"> |
3 |
<div class="panel-heading">Panel heading without title</div> |
4 |
<div class="panel-body"> Panel content </div> |
5 |
</div>
|
6 |
|
7 |
<!-- repeat the panel as many times as you'd like -->
|
8 |
|
9 |
</div>
|
A continuación, nos dirigiremos a nuestra hoja de estilos y añadiremos la siguiente etiqueta por medio de los pseudo-elements.
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 |
}
|
Los puntos de corte que hemos elegido trazan directamente el media querie de Bootstrap. Salvattore usa el pseudo-elemento ::before y el atributo content para definir las clases de las columnas que hemos creado, y luego intenta dividir los elementos eventualmente en columnas.
Hagamoslo Dinámico
Hemos mantenido las cosas directamente dentro de CSS hasta ahora, pero si quiere recorrer una milla extra, JavaScript puede ofrecer algunos extras.
Salvattore lleva las cosas un paso más hacia adelante ofreciendo añadir funcionalidad. Con estas funciones y una conexión para un API (estamos usando Google´s Book API para extraer libros de Ernest Hemingway), podemos crear una cuadrícula dinámica. Aquí está lo que usaremos en JavaScript:
1 |
function append(title, content) { |
2 |
// build/select our elements
|
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: se requiere de jQuery
Primero creamos una función append que toma nuestro título y nuestro contenido y los envuelve dentro de nuestro panel. Entonces, usamos la función salvattore['append_elements'](grid,[item]) para añadir un objeto a nuestra cuadrícula. Finalmente, ejecutamos la instancia AJAX para extraer los datos dinámicos.
Para que éste trabajo funcione apropiadamente, queremos quitar todos los contenidos en el contenedor de cuadrículas.
1 |
<div id="grid" data-columns></div> |
Salvattore rellena las columnas por nosotros.
Nuestro marcado final luce así:
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">Books by 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>
|
Conclusión
Salvattore permite crear cuadrículas dinámicas estilo Masonry de forma muy fácil para alguien que no sabe mucho sobre JavaScript. Es decir, que con una pequeña cantidad de JavaScript, creamos cuadrículas dinámicas acopladas con contenido dinámico es un soplo. Finalmente, Bootstrap proporciona clases flexibles nombrando las estructuras para crear con facilidad cuadrículas para cualquier punto de quiebre.
By
