0.0.2 • Published 8 years ago
stylus-responsive-breakpoints v0.0.2
stylus-responsive-breakpoints
a media queries of stylus block mixins
Installation
npm install stylus-responsive-breakpoints --save
Quoted articles
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