1
Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita.
A jQuery Masonry alternative with CSS-driven configuration.
With Salvattore you can turn content: '';
into this:
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.
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
.
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:
Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita.
Ahi quanto a dir qual era è cosa dura esta selva selvaggia e aspra e forte che nel pensier rinova la paura!
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.
Io non so ben ridir com'i' v'intrai, tant'era pien di sonno a quel punto che la verace via abbandonai.
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.
Allor fu la paura un poco queta che nel lago del cor m'era durata la notte ch'i' passai con tanta pieta.
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.
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.
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.
If you find this script useful and would like to make a donation, you know what to do.