salvattore.js.orgSalvattore — A jQuery Masonry alternative with CSS-driven configuration

Download .min.js .js Github repository Salvattore A jQuery Masonry alternative with CSS-driven configuration. With Salvattore you can turn content: ' '; into this: A multi-column grid. How it works Salvattore distributes your grid items according to the number of columns you specify. Each of the items in your grid is placed within these columns, one by one. To get started, simply add the data-columns attribute to the grid element. <div id="grid" data-columns > <div>Item #1</div> <div>Item #2</div> <div>Item #3</div> … <div>Item #20</div> </div> Now, in your CSS file, simply refer to the grid (with the [data-columns] attribute selector included, Salvattore relies on this), followed by the ::before pseudo-element. The number of columns desired and the class or classes for each of them should be defined on the content property. #grid[data-columns]::before { content: '3 .column.size-1of3' ; } /* These are the classes that are going to be applied: */ .column { float: left; } .size-1of3 { width: 33.333%; } With those settings, Salvattore is ready to go! Just include the script at the bottom of your page and the resulting HTML should be the following: <div id="grid" data-columns> <div class="column size-1of3" > <div>Item #1</div> <div>Item #4</div> … </div> <div class="column size-1of3" > <div>Item #2</div> <div>Item #5</div> … </div> <div class="column size-1of3" > <div>Item #3</div> <div>Item #6</div> … </div> </div> If you didn't provide any classes in your CSS settings, .column will be used by default. Media queries Making your design responsive is just as easy as you would think. You only need to wrap your Salvattore settings in your @media rule. @media screen and (max-width: 480px){ #grid[data-columns]::before { content: '1 .column.size-1of1' ; } } @media screen and (min-width: 481px) and (max-width: 768px) { #grid[data-columns]::before { content: '2 .column.size-1of2' ; } } @media screen and (min-width: 769px) { #grid[data-columns]::before { content: '3 .column.size-1of3' ; } } /* Again, you’re free to use and define the classes: */ .column { float: left; } .size-1of1 { width: 100%; } .size-1of2 { width: 50%; } .size-1of3 { width: 33.333%; } This whole website is responsive, so you can see how well this works by resizing your viewport. Also, please make sure you set the min-width and max-width very detailed like above so that the script runs properly. Note: media queries compatibility only works on a server (local or remote). And unfortunately, it won’t play well with other at-rules, such as @charset or @import . Dynamic content Salvattore has two functions you can work with: appendElements and prependElements . These two functions have the same arguments: the grid and the elements you want added to it. var grid = document.querySelector('#grid'); var item = document.createElement('article'); salvattore. appendElements ( grid , [item] ); item.outerHTML = 'I’ve been appended!'; Here's a demonstration of this principle applied to a working grid, you can check the code used for it: 1 Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita. 2 Ahi quanto a dir qual era è cosa dura esta selva selvaggia e aspra e forte che nel pensier rinova la paura! 3 Tant'è amara che poco è più morte; ma per trattar del ben ch'i' vi trovai, dirò de l'altre cose ch'i' v'ho scorte. 4 Io non so ben ridir com'i' v'intrai, tant'era pien di sonno a quel punto che la verace via abbandonai. 5 Ma poi ch'i' fui al piè d'un colle giunto, là dove terminava quella valle che m'avea di paura il cor compunto, guardai in alto, e vidi le sue spalle vestite già de' raggi del pianeta che mena dritto altrui per ogne calle. 6 Allor fu la paura un poco queta che nel lago del cor m'era durata la notte ch'i' passai con tanta pieta. 7 E come quei che con lena affannata uscito fuor del pelago a la riva si volge a l'acqua perigliosa e guata, così l'animo mio, ch'ancor fuggiva, si volse a retro a rimirar lo passo che non lasciò già mai persona viva. Prepend content Append content Items are appended and prepended on the same container without conflicts. You can combine this API with your XHR functions to have a dynamic layout with live content. In the wild FFFFribbble La Mula Tadpoles Lens theme Bucket theme Kontraktion Creating fame 20Jeans Pebble Design Katie Scott The Social Butterfly ADSL Zone Buiten Deadtype Studio M3 Your website -- Using Salvattore and would like to be featured? Send us your website Requirements None. Salvattore is a standalone JS file, it will run automatically once called in the HTML document. It does not use jQuery to work. However, you can still use jQuery or any other JS library to work with the API to get advanced functionality. Buy us some booze If you find this script useful and would like to make a donation, you know what to do. Download .min.js .js Github repository Salvattore works in Safari, Chrome, Firefox, Opera and IE9+. Follow us on Twitter for updates. Made by Rolando Murillo and Giorgio Leveroni. Currently and thankfully maintained by Marius Rumpf....