diff --git a/website/templates/html/blog_footer.html b/website/templates/html/blog_footer.html
index e439d14..ecb463c 100644
--- a/website/templates/html/blog_footer.html
+++ b/website/templates/html/blog_footer.html
@@ -1,4 +1,4 @@
-<div class="span12">
+<div class="col-span-12">
 	<hr />
 	{% if categories %}
 	<h5>Explore posts by categories</h5>
diff --git a/website/templates/html/blog_page.html b/website/templates/html/blog_page.html
index cf1f00e..0cabe6d 100644
--- a/website/templates/html/blog_page.html
+++ b/website/templates/html/blog_page.html
@@ -9,7 +9,7 @@
 {% endblock %}
 
 {% block content %}
-<div class="span12" itemscope itemtype="http://schema.org/BlogPost">
+<div class="col-span-12" itemscope itemtype="http://schema.org/BlogPost">
 	<h2 itemprop="name headline">{{ title }}</h2>
 
 	<!-- begin blog content -->
diff --git a/website/templates/html/blogger.html b/website/templates/html/blogger.html
index e18f86a..878caad 100644
--- a/website/templates/html/blogger.html
+++ b/website/templates/html/blogger.html
@@ -1,10 +1,10 @@
 <div class="row">
-	<div class="span2">
+	<div class="col-span-2">
 		<div class="avatar avatar-large">
 			<img itemprop="thumbnailUrl" src="{{ blogger_info.avatar }}" />
 		</div>
 	</div>
-	<div class="span10">
+	<div class="col-span-10">
 		<h4>{{ blogger_info.full_name }}</h4>
 		<p style="color: #999">{{ blogger_info.bio }}</p>
 		<p><a href="blog?by={{ blogger_info.name }}&by_name={{ blogger_info.full_name }}">
diff --git a/website/templates/html/footer.html b/website/templates/html/footer.html
index 2f1c7fe..7260fa5 100644
--- a/website/templates/html/footer.html
+++ b/website/templates/html/footer.html
@@ -38,7 +38,7 @@
 	{{ address }}
 	{% endif %}
 	<p><div class="input-append" style="text-align: center; margin:30px 0px;">
-	  <input class="span3" id="footer-subscribe-email" type="text" placeholder="Your email address...">
+	  <input class="col-span-3" id="footer-subscribe-email" type="text" placeholder="Your email address...">
 	  <button class="btn" type="button" id="footer-subscribe-button">Stay Updated</button>
 	</div></p>
 	<script>
diff --git a/website/templates/html/outer.html b/website/templates/html/outer.html
index 570c769..1eaa2ab 100644
--- a/website/templates/html/outer.html
+++ b/website/templates/html/outer.html
@@ -7,7 +7,7 @@
 		</div>
 		<div class="clearfix"></div>
 		{% if banner_html %}<div class="row" style="margin-top: 30px;">
-			<div class="span12">{{ banner_html }}</div>
+			<div class="col-span-12">{{ banner_html }}</div>
 		</div>{% endif %}
 		<div class="outer">
 			{% include "app/website/templates/html/navbar.html" %}
diff --git a/website/templates/html/product_breadcrumbs.html b/website/templates/html/product_breadcrumbs.html
index 0b026e7..f3661ce 100644
--- a/website/templates/html/product_breadcrumbs.html
+++ b/website/templates/html/product_breadcrumbs.html
@@ -1,5 +1,5 @@
 {% if obj.parent_groups and len(obj.parent_groups) > 1 %}
-<div class="span12">
+<div class="col-span-12">
 	<div class="clearfix">
 		<ul class="breadcrumb">
 			{% for ig in obj.parent_groups[:-1] %}
diff --git a/website/templates/html/product_group.html b/website/templates/html/product_group.html
index b3c8511..23ecbc8 100644
--- a/website/templates/html/product_group.html
+++ b/website/templates/html/product_group.html
@@ -3,7 +3,7 @@
 {% block content %}
 {% include 'app/website/templates/html/product_search_box.html' %}
 {% include 'app/website/templates/html/product_breadcrumbs.html' %}
-<div class="span12">
+<div class="col-span-12">
 	{% if slideshow %}<!-- slideshow -->
 	{% include "app/website/templates/html/slideshow.html" %}
 	{% endif %}
@@ -16,7 +16,7 @@
 	<hr />
 	<div class="row">
 	{% for d in sub_groups %}
-		<div class="span4">
+		<div class="col-span-4">
 			<a href="{{ d.page_name }}">{{ d.name }} ({{ d.count }})</a>
 		</div>
 	{% endfor %}
diff --git a/website/templates/html/product_in_list.html b/website/templates/html/product_in_list.html
index 5cd9eac..7a47006 100644
--- a/website/templates/html/product_in_list.html
+++ b/website/templates/html/product_in_list.html
@@ -1,4 +1,4 @@
-<div class="span3">
+<div class="col-span-3">
 	<div style="height: 120px; overflow: hidden;">
 		<a href="{{ page_name }}">
 		{%- if website_image -%}
diff --git a/website/templates/html/product_page.html b/website/templates/html/product_page.html
index 23091ad..9353ce8 100644
--- a/website/templates/html/product_page.html
+++ b/website/templates/html/product_page.html
@@ -11,9 +11,9 @@
 {% block content %}
 	{% include 'app/website/templates/html/product_search_box.html' %}
 	{% include 'app/website/templates/html/product_breadcrumbs.html' %}
-	<div class="span12 product-page-content" itemscope itemtype="http://schema.org/Product">
+	<div class="col-span-12 product-page-content" itemscope itemtype="http://schema.org/Product">
 		<div class="row">
-			<div class="span6">
+			<div class="col-span-6">
 				{% if slideshow %}
 					{% include "app/website/templates/html/slideshow.html" %}
 				{% else %}
@@ -27,7 +27,7 @@
 					{% endif %}
 				{% endif %}
 			</div>
-			<div class="span6">
+			<div class="col-span-6">
 				<h3 itemprop="name" style="margin-top: 0px;">{{ item_name }}</h3>
 				<p class="help">Item Code: {{ name }}</p>
 				<h4>Product Description</h4>
diff --git a/website/templates/html/product_search_box.html b/website/templates/html/product_search_box.html
index 3b3a95a..db1b1d0 100644
--- a/website/templates/html/product_search_box.html
+++ b/website/templates/html/product_search_box.html
@@ -1,8 +1,8 @@
-<div class="span12 clearfix">
+<div class="col-span-12 clearfix">
 	<div class="pull-right" style="margin-top: 15px;">
 		<form class="form-search">
 			<div class="input-append">
-				<input type="text" class="span2 search-query" 
+				<input type="text" class="col-span-2 search-query" 
 					id="product-search" placeholder="Product Search..." />
 				<button class="btn" id="btn-product-search">
 					<i class="icon-search"></i></button>
diff --git a/website/templates/html/web_page.html b/website/templates/html/web_page.html
index 6b8c914..884e7cb 100644
--- a/website/templates/html/web_page.html
+++ b/website/templates/html/web_page.html
@@ -7,7 +7,7 @@
 {% endblock %}
 
 {% block content %}
-<div class="span12" style="margin-top: 15px;">
+<div class="col-span-12" style="margin-top: 15px;">
 	{% include "app/website/templates/html/slideshow.html" %}
 	{{ main_section }}
 </div>
diff --git a/website/templates/js/blog.js b/website/templates/js/blog.js
index fd5a156..053eae0 100644
--- a/website/templates/js/blog.js
+++ b/website/templates/js/blog.js
@@ -69,12 +69,12 @@
 			b.page_name = encodeURIComponent(b.page_name);
 			
 			$(repl('<div class="row">\
-					<div class="span1">\
+					<div class="col-span-1">\
 						<div class="avatar avatar-medium" style="margin-top: 6px;">\
 							<img src="%(avatar)s" />\
 						</div>\
 					</div>\
-					<div class="span11">\
+					<div class="col-span-11">\
 						<h4><a href="%(page_name)s">%(title)s</a></h4>\
 						<p>%(content)s</p>\
 						<p style="color: #aaa; font-size: 90%">\
diff --git a/website/templates/pages/about.html b/website/templates/pages/about.html
index 0cbd562..71ffd33 100644
--- a/website/templates/pages/about.html
+++ b/website/templates/pages/about.html
@@ -3,14 +3,14 @@
 {% set title="About Us" %}
 
 {% block content %}
-<div class="span12">
+<div class="col-span-12">
 	{{ obj.doc.company_introduction or "<h2>About Us</h2><p>Some Introduction about your company that you would like your website visitor to know. More people than you think will read your About page. People always like to know who the are doing business with. Be authentic and avoid using jargon like 'value added services' etc. Be sure to update your company history and list of key team members in Website > About Us Settings</p>" }}
 	{% if obj.doclist.get({"doctype":"Company History"}) %}
 	<h3>{{ obj.doc.company_history_heading or "Company History" }}</h3>
 	{% for d in obj.doclist.get({"doctype":"Company History"}) %}
 	<div class="row">
-		<span class="span2"><h4 style="margin:0px;">{{ d.year }}</h4></span>
-		<span class="span10"><p>{{ d.highlight }}</p></span>
+		<span class="col-span-2"><h4 style="margin:0px;">{{ d.year }}</h4></span>
+		<span class="col-span-10"><p>{{ d.highlight }}</p></span>
 	</div>
 	{% endfor %}
 	{% endif %}
@@ -18,12 +18,12 @@
 	<h3>{{ obj.doc.team_members_heading or "Team Members" }}</h3>
 	{% for d in obj.doclist.get({"doctype":"About Us Team Member"}) %}
 	<div class="row" itemscope itemtype="http://schema.org/Person">
-		<span class="span2">
+		<span class="col-span-2">
 			<div class="avatar avatar-large">
 				<img class="avatar" src="{{ d.image_link }}" style="" itemprop="image">
 			</div>
 		</span>
-		<span class="span10"><h4 itemprop="name">{{ d.full_name }}</h4>
+		<span class="col-span-10"><h4 itemprop="name">{{ d.full_name }}</h4>
 			<p itemprop="description">{{ d.bio }}</p>
 		</span>
 	</div>
diff --git a/website/templates/pages/account.html b/website/templates/pages/account.html
index fe2b858..b9f2f4a 100644
--- a/website/templates/pages/account.html
+++ b/website/templates/pages/account.html
@@ -3,7 +3,7 @@
 {% set title="My Account" %}
 
 {% block content %}
-<div class="span12">
+<div class="col-span-12">
     <ul class="breadcrumb">
     	<li><a href="index">Home</a> <span class="divider">/</span></li>
     	<li class="active">My Account</li>
diff --git a/website/templates/pages/attributions.html b/website/templates/pages/attributions.html
index 05e8e88..d07cf52 100644
--- a/website/templates/pages/attributions.html
+++ b/website/templates/pages/attributions.html
@@ -11,7 +11,7 @@
 {% set title="ERPNext - Web Based, Open Source ERP" %}
 
 {% block content %}
-<div class="layout-attributions span12">
+<div class="layout-attributions col-span-12">
 	<h3>This website is made using these awesome Open Source projects <i class="icon-heart" style="color: red"></i></h3>
 	<hr>
 	<table class="table table-bordered table-striped">
diff --git a/website/templates/pages/blog.html b/website/templates/pages/blog.html
index 7483c7c..c9879fe 100644
--- a/website/templates/pages/blog.html
+++ b/website/templates/pages/blog.html
@@ -11,7 +11,7 @@
 {% set title="Blog" %}
 
 {% block content %}
-<div class="span12">
+<div class="col-span-12">
 	<h2 id="blog-title">{{ blog_title }}</h2>
 	{% if blog_introduction %}
 	<p>{{ blog_introduction }}</p>
diff --git a/website/templates/pages/contact.html b/website/templates/pages/contact.html
index b9b3cd7..f2eca0a 100644
--- a/website/templates/pages/contact.html
+++ b/website/templates/pages/contact.html
@@ -7,28 +7,28 @@
 {% set title="Contact Us" %}
 
 {% block content %}
-<div class="span12">
+<div class="col-span-12">
 	<h3>{{ obj.doc.heading or "Contact Us"}}</h3>
 	<div class="row">
-		<div class="web-form span8">
+		<div class="web-form col-span-8">
 			<div class="row">
-			<div class="span6">
+			<div class="col-span-6">
 				<p id="contact-alert" class="alert" 
 					style="display: none;">&nbsp;</p>
 			</div>
 			</div>
 			<div class="clearfix"></div>
-			<p><select class="span6" name="subject">
+			<p><select class="col-span-6" name="subject">
 				{% for option in obj.query_options %}
 					<option value="{{ option }}">{{ option }}</option>
 				{% endfor %}
 			</select></p>
-			<p><input class="span6" name="email" type="text" placeholder="Your Email Address" /></p>
-			<p><textarea class="span6" rows="10" name="message"></textarea></p>
+			<p><input class="col-span-6" name="email" type="text" placeholder="Your Email Address" /></p>
+			<p><textarea class="col-span-6" rows="10" name="message"></textarea></p>
 			<p><button class="btn btn-primary btn-send">Send</button></p>
 		</div>
 		{% if obj.doc.address %}
-		<div class="span3 alert" style="margin-top: 20px;" itemscope itemtype="http://schema.org/PostalAddress">
+		<div class="col-span-3 alert" style="margin-top: 20px;" itemscope itemtype="http://schema.org/PostalAddress">
 			<h4><i class="icon-map-marker"></i> {{ obj.address.address_title }}</h4>
 			{% if obj.address.address_line1 %}
 				<span itemprop="streetAddress">{{ obj.address.address_line1 }}</span><br>
diff --git a/website/templates/pages/order.html b/website/templates/pages/order.html
index 8e7bfe7..8a5db32 100644
--- a/website/templates/pages/order.html
+++ b/website/templates/pages/order.html
@@ -3,7 +3,7 @@
 {% set title=doc.name %}
 
 {% block content %}
-<div class="span12">
+<div class="col-span-12">
     <ul class="breadcrumb">
     	<li><a href="index">Home</a> <span class="divider">/</span></li>
     	<li><a href="account">My Account</a> <span class="divider">/</span></li>
@@ -15,16 +15,16 @@
 	{%- if doc.status -%}
 	<div style="font-size: 13px;">
 	<div class="row">
-		<div class="span2">
+		<div class="col-span-2">
 			<div class="label">{{ doc.status }}</div>
 		</div>
-		<div class="span4">
+		<div class="col-span-4">
 			{{ utils.formatdate(doc.transaction_date) }}
 		</div>
 	</div>
 	<br>
 	<div class="row">
-		<div class="span12">
+		<div class="col-span-12">
 		<table class="table table-bordered">
 			<tbody>
 				<tr>
@@ -52,8 +52,8 @@
 		</div>
 	</div>
 	<div class="row">
-		<div class="span6"></div>
-		<div class="span6">
+		<div class="col-span-6"></div>
+		<div class="col-span-6">
 		<table cellspacing=0 width=100%>
 		<tbody>
 			<tr>
diff --git a/website/templates/pages/orders.html b/website/templates/pages/orders.html
index 0c93a68..d52087f 100644
--- a/website/templates/pages/orders.html
+++ b/website/templates/pages/orders.html
@@ -8,7 +8,7 @@
 currency = "{{ currency }}";
 wn.currency_symbols = {{ currency_symbols }};
 </script>
-<div class="span12">
+<div class="col-span-12">
     <ul class="breadcrumb">
     	<li><a href="index">Home</a> <span class="divider">/</span></li>
     	<li><a href="account">My Account</a> <span class="divider">/</span></li>
@@ -44,8 +44,8 @@
 				
 				// parent
 				var $order = $(repl('<div class="row">\
-					<div class="span3"><a href="order?name=%(name)s">%(name)s</a></div>\
-					<div class="span9"></div>\
+					<div class="col-span-3"><a href="order?name=%(name)s">%(name)s</a></div>\
+					<div class="col-span-9"></div>\
 				</div>', order)).appendTo($list);
 				
 				// items
@@ -53,12 +53,12 @@
 					item.export_rate = format_currency(item.export_rate, order.currency);
 					item.export_amount = format_currency(item.export_amount, order.currency);
 					var $item = $(repl('<div class="row">\
-							<div class="span3">%(item_name)s</div>\
-							<div class="span2" style="text-align: right;">%(export_rate)s</div>\
-							<div class="span2" style="text-align: right;">%(qty)s %(stock_uom)s</div>\
-							<div class="span2" style="text-align: right;">%(export_amount)s</div>\
+							<div class="col-span-3">%(item_name)s</div>\
+							<div class="col-span-2" style="text-align: right;">%(export_rate)s</div>\
+							<div class="col-span-2" style="text-align: right;">%(qty)s %(stock_uom)s</div>\
+							<div class="col-span-2" style="text-align: right;">%(export_amount)s</div>\
 						</div>\
-					</div>', item)).appendTo($order.find(".span9"));
+					</div>', item)).appendTo($order.find(".col-span-9"));
 				});
 				
 				$("<hr>").appendTo($list);
diff --git a/website/templates/pages/product_search.html b/website/templates/pages/product_search.html
index 2dab6ff..ce5cd39 100644
--- a/website/templates/pages/product_search.html
+++ b/website/templates/pages/product_search.html
@@ -18,7 +18,7 @@
 </script>
 
 {% include 'app/website/templates/html/product_search_box.html' %}
-<div class="span12">
+<div class="col-span-12">
 	<h3 class="search-results">Search Results</h3>
 	<div id="search-list" class="row">
 		
diff --git a/website/templates/pages/profile.html b/website/templates/pages/profile.html
index d689cfb..1b7729f 100644
--- a/website/templates/pages/profile.html
+++ b/website/templates/pages/profile.html
@@ -3,7 +3,7 @@
 {% set title="My Profile" %}
 
 {% block content %}
-<div class="span12">
+<div class="col-span-12">
     <ul class="breadcrumb">
     	<li><a href="index">Home</a> <span class="divider">/</span></li>
     	<li><a href="account">My Account</a> <span class="divider">/</span></li>
diff --git a/website/templates/pages/ticket.html b/website/templates/pages/ticket.html
index 858dd3b..d154d16 100644
--- a/website/templates/pages/ticket.html
+++ b/website/templates/pages/ticket.html
@@ -3,7 +3,7 @@
 {% set title=doc.name %}
 
 {% block content %}
-<div class="span12">
+<div class="col-span-12">
     <ul class="breadcrumb">
     	<li><a href="index">Home</a> <span class="divider">/</span></li>
     	<li><a href="account">My Account</a> <span class="divider">/</span></li>
@@ -14,13 +14,13 @@
 	<hr>
 	{%- if doc.status -%}
 	<div class="row">
-		<div class="span2">
+		<div class="col-span-2">
 			<div class="label">{{ doc.status }}</div>
 		</div>
-		<div class="span7">
+		<div class="col-span-7">
 			{{ doc.subject }}
 		</div>
-		<div class="span3">
+		<div class="col-span-3">
 			{{ utils.formatdate(doc.transaction_date) }}
 		</div>
 	</div>
diff --git a/website/templates/pages/tickets.html b/website/templates/pages/tickets.html
index 843d10e..0ea534b 100644
--- a/website/templates/pages/tickets.html
+++ b/website/templates/pages/tickets.html
@@ -3,7 +3,7 @@
 {% set title="My Tickets" %}
 
 {% block content %}
-<div class="span12">
+<div class="col-span-12">
     <ul class="breadcrumb">
     	<li><a href="index">Home</a> <span class="divider">/</span></li>
     	<li><a href="account">My Account</a> <span class="divider">/</span></li>
@@ -39,9 +39,9 @@
 				
 				// parent
 				var $ticket = $(repl('<div class="row">\
-					<div class="span2"><span class="label">%(status)s</span></div>\
-					<div class="span3"><a href="ticket?name=%(name)s">%(name)s</a></div>\
-					<div class="span7">%(subject)s</div>\
+					<div class="col-span-2"><span class="label">%(status)s</span></div>\
+					<div class="col-span-3"><a href="ticket?name=%(name)s">%(name)s</a></div>\
+					<div class="col-span-7">%(subject)s</div>\
 				</div>', ticket)).appendTo($list);
 				
 				$("<hr>").appendTo($list);
diff --git a/website/templates/pages/writers.html b/website/templates/pages/writers.html
index 67c0b7e..5f0836d 100644
--- a/website/templates/pages/writers.html
+++ b/website/templates/pages/writers.html
@@ -3,7 +3,7 @@
 {% set title="Blog Writers" %}
 
 {% block content %}
-<div class="span12">
+<div class="col-span-12">
 	<h2 id="blog-title">Blog Writers</h2>
 	{% if writers_introduction %}
 	<p>{{ writers_introduction }}</p>