Custom grid layout

In here I will try to make a custom grid layout just like bootstrap does. The basic thing before you do that is to keep in mind how many grids do you want to break your page into. You can have 4 or 10 or say twelve as bootstrap does. They do have their reasons for keeping a 12 column grid but the truth is many a times you’d be needing a custom grid layout with maybe 5 items in row rather than multiple of 12. So how do u do that. First of all you have to define a class say

.row {
margin: 0 auto 1em auto;
}
.row:after {
display: table;
content: '';
clear:both;
}

As you can see I have made class with a name of “row”. And i have used a pseudo selector “after” on “row” just to ensure that the parent container takes the height of its child. Normally u might have seen that when you make elements to float. either left or right, they float out of parent’s scope. They kind of take a new z-dimension. So the overall height of the parent reduces to 0. To avoid that, I mean i can’t avoid float to change its behaviour. But with using display table on after the parent takes the height of its child as if they were inline elements.

Now as we have covered this portion quite well, we’ll move onto the grid section. Now i am naming the classes just like bootstrap does. I am using “col” class to signify the column and “s3” to signify the width it would take. So you can do your maths and figure out how much width do u need for your column based on this.

.row .col.s3 {
width: 25%;
}

.row .col {
float: left;
padding: 0 0.5em;
box-sizing: border-box;
}

Now the thing is that you can specify any amount of width in percentage depending on your requirement but to keep them in the same line with the padding mentioned for them is tricky. If you have given float left to all the columns it’s fine but as soon as you throw a padding left or right the grid breaks as the box element will start to expand according to the padding u would have given to it. To keep the div to stay as a fix width div what you need to do is change the box-sizing property of the div. Now when i do box-sizing :border-box. The target element is restricted to its fix width regardless of the padding that you give. The padding will be taken inwards.

So that is it. You can place a few hacks to accomplish this. But the box-sizing property was the thing that surprised me. I’ll be back with more.

Stigma of forEach on nodelist

Hey Guys,

Today i would like to share my thoughts on executing forEach function of Javascript on the nodeList. Now many of you might be aware of forEach loop which is another version of “For Loop” particularly for an array with a callback attached to it.

var array = [ini,mini,myni, moh];

array.forEach(function(ele, index) {
  console.log(ele);
});

Above is a simple code that just iterates over the array and console logs’ the element.

Now the problem is that its exclusively for an array. When you try to execute it on the nodeList which we get either by using querySelectorAll or something like getElementsByTagName. Well nodeList is a list of nodes that we get by querying the DOM.

document.querySelectorAll('div')
//It will list all the divs inside the document in the form of a nodelist.

Now the problem is if i do nodelist.forEach in Chrome, it works fine but in firefox it throws me an error saying forEach is not defined. Let’s come to the solution. What we can do is to map the forEach from nodelist to an array by

[].forEach.call(document.querySelectorAll('div'), function(ele, index) {
   console.log(ele.innerHTML);
});

This is one solution. But it has fallbacks. What we can do is define the forEach function for nodelist in our code which will iterate over the elements just like the forEach function.

NodeList.prototype.forEach = function(array, callback)  {
  for (var i=0; i< array.length; i++)  {
    callback.call(array[i], i);
  }
}
document.querySelectorAll('div').forEachfunction(ele, index){});

So this is the whole deal.

Hope you liked it. Happy coding.