Scss-responsive-helper NPM

scss-responsive-helper

Simple boilerplate SCSS framework to help write media queries in scss

Installation

Run npm install scss-responsive-helper
Include in your main scss file by @import "scss-responsive-helper";

Usage

- Common functions

font-face: Initialize font-family, font-size, font-weight, font-style and color
positioning - Align left, right, top, bottom or center
center-block - Align a block element at the center
background-gradient - Apply a background gradient by specifying the start color, end color and orientation
ellipsis - Truncate a text and show ellipsis

- Responsiveness

for-phone-only: < 600px
for-tablet-portrait-up: >=600px
for-tablet-landscape-down: <=767px
for-tablet-landscape-up: >=767px
for-desktop-down: <=991px
for-desktop-up: >=992px
for-big-desktop-down: <=1199px
for-big-desktop-up: >=1200px
width-less-than($size): <=$size
width-more-than($size): >=$size
width-in-between($minSize, $maxSize): <=$minSize and >=$maxSize

Examples

.foo {
  font-size: 2rem;
  @include for-tablet-landscape-down {
    font-size: 1.2rem;
  }
  @include for-mobile-only {
    font-size: 1rem
  }
}
.foo1 {
  @include width-more-than(1200px) {
    width: 80%;
  }
  @include width-in-between(601px, 1199px) {
    width: 90%;
  }
  @include width-less-than(600px) {
    width: 100%;
  }
}

will transform to

.foo {
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
  .foo {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 600px) {
  .foo {
    font-size: 1rem;
  }
}
@media screen and (min-width: 1200px) {
  .foo1 {
    width: 80%;
  }
}
@media screen and (min-width: 601px) and (max-width: 1199px) {
  .foo1 {
    width: 90%;
  }
}
@media screen and (max-width: 600px) {
  .foo1 {
    width: 100%;
  }
}