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.

Responsive Design challenges for iPhone

I was working on responsive design for mobile website, and there were some issues that I faced, especially in iPhone (safari browser). I have listed them below

1. When i was using input text tags in my html code, I saw that on trying to enter text inside it or you could say on adding focus onto that input tag the web page automatically zoomed in to a particular level, just to make the content readable. It was OK to me until that but the issue it didnt go back to the previous zoom level. This behaviour was in Safari browser in iPhone. Upon looking into it I came to know that whenever the font-size of the input field is below 16px then the safari browser automatically zooms in the input field to make it more readable. So, in my case setting the font-size to 16px broke the rest of the UI for me as I would have to change other font-sizes as well just to match that particular input field. So i chose to use a hack for iphones by setting the meta tag property of user-scalable = “no”, to prevent zooming. This is the JS code that i used

   var isiDevice = function() {
     return /ipad|iphone|ipod/i.test(navigator.userAgent.toLowerCase());
   }
   
   if (isiDevice()) {
     var viewport = document.querySelector("meta[name=viewport]");
     viewport.setAttribute('content', 'width=device-width, initial-scale=1, user-scalable=no');
   }
   

   Of course there are many other ways to accomplish this, one would be to actually follow the convention of setting the font-size of text inputs to 16px.

2. Next thing that i observed was that if the div is scrollable by using the property overflow: scroll in CSS, then the scroll bar was not visible in safari browser. So inorder to display the scroll bar I would suggest to use the code below in your CSS for that div.

   webkit-overflow-scrolling: touch
   

   This again is just a hack. You can read more about this property in this article about momentum scrolling.

3. I was using sessionStorage of browser to store some key value pairs inside it. But the strange thing is that the sessionStorage doesn’t work in private mode of Safari browser. It throws an error when you try to set any keyvalue pair in it. So just a heads up in case you suddenly wonder whats really going on in the background. It maybe because of the private mode in safari.
4. I was implementing hamburger menu for the website. So when the menu was in open state it was observed that if you wanna scroll down in iphone browser you get a unexpected jerk where the page behind the overlay also scrolls upon scroll the hambuger menu. I used a fixed overlay to hide the contents of main page when the menu is open and also used fixed position for the menu in open state that lies above the overlay using z-index.

   .overlay {
     position: fixed;
     top: 0; bottom: 0; right: 0; left: 0;
     background: rgba(0,0,0,0.5);
     z-index: 1;
   }
   
   .hamburger-menu {
     position: fixed;
     overflow: scroll;
     height: 100%;
     width: 75%;
     max-width: 285px;
     z-index: 10;
   }
   
   body{
     position: fixed;
   }
   

   I used position fixed on overlay and made it to cover the entire page to make sure the page isn’t scrollable after this. This worked as a charm in android browser but in iphone browser the page was still scrollable to some extent. So as a hack for it. I added position: fixed on the “body” tag. That solved the issue.

5.  Another problem that you will face is the automatic scroll up of page when the input field is present at the bottom of the page. Also you need to handle the scroll event in a efficient way because of the keypad that pops up whenever you focus on any input text field. So i would suggest you keep the height of your section containing input field around 50px more than usual just as to prevent the hiding of input field when you are trying to type anything. It gives a bad user experience if you cant see what you are typing.

So these were the key points to keep in mind while making your site responsive. Also try keeping the divs height width as relative as possible. Use % for metrics, for making it scalable on all devices. As the responsive design is all about aligning the content vertically so you would often come across a problem where you would want your content to be vertically center aligned. Then try to use display : table, table-row, and table-cell to achieve this, or use display: flex. Read more about flexbox here.

Here is a demo of using display: table for vertically arranging divs. Sometimes you need that your div cover up the remaining height of parent div. Here is how you do it.

 

Thanks for going through the post. Hope you liked it.