{"id":1390,"date":"2017-08-04T11:36:14","date_gmt":"2017-08-04T06:36:14","guid":{"rendered":"https:\/\/thedevcouple.com\/?p=1390"},"modified":"2017-08-04T11:41:26","modified_gmt":"2017-08-04T06:41:26","slug":"resass-opinionated-lib-responsive-mixins-sass","status":"publish","type":"post","link":"https:\/\/thedevcouple.com\/resass-opinionated-lib-responsive-mixins-sass\/","title":{"rendered":"ReSass \u2014 An Opinionated Lib for Responsive Mixins for Sass"},"content":{"rendered":"

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

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.<\/p>\n

I also wrote an introductory article \u2192\u00a0Introducing ReSass<\/a>!<\/p>\n

\ud83d\ude80 GITHUB: \u2605 64 \u2442 5 \u2192<\/a><\/p><\/blockquote>\n\n \n \n
\n ReSass<\/strong>
\n Sass SCSS Responsive Media Queries Mixin for Eight Different Screen Sizes! \ud83d\udcbb\ud83d\udcf1\ud83d\udda5\n <\/td>\n <\/tr>\n
\n A FOSS (Free & Open Source Software) project. Maintained by @AhmadAwais<\/a>.\n <\/td>\n \n \n \"\"\n <\/a>\n <\/td>\n <\/tr>\n<\/table>\n

\u26a1\ufe0f ReSass<\/code><\/h2>\n

\"ReSass\"<\/p>\n

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

USAGE:<\/h4>\n

\"ReSass\"\nCSS content goes inside {} brackets. These mixins should be used inside a class definition. <\/p>\n

 @include r(240)  { }\n @include r(320)  { }\n @include r(480)  { }\n @include r(768)  { }\n @include r(1024) { }\n @include r(1140) { }\n @include r(1280) { }\n @include r(1500) { }<\/code><\/pre>\n
For example:<\/strong>\nThe following CSS will hide the .header on screen width 320px and above.<\/p>\n
\n.header {\n   @include r(320)  { display: none; }\n}<\/code><\/pre>\n
\u26a1\ufe0f Getting Started<\/h2>\n
Getting started is very easy. <\/p>\n
    \n
  1. Download the raw resass.scss<\/code><\/a><\/li>\n
  2. Import the resass.scss<\/code><\/a> in your main .SCSS file \u2192 @import \"path\/to\/resass\";<\/code><\/li>\n
  3. Now use any or all of the mixins inside a class' CSS.<\/li>\n
  4. Here's a fun implementation at CodePen \u2192<\/a><\/li>\n<\/ol>\n
    \u26a1\ufe0f License<\/h2>\n
    MIT licensed. Content is copyright of AhmadAwais.com<\/p>\n
    It’s free and open source. Issues\/PR’s are welcomed on GitHub.\u00a0Let me know what you think about this \ud83d\ude42<\/p>\n
    \ud83d\ude80 GITHUB: \u2605 64 \u2442 5 \u2192<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
    ReSass \u2014 AIt’s a set Responsive Mixins for Sass for 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.<\/p>\n","protected":false},"author":3,"featured_media":1391,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":""},"categories":[1],"tags":[29],"coauthors":[],"jetpack_featured_media_url":"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/08\/ReSass.jpg","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/posts\/1390"}],"collection":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/comments?post=1390"}],"version-history":[{"count":0,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/posts\/1390\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/media\/1391"}],"wp:attachment":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/media?parent=1390"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/categories?post=1390"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/tags?post=1390"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/coauthors?post=1390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}