Skip to content

Instantly share code, notes, and snippets.

@bramchi
Created March 20, 2016 20:01
Show Gist options
  • Save bramchi/4e7d8248c56e2ddd9f79 to your computer and use it in GitHub Desktop.
Save bramchi/4e7d8248c56e2ddd9f79 to your computer and use it in GitHub Desktop.
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.
// 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';
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment