Rumi UI grids + test

by Felipe Alfaro

HTML

<h1>Simple grids - <a href="#" class="fill">Fill</a></h1>
<div class="rp-grid"><div class="rp-cell-1">rp-cell-1</div></div>
<div class="rp-grid"><div class="rp-cell-2">rp-cell-2</div></div>
<div class="rp-grid"><div class="rp-cell-3">rp-cell-3</div></div>
<div class="rp-grid"><div class="rp-cell-4">rp-cell-4</div></div>
<div class="rp-grid"><div class="rp-cell-5">rp-cell-5</div></div>
<div class="rp-grid"><div class="rp-cell-6">rp-cell-6</div></div>
<div class="rp-grid"><div class="rp-cell-7">rp-cell-7</div></div>
<div class="rp-grid"><div class="rp-cell-8">rp-cell-8</div></div>
<div class="rp-grid"><div class="rp-cell-9">rp-cell-9</div></div>
<div class="rp-grid"><div class="rp-cell-10">rp-cell-10</div></div>
<div class="rp-grid"><div class="rp-cell-11">rp-cell-11</div></div>
<div class="rp-grid"><div class="rp-cell-12">rp-cell-12</div></div>
<h1>Simple grids with 'rp-responsive' class - <a href="#" class="fill">Fill</a></h1>
<div class="rp-grid rp-responsive"><div class="rp-cell-1">rp-cell-1</div></div>
<div class="rp-grid rp-responsive"><div class="rp-cell-2">rp-cell-2</div></div>
<div class="rp-grid rp-responsive"><div class="rp-cell-3">rp-cell-3</div></div>
<div class="rp-grid rp-responsive"><div class="rp-cell-4">rp-cell-4</div></div>
<div class="rp-grid rp-responsive"><div class="rp-cell-5">rp-cell-5</div></div>
<div class="rp-grid rp-responsive"><div class="rp-cell-6">rp-cell-6</div></div>
<div class="rp-grid rp-responsive"><div class="rp-cell-7">rp-cell-7</div></div>
<div class="rp-grid rp-responsive"><div class="rp-cell-8">rp-cell-8</div></div>
<div class="rp-grid rp-responsive"><div class="rp-cell-9">rp-cell-9</div></div>
<div class="rp-grid"><div class="rp-cell-10">rp-cell-10</div></div>
<div class="rp-grid"><div class="rp-cell-11">rp-cell-11</div></div>
<div class="rp-grid"><div class="rp-cell-12">rp-cell-12</div></div>

CSS

body{margin:0;padding:15px;font-size:10px;font-family:helvetica;}
/* GRIDS ----------------------------------------------------------- */
.rp-grid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    justify-content: flex-start;}
[class*="rp-cell-"]{
    background: gainsboro;
    box-sizing: border-box;}
.rp-cell-1{width: 8.33333333%;}
.rp-cell-2{width: 16.66666667%;}
.rp-cell-3{width: 25%;}
.rp-cell-4{width: 33.33333333%;}
.rp-cell-5{width: 41.66666667%;}
.rp-cell-6{width: 50%;}
.rp-cell-7{width: 58.33333333%;}
.rp-cell-8{width: 66.66666667%;}
.rp-cell-9{width: 75%;}
.rp-cell-10{width: 83.33333333%;}
.rp-cell-11{width: 91.66666667%;}
.rp-cell-12{width: 100%;}
@media (max-width: 1200px){

}
@media (max-width: 1024px){}
@media (max-width: 960px){
    .rp-grid.rp-responsive > div{
        min-width: 50%;
    }
}
@media (max-width: 720px){}
@media (max-width: 480px){}
@media (max-width: 360px){}


/* SPACERS ----------------------------------------------------------- */
.rp-padding{padding: 15px;}
.rp-paddingX{padding: 0 15px;}
.rp-paddingY{padding: 15px 0;}
.rp-margin{margin: 15px;}
.rp-marginX{margin: 0 15px;}
.rp-marginY{margin: 15px 0;}

JavaScript

(function(doc){

	var grids = doc.getElementsByClassName('rp-grid'),
    	fillButtons = doc.getElementsByClassName('fill');
        
    
	Array.prototype.forEach.call(fillButtons,function(fillButton){
        fillButton.onclick = function(){
        	if(this.innerText=='Fill'){
            	[].forEach.call(fillButtons,function(b){
                	b.innerText='Unfill';
                });
                for( var index=0; index<grids.length; index++ ){
                    var grid = grids[index],
                        sampleCell = grid.getElementsByTagName('div')[0],
                        constant = Number(sampleCell.className.split('-')[2]),
                        add = 0,
                        max = 12;
                    grid.innerHTML = '';
                    for(var n=constant; n<=max; n+=constant){
                        add += constant;
                        var newCell = doc.createElement('div');
                        newCell.innerHTML = 'rp-cell-'+constant;
                        newCell.className = 'rp-cell-'+constant;
                        grid.appendChild(newCell);
                        if(add<max && (add+constant)>max ){
                            var fixingCell = doc.createElement('div'),
                                fix = String(max-n);
                            fixingCell.innerHTML = 'rp-cell-'+fix;
                            fixingCell.className = 'rp-cell-'+fix;
                            grid.appendChild(fixingCell);
                        }
                    }
                }
            }else{
            	[].forEach.call(fillButtons,function(b){
                	b.innerText='Fill';
                });
                for( var index=0; index<grids.length; index++ ){
                	var grid = grids[index],
                        oneCell = grid.getElementsByTagName('div')[0];
                    grid.innerHTML = '';
                    grid.appendChild(oneCell);
                        
                }
    ...