Skip to content

Instantly share code, notes, and snippets.

@remainstheday
Last active November 22, 2016 19:09
Show Gist options
  • Save remainstheday/3a7dc1a2776e87435586 to your computer and use it in GitHub Desktop.
Save remainstheday/3a7dc1a2776e87435586 to your computer and use it in GitHub Desktop.
easily include this file into your project then call the breakpoints while writing your styles.css
/* === Responsive Breakpoint Values === */
// XL Breakpoint: 1025px - 1200px; (desktop and up)
// L Breakpoint: 769px - 1024px; (tablet landscape)
// M Breakpoint: 706px - 768px; (tablet portrait)
// S Breakpoint: 481px - 705px; (mobile landscape)
// XS Breakpoint: 320px - 480px; (mobile portrait)
/* === LESS variables === */
@mq-desktop : 1025px;
@mq-tablet-landscape : 769px;
@mq-tablet-portrait : 706px;
@mq-mobile-landscape : 481px;
@mq-mobile-portrait : 320px;
/* mobile portrait and landscape */
.mobile-only(@content) {
@media (max-width : @mq-mobile-landscape) {
@content();
}
}
/* everything up to mobile mobile portrait only */
.mobile-portrait-only(@content) {
@media (max-width : @mq-mobile-portrait) {
@content();
}
}
/* everything up to and including the mobile portrait */
.mobile-portrait-and-below(@content) {
@media (max-width : @mq-mobile-portrait) {
@content();
}
}
/* the mobile portrait and everything above */
.mobile-portrait-and-up(@content) {
@media (min-width : @mq-mobile-portrait) {
@content();
}
}
/* anything larger than a mobile portrait up to mobile landscape */
.mobile-landscape-only(@content) {
@media only screen and (min-width : @mq-mobile-portrait + .001) and (max-width : @mq-mobile-landscape) {
@content();
}
}
/* anything including mobile landscape and everything below that */
.mobile-landscape-and-below(@content) {
@media only screen and (max-width : @mq-mobile-landscape) {
@content();
}
}
/* Everything above and including the mobile landscape width */
.mobile-landscape-and-up(@content) {
@media only screen and (min-width : @mq-mobile-portrait + .001) {
@content();
}
}
.tablet-only(@content) {
@media only screen and (min-width : @mq-mobile-landscape + .001) and (max-width : @mq-tablet-landscape) {
@content();
}
}
.tablet-portrait-only(@content) {
@media only screen and (min-width : @mq-mobile-landscape + .001) and (max-width : @mq-tablet-portrait) {
@content();
}
}
// Everything below and including the portrait width of the tablet
.tablet-portrait-and-below(@content) {
@media only screen and (max-width : @mq-tablet-portrait) {
@content();
}
}
// Everything above and including the portrait width of the tablet
.tablet-portrait-and-up(@content) {
// @media only screen and (min-width : $mq-mobile-landscape + 1) {
@media only screen and (min-width : @mq-tablet-portrait + .001) {
@content();
}
}
/* Larger than portrait but less than or equal to the landscape width */
.tablet-landscape-only(@content) {
@media only screen and (min-width : @mq-tablet-portrait + .001) and (max-width : @mq-tablet-landscape) {
@content();
}
}
.tablet-landscape-and-below(@content) {
@media only screen and (max-width : @mq-tablet-landscape) {
@content();
}
}
.tablet-landscape-and-up(@content) {
@media only screen and (min-width : @mq-tablet-portrait + .001) {
@content();
}
}
.desktop-and-up(@content) {
@media only screen and (min-width : @mq-tablet-landscape + .001) {
@content();
}
}
.desktop-and-below(@content) {
@media only screen and (max-width : @mq-desktop) {
@content();
}
}
.desktop-only(@content) {
@media only screen and (min-width : @mq-tablet-landscape + .001) and (max-width : @mq-desktop) {
@content();
}
}
.retina(@content) {
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) {
@content();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment