Tool for Restructuring HTML to be Responsive


As all of you knows that there are boom of responsive website and everyone looking to restructure their old website to be responsive and compatible to mobile, tablet as well as to desktop devices. I found such a nice lightweight library – intention.js. For Responsive Design, you might like to add intention.js to your collection.

intention.js – offers a light-weight and clear way to dynamically restructure HTML in a responsive manner. With intention.js you can easily increase layout options and flexibility, reduce development time and lessen dependence on media-query-driven stylesheet overrides.

CSS Box Model


How the CSS box model works has been explained by others many times already. If you already know how the different box models work and how to handle Internet Explorer, there is nothing new for you here. I’m just explaining these as one more reason that why I hate IE.

The CSS box model diagram
Here is a simple diagram showing how the dimensions of an element are related in CSS:

The W3C Box model
First a look at the the W3C box model, which is used by all standards compliant browsers and by Internet Explorer 6 and later if the circumstances are right. In the W3C CSS box model a block level element’s total width is calculated using the following formula:

total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

The IE Box model
The IE Box model is similar except for one important difference: paddings and borders are not included in the calculation:

total width = margin-left + width + margin-right

This means that if the element also has horizontal padding and/or borders, the actual content area will shrink to make room for them.

1. Avoid situations that cause problems – You can simply avoid specifying both width and padding or border for the same element.

2. Insert extra markup – The outer element (div) controls the width, and the inner element (div) contains the border and padding.

3. Use conditional CSS – We can simply put condition like:

<!--[if lt IE 6]>
<style type="text/css">
#content {width:250px}

LESS – Dynamic Stylesheet Language

LESS is a dynamic stylesheet language meant to extend CSS with thing like variables, mixins, operations and functions. Please click here to find out more about LESS.

Why not Plain CSS?

I don’t know which one is better LESS or the plain CSS. However, for now LESS is really comes down to customization and reuse of the code. But the question is raise in my mind that with the LESS, browser need to interpret and compile the LESS CSS class every times and which may decrease web page performance. So why LESS??

Please let me know your suggestion in comment and correct me if I misunderstood about LESS. It’s really confuse me that what to choose LESS CSS or normal plain CSS.