Easy Breakpoints For SASS

readme.md

Easy Breakpoints For SASS

ini dibuat untuk memudahkan kita dalam melakukan implementasi design dan diharuskan dibuat responsive, untuk web yang responsive tentunya kita harus detail, dan sudah pasti lama, tapi itu dulu, dengan bantuan breakpoints ini kita dapat meringkasnya dengan mudah dan cepat dan mudah untuk di maintenance

How To Use

• Buat file scss mu sendiri
• Import _breakpoints.scss ini ke dalam file scssmu ( usahakan 1 direktori ) import "./breakpoints.scss"
• jika sudah begini cara menggunakannya :

.wrap-menu {
margin-top: 100px;

//jika layar terdeteksi desktop maka akan menggunakan style yg ini
@include desktop(){
margin-top: 0px;
}

//jika layar terdeteksi large maka akan menggunakan style yg ini
@include large(){
margin-top: 100px;
}

//pilihan layar lainnya bisa dilihat pada file _breakpoints.scss
}

selesai ! work smart not hard
-- salam satu frontend 👍


**Rizky Bayu Oktavian**
https://twitter.com/rbayuokt

_breakpoints.scss

/*********************
* BREAKPOINTS FOR SASS
* @author : Rizky Bayu Oktavian
* @twitter : @rbayuokt
*********************/

@mixin phone {
   @media screen and (min-width: 320px) and (max-width: 480px){
       @content;
   }
}

@mixin phone-portrait {
   @media screen and (max-width: 320px){
       @content;
   }
}

@mixin phone-landscape {
   @media screen and (min-width: 321px){
       @content;
   }
}

@mixin tablet {
   @media screen and (min-width: 768px) and (max-width: 1024px){
       @content;
   }
}

@mixin tablet-portrait {
   @media screen and (min-width: 768px){
       @content;
   }
}

@mixin tablet-landscape {
   @media screen and (min-width: 1024px){
       @content;
   }
}

@mixin desktop {
   @media screen and (min-width: 1024px) {
       @content;
   }
}

@mixin large {
   @media screen and (min-width: 1824px){
       @content;
   }
}

@mixin custom($screen) {
   @media (min-width: $screen+'px') {
       @content;
   }
}