Picasso margin prototype

by Julien Etienne

HTML

<div id="dev">
  <div class="margin-top"></div>
  <div class="margin-left"></div>
  <div class="content">
    <p>XXXXXXX XXXXXXX XX XXXXxx</p>
     <p>XXXXX XXXXXX XXXXXXXXXxx</p>
      <p>XXXXXX XXXXX XXXX XXXXXxx</p>
       <p>XXXXX XXXXXXX XXXX XXXXxx</p>
  </div>
  <div class="margin-right"></div>
  <div class="margin-bottom"></div>
</div>

CSS

/* Framework */
/* DEVELOPMENT */
#dev .margin-top,
#dev .margin-left,
#dev .margin-right,
#dev .margin-bottom {
  border-radius: 2rem;
}

#dev .margin-top {
  background-color: rgba(46,99,124,0.8);
}
#dev .margin-left {
  background-color: rgba(79,133,174,0.8);
  height: 4rem;
}
#dev .margin-right {
  background-color: rgba(84,175,219,0.8);
  height: 4rem;
}
#dev .margin-bottom {
  background-color: rgba(119,200,231,0.8);
}
/* Margin square color */
#dev .margin-top .sq {
  background-color: rgba(255,100,100,0.8);
}
#dev .margin-left .sq {
  background-color: rgba(255,255,50,0.8);
}
#dev .margin-right .sq {
  background-color: rgba(100,255,100,0.8);
}
#dev .margin-bottom .sq {
  background-color: rgba(100,100,255,0.8);
}

/* Margin Top */
.margin-top {
  width: 100%;
  position: relative;
  float:left;
}
.margin-top .sq
{
  margin: 0 auto;
  width: 2.5%;
  position: relative;
}
.margin-top .sq div
{
  width: 100%;
  padding-bottom: 100%;
}
/* Margin Left */
.margin-left {
  width: 2.5%;
  position: relative;
  float:left;
}
.margin-left .sq
{
  width: 100%;
  position: relative;
  float: left;
}
.margin-left .sq div
{
  width: 100%;
  padding-bottom: 100%;
}
/* Margin Right */
.margin-right {
  width: 2.5%;
  position: relative;
  float:left;
}
.margin-right .sq
{
  width: 100%;
  position: relative;
  float: left;
}
.margin-right .sq div
{
  width: 100%;
  padding-bottom: 100%;
}
/* Margin Bottom */
.margin-bottom {
  width: 100%;
  position: relative;
  float:left;
}
.margin-bottom .sq
{
  width: 2.5%;
  position: relative;
  margin: 0 auto;
}
.margin-bottom .sq div
{
  width: 100%;
  padding-bottom: 100%;
}
/* 
#dev .margin,
#dev .margin-right,
#dev .margin-bottom,
#dev .margin-left
{
  background: rgba(253,231,76,0.8);
}
#dev .margin-top {
    background: rgba(247,174,248,0.8);
} */



.content{
  position: relative;
  float:left;
  background: lime;
  width: 95%;
}

JavaScript

var margin = {};
margin.top = arrayFrom(document.getElementsByClassName('margin-top'));
margin.left = arrayFrom(document.getElementsByClassName('margin-left'));
margin.right = arrayFrom(document.getElementsByClassName('margin-right'));
margin.bottom = arrayFrom(document.getElementsByClassName('margin-bottom'));

function arrayFrom(collection){
return [].slice.call(collection);
}

function preserveMarginTop(marginElement){
	var div = document.createElement('div');
  		div.className = 'sq';
 	var innerDiv = document.createElement('div');
  div.appendChild(innerDiv);
	marginElement.appendChild(div);
}

margin.top.forEach(preserveMarginTop);
margin.left.forEach(preserveMarginTop);
margin.right.forEach(preserveMarginTop);
margin.bottom.forEach(preserveMarginTop);