A little helper snippet to complement the visual-grid in Bourbon Neat. It shows what media query is currently active, using a little label in the bottom right corner.

active-media-query-helper.scss

// Set visual-grid in _grid-settings.scss for a nice grid overlay
@if ($visual-grid) {
    body:after {
        display: block;
        position: fixed;
        bottom: 0;
        right: 0;
        font-size: 12px;
        background-color: darkred;
        color: white;
        padding: 2px 3px;
        content: 'smaller then mobile';
        @include media( $mobile ){
            content: 'mobile';
        }
        @include media( $tablet ){
            content: 'tablet';
        }
        @include media( $desktop ){
            content: 'desktop';
        }
        @include media( $large-desktop ){
            content: 'large desktop';
        }
    }
}