Singularity Quick Spanner demo

This is a test page for Singularity Quick Spanner. https://github.com/lolmaus/singularity-quick-spanner

Thumbnail grid

A thumbnail grid is a symmetric grid of equal-sized elements. The number of elements may vary, but is enough to fill at least several rows of the grid.

With Singularity Quick Spanner, you can efforlessly set up a thumbnail grid:

HTML

<div class=thumbnail></div>
<div class=thumbnail></div>
....
<div class=thumbnail></div>
<div class=thumbnail></div>

Sass

.thumbnail
  +thumb-span(5, 0.1)

Result

Did you notice that horizontal and vertical gutters are equal?

Responsive thumbnail grid

You can make a responsive thumbnail grid with a snap of fingers!

HTML

Same as above.

Sass

It can be as simple as:

.thumbnail
  +rwd-thumb-span

We'll customize it a little for better looks:

// Global options
$slicer-breakpoints: 0 200px 400px 600px 800px 1000px 1200px 1400px 1600px 1800px 2000px !global
$sqs-thumb-span-center-last-row: true !global
$sqs-thumb-span-cancel-last-row-margins: true !global

.thumbnail
  +rwd-thumb-span($overhead-min: 11, $overhead-max: 11)

Result

The size of thumbnails is determined by the size of Breakpoint Slicer's slices. For thumbnails to maintain constant apparent size, slices have to be regular.

Mind that the last row centering and last row margin cancelling features may produce excessive amounts of CSS.