Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Salvattore
Webdesign

Construye una Cuadrícula Dinámica con Salvattore y Bootstrap en 10 minutos

by
Difficulty:IntermediateLength:ShortLanguages:

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.

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.

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

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:

A continuación, nos dirigiremos a nuestra hoja de estilos y añadiremos la siguiente etiqueta por medio de los pseudo-elements.

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:

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.

Salvattore rellena las columnas por nosotros.

Nuestro marcado final luce así:

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.

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.