Breakpoint Slicer test

This is a test page for Breakpoint Slicer.
Please play with browser window width.
See the SASS code behind this demo.

Page info

Current window width is px.

Testing mixins

The default color of each paragraph is light grey.
Breakpoint Slicer is used to change the color
to black at certain window widths.

+at(3)
  background-color: black

+from(3)
  background-color: black

+to(3)
  background-color: black

+between(2, 4)
  background-color: black

Testing mixins using slice names

The default color of each paragraph is light grey.
Breakpoint Slicer is used to change the color
to black at certain window widths.

+at('m')
  background-color: black

+from('m')
  background-color: black

+to('m')
  background-color: black

+between('s', 'l')
  background-color: black

Leveraging Singularity

Breakpoint Slicer is used to set Singularity's
breakpoints and to span the column.

Please note that grid backround may be rendered inaccurately due to rounding errors in your browser, especially in Chrome.

A thumbnail grid with Singularity

A thumbnail
A thumbnail
A thumbnail
A thumbnail
A thumbnail
A thumbnail
A thumbnail
A thumbnail
A thumbnail
A thumbnail
A thumbnail
A thumbnail