demoNahual.html

<div id="collaborateSec" data-all="h-100 w-100">
   <div id="filterSec" data-all="bt-0 w-100 h-100 ps-a" data-xssm="hdn">
      <div id="filterBtns" data-all="h-50-px" data-xssm="hdn w-100 ps-a bt-0" data-mdlgxl="w-50 ps-a tp-50-px">
         <div id="filterLabel" data-all="d-in" data-xssmmd="hdn" data-lgxl="w-30" data>Filtra proyectos por: </div>
         <div id="catsBtn" data-all="d-in" data-md="w-25" data-lgxl="w-20">
            <a href="#">Categorías</a>
         </div>
         <div id="howBtn" data-all="d-in" data-md="w-25" data-lgxl="w-20">
            <a href="">¿Cómo colaborar?</a>
         </div>
         <div id="typeBtn" data-all="d-in" data-md="w-25" data-lgxl="w-20">
            <a href="">Tipos</a>
         </div>
      </div>
      <div id="wordSearch" data-all="h-50-px" data-xssm="hdn w-100 ps-a" data-mdlgxl="w-40 ps-a tp-50-px rg-0-px">
         <div id="btnCloseFilterSec" data-mdlgxl="hdn"><i class="fa fa-close"></i></div>
         <input type="text" id="inputSearch">
         <a id="btnSearch" href="#"><i class="fa fa-search"></i></a>
      </div>
      <div id="filters" data-all="tp-100-px ps-a" data-xssm="hdn w-100 bt-50-px" data-md="hdn w-50 bt-0-px tp-100-px lf-25" data-lgxl="w-20 bt-0-px">
         <div id="categoriesFilter">
            <div data-all="category" ><i class="fa"></i><span class="catLabel"></span></div>
            <div data-all="category"><i class="fa"></i><span class="catLabel"></span></div>
            <div data-all="category"><i class="fa"></i><span class="catLabel"></span></div>
            <div data-all="category"><i class="fa"></i><span class="catLabel"></span></div>
            <div data-all="category"><i class="fa"></i><span class="catLabel"></span></div>
         </div>
         <div id="howToCollaborateFilter">¿Cómo colaborar?</div>
         <div id="typesFilter">Tipos</div>
      </div>
   </div>
   <div id="listSec" data-all="ps-a bt-0-px" data-xssm="w-100 tp-50-px" data-md="w-50 tp-100-px" data-lgxl="w-40 lf-20 tp-100-px"></div>
   <div id="mapSec" data-all="ps-a bt-0-px" data-xssm="hdn w-100 pd-t-50-px" data-md="w-50 tp-100-px rg-0-px" data-lgxl="w-40 rg-0-px tp-100-px"></div>
   <div id="btnsSec" data-mdlgxl="hdn" data-xssm="w-50 h-40-px ps-a bt-50-px lf-25">
      <div id="mapBtn">MAPA<i class="fa fa-mar"></i></div>
      <div id="filterBtn">MAPA<i class="fa fa-mar"></i></div>
   </div>
</div>

nahual.css

/* display */
.d-in { display: inline-block;}
.d-b { display: block;}
.d-n { display: none;}
.hdn { display: none;}

/* position */
.ps-a { position: absolute;}
.ps-r { position: relative;}
.ps-f { position: fixed;}

/* float */

.f-r { float: right;}

/* heigth */

.h-100 { height: 100%;}
.h-90 { height: 90%;}
.h-80 { height: 80%;}
.h-70 { height: 70%;}
.h-60 { height: 60%;}
.h-50 { height: 50%;}
.h-40 { height: 40%;}
.h-30 { height: 30%;}
.h-20 { height: 20%;}
.h-10 { height: 10%;}
.h-0 { height: 0%;}
.h-25 { height: 25%;}
.h-75 { height: 75%;}

.h-100-px { height: 100px;}
.h-90-px { height: 90px;}
.h-80-px { height: 80px;}
.h-70-px { height: 70px;}
.h-60-px { height: 60px;}
.h-50-px { height: 50px;}
.h-40-px { height: 40px;}
.h-30-px { height: 30px;}
.h-20-px { height: 20px;}
.h-10-px { height: 10px;}
.h-0-px { height: 0px;}
.h-25-px { height: 25px;}
.h-75-px { height: 75px;}

.h-100-vh { height: 100vh;}
.h-90-vh { height: 90vh;}
.h-80-vh { height: 80vh;}
.h-70-vh { height: 70vh;}
.h-60-vh { height: 60vh;}
.h-50-vh { height: 50vh;}
.h-40-vh { height: 40vh;}
.h-30-vh { height: 30vh;}
.h-20-vh { height: 20vh;}
.h-10-vh { height: 10vh;}
.h-0-vh { height: 0vh;}
.h-25-vh { height: 25vh;}
.h-75-vh { height: 75vh;}


/* width */
.w-100 { width: 100%;}
.w-90 { width: 90%;}
.w-80 { width: 80%;}
.w-70 { width: 70%;}
.w-60 { width: 60%;}
.w-50 { width: 50%;}
.w-40 { width: 40%;}
.w-30 { width: 30%;}
.w-20 { width: 20%;}
.w-10 { width: 10%;}
.w-0 { width: 0%;}
.w-25 { width: 25%;}
.w-75 { width: 75%;}

.w-100-px { width: 100px;}
.w-90-px { width: 90px;}
.w-80-px { width: 80px;}
.w-70-px { width: 70px;}
.w-60-px { width: 60px;}
.w-50-px { width: 50px;}
.w-40-px { width: 40px;}
.w-30-px { width: 30px;}
.w-20-px { width: 20px;}
.w-10-px { width: 10px;}
.w-0-px { width: 0px;}
.w-25-px { width: 25px;}
.w-75-px { width: 75px;}

.w-100-vw { width: 100vw;}
.w-90-vw { width: 90vw;}
.w-80-vw { width: 80vw;}
.w-70-vw { width: 70vw;}
.w-60-vw { width: 60vw;}
.w-50-vw { width: 50vw;}
.w-40-vw { width: 40vw;}
.w-30-vw { width: 30vw;}
.w-20-vw { width: 20vw;}
.w-10-vw { width: 10vw;}
.w-0-vw { width: 0vw;}
.w-25-vw { width: 25vw;}
.w-75-vw { width: 75vw;}

/* margin */

.m-100 { margin: 100%;}
.m-90 { margin: 90%;}
.m-80 { margin: 80%;}
.m-70 { margin: 70%;}
.m-60 { margin: 60%;}
.m-50 { margin: 50%;}
.m-40 { margin: 40%;}
.m-30 { margin: 30%;}
.m-20 { margin: 20%;}
.m-10 { margin: 10%;}
.m-0 { margin: 0%;}
.m-25 { margin: 25%;}
.m-75 { margin: 75%;}

.m-100-px { margin: 100px;}
.m-90-px { margin: 90px;}
.m-80-px { margin: 80px;}
.m-70-px { margin: 70px;}
.m-60-px { margin: 60px;}
.m-50-px { margin: 50px;}
.m-40-px { margin: 40px;}
.m-30-px { margin: 30px;}
.m-20-px { margin: 20px;}
.m-10-px { margin: 10px;}
.m-0-px { margin: 0px;}
.m-25-px { margin: 25px;}
.m-75-px { margin: 75px;}

.m-t-100 { margin-top: 100%;}
.m-t-90 { margin-top: 90%;}
.m-t-80 { margin-top: 80%;}
.m-t-70 { margin-top: 70%;}
.m-t-60 { margin-top: 60%;}
.m-t-50 { margin-top: 50%;}
.m-t-40 { margin-top: 40%;}
.m-t-30 { margin-top: 30%;}
.m-t-20 { margin-top: 20%;}
.m-t-10 { margin-top: 10%;}
.m-t-0 { margin-top: 0%;}
.m-t-25 { margin-top: 25%;}
.m-t-75 { margin-top: 75%;}

.m-t-100-px { margin-top: 100px;}
.m-t-90-px { margin-top: 90px;}
.m-t-80-px { margin-top: 80px;}
.m-t-70-px { margin-top: 70px;}
.m-t-60-px { margin-top: 60px;}
.m-t-50-px { margin-top: 50px;}
.m-t-40-px { margin-top: 40px;}
.m-t-30-px { margin-top: 30px;}
.m-t-20-px { margin-top: 20px;}
.m-t-10-px { margin-top: 10px;}
.m-t-0-px { margin-top: 0px;}
.m-t-25-px { margin-top: 25px;}
.m-t-75-px { margin-top: 75px;}

.m-r-100 { margin-right: 100%;}
.m-r-90 { margin-right: 90%;}
.m-r-80 { margin-right: 80%;}
.m-r-70 { margin-right: 70%;}
.m-r-60 { margin-right: 60%;}
.m-r-50 { margin-right: 50%;}
.m-r-40 { margin-right: 40%;}
.m-r-30 { margin-right: 30%;}
.m-r-20 { margin-right: 20%;}
.m-r-10 { margin-right: 10%;}
.m-r-0 { margin-right: 0%;}
.m-r-25 { margin-right: 25%;}
.m-r-75 { margin-right: 75%;}

.m-r-100-px { margin-right: 100px;}
.m-r-90-px { margin-right: 90px;}
.m-r-80-px { margin-right: 80px;}
.m-r-70-px { margin-right: 70px;}
.m-r-60-px { margin-right: 60px;}
.m-r-50-px { margin-right: 50px;}
.m-r-40-px { margin-right: 40px;}
.m-r-30-px { margin-right: 30px;}
.m-r-20-px { margin-right: 20px;}
.m-r-10-px { margin-right: 10px;}
.m-r-0-px { margin-right: 0px;}
.m-r-25-px { margin-right: 25px;}
.m-r-75-px { margin-right: 75px;}

.m-b-100 { margin-bottom: 100%;}
.m-b-90 { margin-bottom: 90%;}
.m-b-80 { margin-bottom: 80%;}
.m-b-70 { margin-bottom: 70%;}
.m-b-60 { margin-bottom: 60%;}
.m-b-50 { margin-bottom: 50%;}
.m-b-40 { margin-bottom: 40%;}
.m-b-30 { margin-bottom: 30%;}
.m-b-20 { margin-bottom: 20%;}
.m-b-10 { margin-bottom: 10%;}
.m-b-0 { margin-bottom: 0%;}
.m-b-25 { margin-bottom: 25%;}
.m-b-75 { margin-bottom: 75%;}

.m-b-100-px { margin-bottom: 100px;}
.m-b-90-px { margin-bottom: 90px;}
.m-b-80-px { margin-bottom: 80px;}
.m-b-70-px { margin-bottom: 70px;}
.m-b-60-px { margin-bottom: 60px;}
.m-b-50-px { margin-bottom: 50px;}
.m-b-40-px { margin-bottom: 40px;}
.m-b-30-px { margin-bottom: 30px;}
.m-b-20-px { margin-bottom: 20px;}
.m-b-10-px { margin-bottom: 10px;}
.m-b-0-px { margin-bottom: 0px;}
.m-b-25-px { margin-bottom: 25px;}
.m-b-75-px { margin-bottom: 75px;}

.m-l-100 { margin-left: 100%;}
.m-l-90 { margin-left: 90%;}
.m-l-80 { margin-left: 80%;}
.m-l-70 { margin-left: 70%;}
.m-l-60 { margin-left: 60%;}
.m-l-50 { margin-left: 50%;}
.m-l-40 { margin-left: 40%;}
.m-l-30 { margin-left: 30%;}
.m-l-20 { margin-left: 20%;}
.m-l-10 { margin-left: 10%;}
.m-l-0 { margin-left: 0%;}
.m-l-25 { margin-left: 25%;}
.m-l-75 { margin-left: 75%;}

.m-l-100-px { margin-left: 100px;}
.m-l-90-px { margin-left: 90px;}
.m-l-80-px { margin-left: 80px;}
.m-l-70-px { margin-left: 70px;}
.m-l-60-px { margin-left: 60px;}
.m-l-50-px { margin-left: 50px;}
.m-l-40-px { margin-left: 40px;}
.m-l-30-px { margin-left: 30px;}
.m-l-20-px { margin-left: 20px;}
.m-l-10-px { margin-left: 10px;}
.m-l-0-px { margin-left: 0px;}
.m-l-25-px { margin-left: 25px;}
.m-l-75-px { margin-left: 75px;}

/* padding */

.pd-100 { padding: 100%;}
.pd-90 { padding: 90%;}
.pd-80 { padding: 80%;}
.pd-70 { padding: 70%;}
.pd-60 { padding: 60%;}
.pd-50 { padding: 50%;}
.pd-40 { padding: 40%;}
.pd-30 { padding: 30%;}
.pd-20 { padding: 20%;}
.pd-10 { padding: 10%;}
.pd-0 { padding: 0%;}
.pd-25 { padding: 25%;}
.pd-75 { padding: 75%;}

.pd-100-px { padding: 100px;}
.pd-90-px { padding: 90px;}
.pd-80-px { padding: 80px;}
.pd-70-px { padding: 70px;}
.pd-60-px { padding: 60px;}
.pd-50-px { padding: 50px;}
.pd-40-px { padding: 40px;}
.pd-30-px { padding: 30px;}
.pd-20-px { padding: 20px;}
.pd-10-px { padding: 10px;}
.pd-0-px { padding: 0px;}
.pd-25-px { padding: 25px;}
.pd-75-px { padding: 75px;}

.pd-t-100 { padding-top: 100%;}
.pd-t-90 { padding-top: 90%;}
.pd-t-80 { padding-top: 80%;}
.pd-t-70 { padding-top: 70%;}
.pd-t-60 { padding-top: 60%;}
.pd-t-50 { padding-top: 50%;}
.pd-t-40 { padding-top: 40%;}
.pd-t-30 { padding-top: 30%;}
.pd-t-20 { padding-top: 20%;}
.pd-t-10 { padding-top: 10%;}
.pd-t-0 { padding-top: 0%;}
.pd-t-25 { padding-top: 25%;}
.pd-t-75 { padding-top: 75%;}

.pd-t-100-px { padding-top: 100px;}
.pd-t-90-px { padding-top: 90px;}
.pd-t-80-px { padding-top: 80px;}
.pd-t-70-px { padding-top: 70px;}
.pd-t-60-px { padding-top: 60px;}
.pd-t-50-px { padding-top: 50px;}
.pd-t-40-px { padding-top: 40px;}
.pd-t-30-px { padding-top: 30px;}
.pd-t-20-px { padding-top: 20px;}
.pd-t-10-px { padding-top: 10px;}
.pd-t-0-px { padding-top: 0px;}
.pd-t-25-px { padding-top: 25px;}
.pd-t-75-px { padding-top: 75px;}

.pd-r-100 { padding-right: 100%;}
.pd-r-90 { padding-right: 90%;}
.pd-r-80 { padding-right: 80%;}
.pd-r-70 { padding-right: 70%;}
.pd-r-60 { padding-right: 60%;}
.pd-r-50 { padding-right: 50%;}
.pd-r-40 { padding-right: 40%;}
.pd-r-30 { padding-right: 30%;}
.pd-r-20 { padding-right: 20%;}
.pd-r-10 { padding-right: 10%;}
.pd-r-0 { padding-right: 0%;}
.pd-r-25 { padding-right: 25%;}
.pd-r-75 { padding-right: 75%;}

.pd-r-100-px { padding-right: 100px;}
.pd-r-90-px { padding-right: 90px;}
.pd-r-80-px { padding-right: 80px;}
.pd-r-70-px { padding-right: 70px;}
.pd-r-60-px { padding-right: 60px;}
.pd-r-50-px { padding-right: 50px;}
.pd-r-40-px { padding-right: 40px;}
.pd-r-30-px { padding-right: 30px;}
.pd-r-20-px { padding-right: 20px;}
.pd-r-10-px { padding-right: 10px;}
.pd-r-0-px { padding-right: 0px;}
.pd-r-25-px { padding-right: 25px;}
.pd-r-75-px { padding-right: 75px;}

.pd-b-100 { padding-bottom: 100%;}
.pd-b-90 { padding-bottom: 90%;}
.pd-b-80 { padding-bottom: 80%;}
.pd-b-70 { padding-bottom: 70%;}
.pd-b-60 { padding-bottom: 60%;}
.pd-b-50 { padding-bottom: 50%;}
.pd-b-40 { padding-bottom: 40%;}
.pd-b-30 { padding-bottom: 30%;}
.pd-b-20 { padding-bottom: 20%;}
.pd-b-10 { padding-bottom: 10%;}
.pd-b-0 { padding-bottom: 0%;}
.pd-b-25 { padding-bottom: 25%;}
.pd-b-75 { padding-bottom: 75%;}

.pd-b-100-px { padding-bottom: 100px;}
.pd-b-90-px { padding-bottom: 90px;}
.pd-b-80-px { padding-bottom: 80px;}
.pd-b-70-px { padding-bottom: 70px;}
.pd-b-60-px { padding-bottom: 60px;}
.pd-b-50-px { padding-bottom: 50px;}
.pd-b-40-px { padding-bottom: 40px;}
.pd-b-30-px { padding-bottom: 30px;}
.pd-b-20-px { padding-bottom: 20px;}
.pd-b-10-px { padding-bottom: 10px;}
.pd-b-0-px { padding-bottom: 0px;}
.pd-b-25-px { padding-bottom: 25px;}
.pd-b-75-px { padding-bottom: 75px;}

.pd-l-100 { padding-left: 100%;}
.pd-l-90 { padding-left: 90%;}
.pd-l-80 { padding-left: 80%;}
.pd-l-70 { padding-left: 70%;}
.pd-l-60 { padding-left: 60%;}
.pd-l-50 { padding-left: 50%;}
.pd-l-40 { padding-left: 40%;}
.pd-l-30 { padding-left: 30%;}
.pd-l-20 { padding-left: 20%;}
.pd-l-10 { padding-left: 10%;}
.pd-l-0 { padding-left: 0%;}
.pd-l-25 { padding-left: 25%;}
.pd-l-75 { padding-left: 75%;}

.pd-l-100-px { padding-left: 100px;}
.pd-l-90-px { padding-left: 90px;}
.pd-l-80-px { padding-left: 80px;}
.pd-l-70-px { padding-left: 70px;}
.pd-l-60-px { padding-left: 60px;}
.pd-l-50-px { padding-left: 50px;}
.pd-l-40-px { padding-left: 40px;}
.pd-l-30-px { padding-left: 30px;}
.pd-l-20-px { padding-left: 20px;}
.pd-l-10-px { padding-left: 10px;}
.pd-l-0-px { padding-left: 0px;}
.pd-l-25-px { padding-left: 25px;}
.pd-l-75-px { padding-left: 75px;}

/* top */
.tp-100 { top: 100%;}
.tp-90 { top: 90%;}
.tp-80 { top: 80%;}
.tp-70 { top: 70%;}
.tp-60 { top: 60%;}
.tp-50 { top: 50%;}
.tp-40 { top: 40%;}
.tp-30 { top: 30%;}
.tp-20 { top: 20%;}
.tp-10 { top: 10%;}
.tp-0 { top: 0%;}
.tp-25 { top: 25%;}
.tp-75 { top: 75%;}

.tp-100-px { top: 100px;}
.tp-90-px { top: 90px;}
.tp-80-px { top: 80px;}
.tp-70-px { top: 70px;}
.tp-60-px { top: 60px;}
.tp-50-px { top: 50px;}
.tp-40-px { top: 40px;}
.tp-30-px { top: 30px;}
.tp-20-px { top: 20px;}
.tp-10-px { top: 10px;}
.tp-0-px { top: 0px;}
.tp-25-px { top: 25px;}
.tp-75-px { top: 75px;}


/* right */

.rg-100 { right: 100%;}
.rg-90 { right: 90%;}
.rg-80 { right: 80%;}
.rg-70 { right: 70%;}
.rg-60 { right: 60%;}
.rg-50 { right: 50%;}
.rg-40 { right: 40%;}
.rg-30 { right: 30%;}
.rg-20 { right: 20%;}
.rg-10 { right: 10%;}
.rg-0 { right: 0%;}
.rg-25 { right: 25%;}
.rg-75 { right: 75%;}

.rg-100-px { right: 100px;}
.rg-90-px { right: 90px;}
.rg-80-px { right: 80px;}
.rg-70-px { right: 70px;}
.rg-60-px { right: 60px;}
.rg-50-px { right: 50px;}
.rg-40-px { right: 40px;}
.rg-30-px { right: 30px;}
.rg-20-px { right: 20px;}
.rg-10-px { right: 10px;}
.rg-0-px { right: 0px;}
.rg-25-px { right: 25px;}
.rg-75-px { right: 75px;}

/* bottom */

.bt-100 { bottom: 100%;}
.bt-90 { bottom: 90%;}
.bt-80 { bottom: 80%;}
.bt-70 { bottom: 70%;}
.bt-60 { bottom: 60%;}
.bt-50 { bottom: 50%;}
.bt-40 { bottom: 40%;}
.bt-30 { bottom: 30%;}
.bt-20 { bottom: 20%;}
.bt-10 { bottom: 10%;}
.bt-0 { bottom: 0%;}
.bt-25 { bottom: 25%;}
.bt-75 { bottom: 75%;}

.bt-100-px { bottom: 100px;}
.bt-90-px { bottom: 90px;}
.bt-80-px { bottom: 80px;}
.bt-70-px { bottom: 70px;}
.bt-60-px { bottom: 60px;}
.bt-50-px { bottom: 50px;}
.bt-40-px { bottom: 40px;}
.bt-30-px { bottom: 30px;}
.bt-20-px { bottom: 20px;}
.bt-10-px { bottom: 10px;}
.bt-0-px { bottom: 0px;}
.bt-25-px { bottom: 25px;}
.bt-75-px { bottom: 75px;}

/* left */
.lf-100 { left: 100%;}
.lf-90 { left: 90%;}
.lf-80 { left: 80%;}
.lf-70 { left: 70%;}
.lf-60 { left: 60%;}
.lf-50 { left: 50%;}
.lf-40 { left: 40%;}
.lf-30 { left: 30%;}
.lf-20 { left: 20%;}
.lf-10 { left: 10%;}
.lf-0 { left: 0%;}
.lf-25 { left: 25%;}
.lf-75 { left: 75%;}

.lf-100-px { left: 100px;}
.lf-90-px { left: 90px;}
.lf-80-px { left: 80px;}
.lf-70-px { left: 70px;}
.lf-60-px { left: 60px;}
.lf-50-px { left: 50px;}
.lf-40-px { left: 40px;}
.lf-30-px { left: 30px;}
.lf-20-px { left: 20px;}
.lf-10-px { left: 10px;}
.lf-0-px { left: 0px;}
.lf-25-px { left: 25px;}
.lf-75-px { left: 75px;}

nahual.js

var resizeTimeOut
$(window).resize(function(){
   clearTimeout(resizeTimeOut);
   resizeTimeOut = setTimeout(setSizeClasses, 200);
})

$(document).ready(function(){
   setSizeClasses()
})

function setSizeClasses(){
   var size = getScreenSize()
   console.log('sizing: ' + size);
   $('*').each(function(){
      var sizeClasses = _.pick($(this).data(),function(v,k){
         return (k.indexOf(size) > -1 || k == 'all')
      })
      $(this).removeClass()
      if(!_.isEmpty(sizeClasses))
         $(this).addClass(_.map(sizeClasses).join(' '))
   })
}

function getScreenSize(){
   var w = $(window).width()
   console.log(w)
   if(w < 544) return 'xs'
   else if(w > 544 && w < 768) return 'sm'
   else if(w > 768 && w < 992) return 'md'
   else if(w > 992 && w < 1200) return 'lg'
   else if(w > 1200 ) return 'xl'
}