When I use Susy, to help identify which breakpoints are being utilized (and when), I use a helper that produces a numerical color-coded identifier that makes it easy to see what breakpoint I am on and how many columns are being used at any given viewport:
This is especially helpful when testing responsive web design in different devices, or varying your browser window size.
To produce this marker I use the following mixin:
/* RWD Marker
I then add the following property to the
If you are using the starter HTML from Setting up a Smart HTML Foundation for Rails and the starter CSS from Setting up a Smart CSS Foundation for Rails this mixin and its call are already in your code. Just uncomment lines 22 and 23 in your
_layout.sass file (assuming you have completed Responsive Web Design in Rails with Susy).
Hope you find this helper useful.
Want to know when the next article is published? Subscribe here. Thanks for reading!