Picasso margin prototype

A fluid margin system for the picasso fluid UI framework.

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%;
}
/* Custom app code */

.content{
  position: relative;
  float:left;
  background: lime;
  width: 92.5%;
  word-break: break-all;
}
.margin-top .sq {
  width: 1%;
}
.margin-left {
  width: 5%;
}
.margin-bottom sq{
  width: 7%;
}

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);