1.0.2 • Published 4 years ago
scss-util v1.0.2
scss-util
Simple boilerplate SCSS framework
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%;
}
}
Contributing
Pull requests and feature requests are welcome. For major changes, please open an issue first to discuss what you would like to change.