Subscribe to a Premium Development Newsletter by TheDevCouple! What is TheDevTakeaway?

I use Sass. SCSS flavor to be honest. I have built WPGulp (advanced) and WPSass (beginner) specific boilerplates in the past. A couple of days ago, I open sourced my small mixin for making responsive sites.

It’s a set of eight different screen sizes, opinionated and chosen after several hit & trials, tests, and have had been using it in production for about four years now.

I also wrote an introductory article → Introducing ReSass!

🚀 GITHUB: ★ 65 ⑂ 5 →

ReSass
Sass SCSS Responsive Media Queries Mixin for Eight Different Screen Sizes! 💻📱🖥
A FOSS (Free & Open Source Software) project. Maintained by @AhmadAwais. ReSass — An Opinionated Lib for Responsive Mixins for Sass 1 General

⚡️ ReSass

ReSass

ReSass (ResponsiveSass) creates responsive media queries for seven different screen sizes. These are based on min-width which means if x (x could be 240, 320, 480, 768, 1024, 1140, 1280, or 1500) is the size then your CSS will affect any device with screen width x and above.

USAGE:

ReSass CSS content goes inside {} brackets. These mixins should be used inside a class definition.

 @include r(240)  { }
 @include r(320)  { }
 @include r(480)  { }
 @include r(768)  { }
 @include r(1024) { }
 @include r(1140) { }
 @include r(1280) { }
 @include r(1500) { }

For example: The following CSS will hide the .header on screen width 320px and above.


.header {
   @include r(320)  { display: none; }
}

⚡️ Getting Started

Getting started is very easy.

  1. Download the raw resass.scss
  2. Import the resass.scss in your main .SCSS file → @import "path/to/resass";
  3. Now use any or all of the mixins inside a class' CSS.
  4. Here's a fun implementation at CodePen →

⚡️ License

MIT licensed. Content is copyright of AhmadAwais.com


Hello

🙌 THEDEVCOUPLE PARTNERS

This open source project is maintained by the help of awesome businesses listed below. What? Read more about it →

ReSass — An Opinionated Lib for Responsive Mixins for Sass 2 General ReSass — An Opinionated Lib for Responsive Mixins for Sass 3 General
ReSass — An Opinionated Lib for Responsive Mixins for Sass 4 General ReSass — An Opinionated Lib for Responsive Mixins for Sass 5 General



For anything else, tweet at @MrAhmadAwais

I have released a video course to help you become a better developer — Become a VSCode Power User →


ReSass — An Opinionated Lib for Responsive Mixins for Sass 6 General
VSCode
_VSCode Power User Course →_

It’s free and open source. Issues/PR’s are welcomed on GitHub. Let me know what you think about this 🙂

🚀 GITHUB: ★ 65 ⑂ 5 →

🙌

SUBSCRIBE TO DEVELOPERS TAKEAWAY!

A Premium Development Newsletter by TheDevCouple! What is TheDevTakeaway?

Meet Ameer Dagha the man behind ReviewsPK Ebad Ali – Auto Industry Expert Talks About the Success of Kia and Lucky Motor Corporation NorthStack Serverless Architecture – A New Way Of Developing Applications
There are currently no comments.

🙌 You must have something to say here...