stylus-responsive-breakpoints

stylus-responsive-breakpoints

a media queries of stylus block mixins

Installation

npm install stylus-responsive-breakpoints --save

Quoted articles

• Angular Material - Layout > Layout Containers
• Detect iPhone/iPad purely by css

Usage

Via CLI

// index.styl
@import 'stylus-responsive-breakpoints'

+srb-portrait()
  body
    color white

stylus --use stylus-responsive-breakpoints index.styl
# @media (orientation: portrait) {
#   body {
#     color: #fff;
#   }
# }

Via API

import stylus from 'stylus';
import stylusResponsiveBreakpoints from 'stylus-responsive-breakpoints';

stylus(`
  +srb-portrait()
    body
      color white
`)
.use(stylusResponsiveBreakpoints())
.import('stylus-responsive-breakpoints')
.render((err, css) => {
  if (err) {
    throw err;
  }
  console.log(css);
  // @media (orientation: portrait) {
  //   body {
  //     color: #fff;
  //   }
  // }
});

Mixins

srb-portrait()

+srb-portrait()
  body
    color white

@media (orientation: portrait) {
  body {
    color: #fff;
  }
}

srb-landscape()

+srb-landscape()
  body
    color white

@media (orientation: landscape) {
  body {
    color: #fff;
  }
}

srb-xs()

+srb-xs()
  body
    color white

@media (max-width: 599px) {
  body {
    color: #fff;
  }
}

srb-sm()

+srb-sm()
  body
    color white

@media (min-width: 600px) and (max-width: 959px) {
  body {
    color: #fff;
  }
}

srb-md()

+srb-md()
  body
    color white

@media (min-width: 960px) and (max-width: 1279px) {
  body {
    color: #fff;
  }
}

srb-lg()

+srb-lg()
  body
    color white

@media (min-width: 1280px) and (max-width: 1919px) {
  body {
    color: #fff;
  }
}

srb-xl()

+srb-xl()
  body
    color white

@media (min-width: 1920px) {
  body {
    color: #fff;
  }
}

srb-gt-xs()

+srb-gt-xs()
  body
    color white

@media (min-width: 600px) {
  body {
    color: #fff;
  }
}

srb-gt-sm()

+srb-gt-sm()
  body
    color white

@media (min-width: 960px) {
  body {
    color: #fff;
  }
}

srb-gt-md()

+srb-gt-md()
  body
    color white

@media (min-width: 1280px) {
  body {
    color: #fff;
  }
}

srb-gt-lg()

+srb-gt-lg()
  body
    color white

@media (min-width: 1920px) {
  body {
    color: #fff;
  }
}

srb-device-sm()

+srb-device-sm()
  body
    color white

@media (max-device-width: 480px) {
  body {
    color: #fff;
  }
}

srb-device-md()

+srb-device-md()
  body
    color white

@media (min-device-width: 481px) and (max-device-width: 1024px) {
  body {
    color: #fff;
  }
}

srb-device-lg()

+srb-device-lg()
  body
    color white

@media (min-device-width: 1025px) {
  body {
    color: #fff;
  }
}

srb-gt-device-sm()

+srb-gt-device-sm()
  body
    color white

@media (min-device-width: 481px) {
  body {
    color: #fff;
  }
}

srb-gt-device-md()

+srb-gt-device-md()
  body
    color white

@media (min-device-width: 1025px) {
  body {
    color: #fff;
  }
}

Development

Requirement global

• NodeJS v5.11.1
• Npm v3.8.6 (or pnpm)

git clone https://github.com/59naga/stylus-responsive-breakpoints
cd stylus-responsive-breakpoints
npm install

npm test

License

MIT