Skip to content

Instantly share code, notes, and snippets.

@danieltorscho
Last active November 23, 2015 00:06
Show Gist options
  • Save danieltorscho/3fa8794f5b495e125301 to your computer and use it in GitHub Desktop.
Save danieltorscho/3fa8794f5b495e125301 to your computer and use it in GitHub Desktop.
Media queries uses alongside with Twitter Bootstrap 3
// Media Queries Mixins
@xs: ~'max-width: @{screen-xs-max}';
// @media(@xs){}
@smmin: ~'min-width: @{screen-sm-min}';
// @media(@smmin) and (@smmax){}
@smmax: ~'max-width: @{screen-sm-max}';
// @media(@smmin){}
@mdmin: ~'min-width: @{screen-md-min}';
// @media(@mdmin) and (@mdmax){}
@mdmax: ~'max-width: @{screen-md-max}';
// @media(@mdmin){}
@lg: ~'min-width: @{screen-lg-min}';
// @media(@lg){}
/* -------------------------------------------------------------- */
/**** MEDIA QUERIES FOR RESPONSIVE ****/
/* -------------------------------------------------------------- */
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {
}
// Occasionally expanded media queries
@media (max-width: @screen-xs-max) {
}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
}
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
}
@media (min-width: @screen-lg-min) {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment