Skip to content

Instantly share code, notes, and snippets.

@mikesusz
Created June 11, 2015 18:42
Show Gist options
  • Save mikesusz/29c6387da8ca7ce5ba24 to your computer and use it in GitHub Desktop.
Save mikesusz/29c6387da8ca7ce5ba24 to your computer and use it in GitHub Desktop.
// these are breakpoints made with Neat grids.
$medium-screen: new-breakpoint(min-width 640px 12);
$bigger-screen: new-breakpoint(min-width 910px 12);
$hugest-screen: new-breakpoint(min-width 1200px 12);
// to use: put this div at the top of your page
// <div id="sizer"></div>
#sizer {
font-size: 0.5em;
color: white;
padding: 0.1em 0.25em;
text-align: center;
background-color: green;
opacity: 0.75;
&:before {
content: "default";
}
@include media( $medium-screen )
{
background-color: blue;
&:before { content: "$medium-screen"; }
}
@include media( $bigger-screen )
{
background-color: purple;
&:before { content: "$bigger-screen"; }
}
@include media( $hugest-screen )
{
background-color: red;
&:before { content: "$hugest-screen"; }
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment