Merged in mocheen/cakeside/new-menu (pull request #79)

fluid layout

49 files changed, 263 insertions, 419 deletions

diff --git a/app/assets/javascripts/backbone/templates/cakes/edit.jst.ejs b/app/assets/javascripts/backbone/templates/cakes/edit.jst.ejs
index 26768845..d70e7f5f 100644
--- a/app/assets/javascripts/backbone/templates/cakes/edit.jst.ejs
+++ b/app/assets/javascripts/backbone/templates/cakes/edit.jst.ejs
@@ -1,9 +1,5 @@
-<div class="row">
-  <div class="span2">
-    <p> <a class="btn btn-primary add-photo">Add Photo...</a> </p>
-    <ul class="thumbnails"></ul>
-  </div>
-  <div class="span10">
+<div class="row-fluid">
+  <div class="span12">
     <h1><small>Edit</small> <%= cake.name %></h1>
     <hr />
     <form id="edit-cake" name="cake" class="form-horizontal">
@@ -49,3 +45,7 @@
     </form>
   </div>
 </div>
+<div class="row-fluid">
+  <p> <a class="btn btn-primary add-photo">Add Photo...</a> </p>
+  <ul class="thumbnails"></ul>
+</div>
diff --git a/app/assets/javascripts/backbone/templates/cakes/new.jst.ejs b/app/assets/javascripts/backbone/templates/cakes/new.jst.ejs
index e287b070..b878ab0b 100644
--- a/app/assets/javascripts/backbone/templates/cakes/new.jst.ejs
+++ b/app/assets/javascripts/backbone/templates/cakes/new.jst.ejs
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row-fluid">
   <div class="span12">
     <h1>Share cake</h1>
     <hr />
diff --git a/app/assets/javascripts/backbone/templates/cakes/show.jst.ejs b/app/assets/javascripts/backbone/templates/cakes/show.jst.ejs
index b845b91a..91e12dc0 100644
--- a/app/assets/javascripts/backbone/templates/cakes/show.jst.ejs
+++ b/app/assets/javascripts/backbone/templates/cakes/show.jst.ejs
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row-fluid">
   <div class="span12">
     <p>
     <a href="#cakes/<%= id %>/edit" class="btn">
@@ -16,7 +16,7 @@
     </p>
   </div>
 </div>
-<div class="row">
+<div class="row-fluid">
   <div class="span6">
     <% if (hasImage()) { %>
     <% random_photo = randomPhoto()%>
@@ -45,12 +45,12 @@
     <p><%= story %></p>
   </div>
 </div>
-<div class="row">
+<div class="row-fluid">
   <div class="span12">
     <a class="btn add-photo">Add Photo</a>
     <a href="#cakes/<%= id %>/edit">(edit)</a>
   </div>
-  <div class="span12">
-    <ul class="thumbnails"></ul>
-  </div>
+</div>
+<div class="row-fluid">
+  <ul class="thumbnails"></ul>
 </div>
diff --git a/app/assets/javascripts/backbone/templates/cakes/thumbnail.jst.ejs b/app/assets/javascripts/backbone/templates/cakes/thumbnail.jst.ejs
index a5483c3c..66533081 100644
--- a/app/assets/javascripts/backbone/templates/cakes/thumbnail.jst.ejs
+++ b/app/assets/javascripts/backbone/templates/cakes/thumbnail.jst.ejs
@@ -1,11 +1,11 @@
-<li class="span2">
+<div class="thumbnail">
   <% if (uploading()) { %>
     <div class="progress progress-striped active">
       <div class="bar" style="width: <%= percentComplete %>%;"></div>
     </div>
   <% } else { %>
     <a href="#cakes/<%= cake_id %>/photos/<%= id %>">
-      <img src="<%= thumb_url %>" class="thumbnail" />
+      <img src="<%= thumb_url %>" />
     </a>
   <% } %>
-</li>
+</div>
diff --git a/app/assets/javascripts/backbone/templates/photos/show.jst.ejs b/app/assets/javascripts/backbone/templates/photos/show.jst.ejs
index 91423b50..c3248267 100644
--- a/app/assets/javascripts/backbone/templates/photos/show.jst.ejs
+++ b/app/assets/javascripts/backbone/templates/photos/show.jst.ejs
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row-fluid">
   <div class="span12">
     <p><a href="#cakes/<%= cake_id %>">back</a></p>
     <a href="#cakes/<%= cake_id %>/photos/<%= id %>">
@@ -6,7 +6,7 @@
     </a>
   </div>
 </div>
-<div class="row">
+<div class="row-fluid">
   <div class="span12">
     <ul class="thumbnails">
     </ul>
diff --git a/app/assets/javascripts/backbone/views/cakes/thumbnail_view.js.coffee b/app/assets/javascripts/backbone/views/cakes/thumbnail_view.js.coffee
index 1a534bac..5e772232 100644
--- a/app/assets/javascripts/backbone/views/cakes/thumbnail_view.js.coffee
+++ b/app/assets/javascripts/backbone/views/cakes/thumbnail_view.js.coffee
@@ -2,6 +2,8 @@ CakeSide.Views.Cakes ||= {}
 
 class CakeSide.Views.Cakes.ThumbnailView extends Marionette.ItemView
   template: JST['backbone/templates/cakes/thumbnail']
+  tagName: 'li'
+  className: 'span2'
   modelEvents:
     'sync': 'render'
     'change:percentComplete': 'render'
diff --git a/app/controllers/creation_tags_controller.rb b/app/controllers/creation_tags_controller.rb
index bcfde33e..769d07bf 100644
--- a/app/controllers/creation_tags_controller.rb
+++ b/app/controllers/creation_tags_controller.rb
@@ -1,14 +1,12 @@
 class CreationTagsController < ApplicationController
   def index
     @tags = Creation.tag_counts_on(:tags)
-    expires_in(6.hours)
   end
 
   def show
     @tag = params[:id].downcase.gsub(/ /, '-')
     @total_tutorials = Tutorial.tagged_with(@tag).count
     @total_creations = Creation.tagged_with(@tag).count
-    @creations = Creation.includes([:user, :tags, :photos]).tagged_with([@tag]).where('photos_count > 0').page(params[:page]).per(15)
-    expires_in(6.hours)
+    @creations = Creation.includes([:user, :tags, :photos]).tagged_with([@tag]).where('photos_count > 0').page(params[:page]).per(12)
   end
 end
diff --git a/app/controllers/my/dashboard_controller.rb b/app/controllers/my/dashboard_controller.rb
index 53d9a378..006a55a7 100644
--- a/app/controllers/my/dashboard_controller.rb
+++ b/app/controllers/my/dashboard_controller.rb
@@ -1,7 +1,7 @@
 module My
   class DashboardController < BaseController
     def index
-      @items = (current_user.creations + current_user.tutorials).sort_by! { |x| x.created_at }.reverse
+      @items = (current_user.creations.includes(:photos) + current_user.tutorials).sort_by! { |x| x.created_at }.reverse
       @activities = current_user.recent_activities
     end
   end
diff --git a/app/controllers/profiles_controller.rb b/app/controllers/profiles_controller.rb
index dedb7e6e..c79b7038 100644
--- a/app/controllers/profiles_controller.rb
+++ b/app/controllers/profiles_controller.rb
@@ -3,12 +3,10 @@ class ProfilesController < ApplicationController
 
   def index
     @profiles = User.includes(:avatar).where('creations_count > 0').order(:creations_count => :desc).page(params[:page]).per(12)
-    expires_in(1.hour)
   end
 
   def show
     @user = User.find(params[:id])
-    @creations = @user.creations.includes([:user, :photos]).page(params[:page]).per(18)
-    expires_in(1.hour)
+    @creations = @user.creations.includes([:user, :photos])
   end
 end
diff --git a/app/controllers/search_controller.rb b/app/controllers/search_controller.rb
index 03e6d6d4..ae816cc1 100644
--- a/app/controllers/search_controller.rb
+++ b/app/controllers/search_controller.rb
@@ -4,7 +4,6 @@ class SearchController < ApplicationController
     @creations_repository = creations_repository
   end
 
-
   def index
     @search = params[:q]
     if @search.blank?
diff --git a/app/controllers/tutorial_tags_controller.rb b/app/controllers/tutorial_tags_controller.rb
index 3e57d530..2a217375 100644
--- a/app/controllers/tutorial_tags_controller.rb
+++ b/app/controllers/tutorial_tags_controller.rb
@@ -1,14 +1,10 @@
 class TutorialTagsController < ApplicationController
   def index
     @tags = Tutorial.tag_counts_on(:tags)
-    expires_in(6.hours)
   end
 
   def show
     @tag = params[:id].downcase.gsub(/ /, '-')
-    @total_tutorials = Tutorial.tagged_with(@tag).count
-    @total_creations = Creation.tagged_with(@tag).count
-    @tutorials = Tutorial.includes(:tags).tagged_with(@tag).page(params[:page]).per(15)
-    expires_in(6.hours)
+    @tutorials = Tutorial.includes(:user).tagged_with(@tag).page(params[:page]).per(12)
   end
 end
diff --git a/app/controllers/tutorials_controller.rb b/app/controllers/tutorials_controller.rb
index af0c4c62..7c88460e 100644
--- a/app/controllers/tutorials_controller.rb
+++ b/app/controllers/tutorials_controller.rb
@@ -3,12 +3,10 @@ class TutorialsController < ApplicationController
 
   def index
     @tutorials = Tutorial.includes(:tags).page(params[:page]).per(15)
-    expires_in(10.minutes)
   end
 
   def show
     @tutorial = Tutorial.find(params[:id])
-    expires_in(24.hours)
   end
 
   def new
diff --git a/app/helpers/creations_helper.rb b/app/helpers/creations_helper.rb
index 23095ffc..036d05e0 100644
--- a/app/helpers/creations_helper.rb
+++ b/app/helpers/creations_helper.rb
@@ -6,8 +6,9 @@ module CreationsHelper
       creation.name
     end
   end
-  def shrink(name, length)
-    if( name.length > length)
+  def shrink(name, length, default = nil)
+    return default unless name.present?
+    if name.length > length
       name[0...length] + '...'
     else
       name
diff --git a/app/models/creation_repository.rb b/app/models/creation_repository.rb
index 9dca798f..d57d002a 100644
--- a/app/models/creation_repository.rb
+++ b/app/models/creation_repository.rb
@@ -6,7 +6,7 @@ class CreationRepository
   end
 
   def search(query)
-    connection.includes(:user).where(["upper(name) like :query OR upper(story) like :query", { query: "%#{query.upcase}%" }])
+    connection.includes(:user, :photos).where(["upper(name) like :query OR upper(story) like :query", { query: "%#{query.upcase}%" }])
   end
 
   def visible_creations
diff --git a/app/views/categories/show.html.erb b/app/views/categories/show.html.erb
index 1ab56392..11ed8a29 100644
--- a/app/views/categories/show.html.erb
+++ b/app/views/categories/show.html.erb
@@ -1,17 +1,24 @@
 <% provide(:title, "#{@category.name} Cakes") -%>
-<div class="row">
-  <div class="span3">
-    <ul class="well nav nav-pills nav-stacked">
-      <% @categories.each do |category| %>
-        <% if(category == @category) -%>
-          <li class="active"><%= link_to category.name, category_path(category) %></li>
-        <% else -%>
-          <li><%= link_to category.name, category_path(category) %></li>
-        <% end -%>
+<div class="row-fluid">
+  <% @creations.each_slice(6).each do |batch| %>
+    <ul class='thumbnails'>
+      <% batch.each do |creation| %>
+        <li class="span2">
+          <div class="thumbnail">
+            <%= link_to creation do %>
+              <%= image_tag creation.primary_image.url_for(:thumb) %>
+            <% end %>
+            <div class="caption">
+              <h4><%= link_to shrink(creation.name, 12), creation %></h4>
+              <p><%= link_to shrink(creation.user.name, 20), profile_path(creation.user) %></p>
+              <p><small><%= time_ago_in_words(creation.created_at) %> ago.</small></p>
+            </div>
+          </div>
+        </li>
       <% end %>
     </ul>
-  </div>
-  <div class="span9">
-    <%= render "shared/creation_image_gallery" %>
-  </div>
+  <% end %>
+</div>
+<div class="row-fluid">
+  <%= render "shared/paging", items: @creations %>
 </div>
diff --git a/app/views/creation_tags/index.html.erb b/app/views/creation_tags/index.html.erb
index eaea88b8..351e72da 100644
--- a/app/views/creation_tags/index.html.erb
+++ b/app/views/creation_tags/index.html.erb
@@ -1,5 +1,5 @@
 <% provide(:title, "Tag, you're it".html_safe) -%>
-<div class="row">
+<div class="row-fluid">
   <div class="span12">
     <% tag_cloud(@tags, %w(btn-mini btn-small btn-large)) do |tag, css_class| %>
       <%= link_to "#{tag.name} x #{tag.count}", { :action => :show, :id => tag.name }, :class => "#{css_class} btn" %>
diff --git a/app/views/creation_tags/show.html.erb b/app/views/creation_tags/show.html.erb
index 4a9edfe8..7bd02f3d 100644
--- a/app/views/creation_tags/show.html.erb
+++ b/app/views/creation_tags/show.html.erb
@@ -1,49 +1,24 @@
-<% provide(:title, "#{@tag}") -%>
-<% content_for :javascript do -%>
-<script type="text/javascript">  
-  var ready = function(){ 
-    var container = $('#creations-div');
-    container.imagesLoaded(function(){
-      container.masonry({ itemSelector : '.span4', isResizable: true });
-    });
-  };
-  $(document).ready(ready);
-</script>
-<% end -%>
-<div class="row">
-  <div class="span9">
-    <h1><%= @total_creations %> creations tagged <em><%= @tag %></em></h1>
-  </div>
-  <div class="span3">
-    <p class="pull-right"><%= link_to "#{@total_tutorials} tutorials", tutorial_tag_path(@tag) %> &raquo;</p>
-  </div>
-</div>
-<div id="creations-div" class="row">
-  <div class="span12">
-    <ul class="thumbnails">
-    <% @creations.each do |creation| %>
-      <div class="span4">
-        <div class="thumbnail">
-          <%= link_to creation do %>
-            <%= image_tag creation.primary_image.url_for(:large) %>
-          <% end %>
-          <div class="caption">
-            <h3><%= link_to creation.name, creation %> <em><small>by <%= link_to shrink(creation.user.name, 20), profile_path(creation.user) %></small></em></h3>
-            <p>
-            <% creation.tags.each do |tag| -%>
-              <%= link_to creation_tag_path(tag.name) do %>
-                <span class="label"><%= tag.name %></span>
-              <% end %>
-            <% end -%>
-            </p>
-            <p><%= creation.story %></p>
+<% provide(:title, @tag) -%>
+<div class="row-fluid">
+  <% @creations.each_slice(6).each do |batch| %>
+    <ul class='thumbnails'>
+      <% batch.each do |creation| %>
+        <li class="span2">
+          <div class="thumbnail">
+            <%= link_to creation do %>
+              <%= image_tag creation.primary_image.url_for(:thumb) %>
+            <% end %>
+            <div class="caption">
+              <h4><%= link_to shrink(creation.name, 12), creation %></h4>
+              <p><%= link_to shrink(creation.user.name, 20), profile_path(creation.user) %></p>
+              <p><small><%= time_ago_in_words(creation.created_at) %> ago.</small></p>
+            </div>
           </div>
-        </div>
-      </div>
-    <% end %>
+        </li>
+      <% end %>
     </ul>
-  </div>
+  <% end %>
 </div>
-<div class="row">
-  <div class="span12 text-center"> <%= paginate @creations %> </div>
+<div class="row-fluid">
+  <%= render "shared/paging", items: @creations %>
 </div>
diff --git a/app/views/creations/index.html.erb b/app/views/creations/index.html.erb
index eeb406cc..c47a0871 100644
--- a/app/views/creations/index.html.erb
+++ b/app/views/creations/index.html.erb
@@ -1,13 +1,8 @@
 <% provide(:description, "CakeSide is a free site to share your cake creations and ideas with other cake fanatics like yourself") -%>
-<% content_for :javascript do -%>
-<script type="text/javascript">
-  $(function(){ new Masonry('#creations-div').load(); });
-</script>
-<% end -%>
 <% unless user_signed_in?  -%>
-  <div class="row">
+  <div class="row-fluid">
     <div class="span6">
-      <%= image_tag "cakeside-logo.png", :alt => "Welcome to Cakeside" %>
+      <%= image_tag "cakeside-logo.png", :alt => "Welcome to Cakeside", style: 'max-height:186px' %>
     </div>
     <div class="span6">
       <h1>Welcome cake enthusiast!</h1>
@@ -19,49 +14,27 @@
       </p>
     </div>
   </div>
-  <div class="row">
-    <div class="span12">
-      <div class="marketing">
-        <div class="row">
-          <div class="span4">
-            <h2 style="text-align:center;font-weight:bold;">Share your creativity</h2>
-            <p style="text-align:center;">Show off your originality and find interesting ideas with fellow passionate CakeSide artists.</p>
-          </div>
-          <div class="span4">
-            <h2 style="text-align:center;font-weight:bold;">Promote yourself</h2>
-            <p style="text-align:center;">Get recognized for your work and connect with other artists with unique styles. </p>
-          </div>
-          <div class="span4">
-            <h2 style="text-align:center;font-weight:bold;">Inspire a community</h2>
-            <p style="text-align:center;">Upload creations, teach with tutorials, and create a vibrant community for everything cake.</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
 <% end -%>
-<div class="row">
-  <div class="span12">
-    <div id="creations-div" class="row">
-      <div class="span12">
-      <ul class="thumbnails">
-        <% @creations.each do |creation| %>
-          <div class="span4">
-            <div class="thumbnail">
-              <%= link_to creation do %>
-                <%= image_tag creation.primary_image.url_for(:large) %>
-              <% end %>
-              <div class="caption">
-                <h3><%= link_to creation.name, creation %> <em><small>by <%= link_to shrink(creation.user.name, 20), profile_path(creation.user) %></small></em></h3>
-                <p><%= creation.story %></p>
-                <p><small><%= time_ago_in_words(creation.created_at) %> ago.</small></p>
-              </div>
+<div class="row-fluid">
+  <% @creations.each_slice(6).each do |batch| %>
+    <ul class='thumbnails'>
+      <% batch.each do |creation| %>
+        <li class="span2">
+          <div class="thumbnail">
+            <%= link_to creation do %>
+              <%= image_tag creation.primary_image.url_for(:thumb) %>
+            <% end %>
+            <div class="caption">
+              <h4><%= link_to shrink(creation.name, 12), creation %></h4>
+              <p><%= link_to shrink(creation.user.name, 20), profile_path(creation.user) %></p>
+              <p><small><%= time_ago_in_words(creation.created_at) %> ago.</small></p>
             </div>
           </div>
-        <% end %>
-      </ul>
-      </div>
-    </div>
-    <%= render "shared/paging", items: @creations %>
-  </div>
+        </li>
+      <% end %>
+    </ul>
+  <% end %>
+</div>
+<div class="row-fluid">
+  <%= render "shared/paging", items: @creations %>
 </div>
diff --git a/app/views/creations/show.html.erb b/app/views/creations/show.html.erb
index b857d1e5..2820955f 100644
--- a/app/views/creations/show.html.erb
+++ b/app/views/creations/show.html.erb
@@ -1,6 +1,6 @@
 <% provide(:title, "#{@creation.name} By #{@creation.user.name}") -%>
 <% provide(:description, "#{@creation.story}") -%>
-<div class="row">
+<div class="row-fluid">
   <div class="span6">
     <img class="thumbnail" src="<%= @creation.primary_image.url_for(:large) %>" alt="<%= @creation.name %>" />
   </div>
@@ -10,29 +10,28 @@
     <% if @creation.tags.any? %>
       <span> <i class="icon-tags"></i> </span>
       <% @creation.tags.each do |tag| -%>
-        <%= link_to creation_tag_path(tag.name), class: 'mix-link', data: { event: "click-on-tag" } do %>
+        <%= link_to creation_tag_path(tag.name) do %>
           <span class="label"><%= tag.name %></span>
         <% end %>
       <% end -%>
     <% end -%>
     <hr />
-    <div class="row">
+    <div class="row-fluid">
       <div class="span3">
         <% if user_signed_in? %>
           <% unless current_user == @creation.user || current_user.already_likes(@creation) %>
             <%= button_to "ADD TO FAVORITES", creation_favorites_path(:creation_id => @creation.id), :method => :post, :class => 'btn btn-primary', "data-event" => 'click-add-to-favorites' %>
       <% end %>
       <% else %>
-        <p><%= link_to "SIGN UP FOR FREE", login_path, :class => "btn btn-primary mix-link", "data-event" => 'click-sign-up' %></p>
+        <p><%= link_to "SIGN UP FOR FREE", login_path, :class => "btn btn-primary" %></p>
       <% end %>
       </div>
       <div class="span3">
-        <div class="row">
+        <div class="row-fluid">
           <div class="span1">
             <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a>
             <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
           </div>
-          <div class="span1"><div class="fb-like" data-href="<%= "#{request.protocol}#{request.host_with_port}#{request.fullpath}" %>" data-send="false" data-layout="button_count" data-width="250" data-show-faces="false"></div></div>
           <div class="span1"><a href="//pinterest.com/pin/create/button/?url=<%= "#{request.protocol}#{request.host_with_port}#{request.fullpath}" %>&media=<%= yield :product_image %>&description=<%= yield :product_social %>." data-pin-do="buttonPin" data-pin-config="none"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png"/></a></div>
         </div>
       </div>
@@ -42,7 +41,7 @@
 </div>
 
 <% if @creation.photos_count > 1 %>
-  <div class="row">
+  <div class="row-fluid">
     <div class="span12">
       <%= link_to "View #{pluralize(@creation.photos_count, "photo")} &raquo;".html_safe, creation_photos_path(@creation) %>
     </div>
diff --git a/app/views/devise/passwords/edit.html.erb b/app/views/devise/passwords/edit.html.erb
index c65857d3..d2ff41f1 100644
--- a/app/views/devise/passwords/edit.html.erb
+++ b/app/views/devise/passwords/edit.html.erb
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row-fluid">
   <div class="span12">
     <h1>Reset My Password</h1>
     <%= form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => { :method => :put }, :class => "form-horizontal") do |f| %>
diff --git a/app/views/devise/passwords/new.html.erb b/app/views/devise/passwords/new.html.erb
index 47f303fb..dcf9049c 100644
--- a/app/views/devise/passwords/new.html.erb
+++ b/app/views/devise/passwords/new.html.erb
@@ -1,7 +1,7 @@
 <div class="page-header">
   <h1>Forgot your password? <small>don't worry, it happens</small></h1>
 </div>
-<div class="row">
+<div class="row-fluid">
   <div class="span12">
     <p> Type your email address below to reset your password. </p>
 
diff --git a/app/views/devise/registrations/new.html.erb b/app/views/devise/registrations/new.html.erb
index c0042c15..c1be3cf6 100644
--- a/app/views/devise/registrations/new.html.erb
+++ b/app/views/devise/registrations/new.html.erb
@@ -9,14 +9,12 @@
         $('#submit-registration').attr('disabled', 'disabled');
       }
     });
-    mixpanel.track_forms(".form-inline", "signed in");
-    mixpanel.track_forms(".form-horizontal", "registered");
   });
 </script>
     <% end %>
-    <div class="row">
+    <div class="row-fluid">
       <div class="span12">
-        <div class="row">
+        <div class="row-fluid">
           <div class="span6 hidden-phone">
             <%= image_tag "cakeside-logo.png" %>
             <div style="padding-left:10px;padding-right:10px;">
diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb
index 7805c96c..34b06e96 100644
--- a/app/views/devise/sessions/new.html.erb
+++ b/app/views/devise/sessions/new.html.erb
@@ -12,9 +12,9 @@
   });
 </script>
 <% end %>
-<div class="row">
+<div class="row-fluid">
   <div class="span12">
-    <div class="row">
+    <div class="row-fluid">
       <div class="span6 hidden-phone">
         <%= image_tag "cakeside-logo.png" %>
         <div style="padding-left:10px;padding-right:10px;">
diff --git a/app/views/favorites/index.html.erb b/app/views/favorites/index.html.erb
index 37349669..573e7675 100644
--- a/app/views/favorites/index.html.erb
+++ b/app/views/favorites/index.html.erb
@@ -1,5 +1,5 @@
 <% provide(:title, "#{@creation.name} by #{@creation.user.name} - fanclub") -%>
-<div class="row">
+<div class="row-fluid">
   <div class="span12">
     <h1> Fans of  <%= link_to @creation.name, creation_path(@creation) %> </h1>
     <ul class="thumbnails">
diff --git a/app/views/layouts/_facebook.html.erb b/app/views/layouts/_facebook.html.erb
deleted file mode 100644
index 19d44acd..00000000
--- a/app/views/layouts/_facebook.html.erb
+++ /dev/null
@@ -1,11 +0,0 @@
-<div id="fb-root"></div>
-<script>
-window.fbAsyncInit = function() { FB.init({ appId: '<%= ENV["FACEBOOK_APP_ID"] %>', channelUrl: '//www.cakeside.com/channel.html', status: false, xfbml: true }); };
-(function(d, s, id){
-  var js, fjs = d.getElementsByTagName(s)[0];
-  if (d.getElementById(id)) {return;}
-  js = d.createElement(s); js.id = id;
-  js.src = "//connect.facebook.net/en_US/all.js";
-  fjs.parentNode.insertBefore(js, fjs);
-}(document, 'script', 'facebook-jssdk'));
-</script>
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 7c69ab6b..51ae8f00 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -1,93 +1,43 @@
-<div class="navbar navbar-fixed-top">
+<div class="navbar navbar-inverse navbar-fixed-top">
   <div class="navbar-inner">
-    <div class="container">
-      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
+    <div class="container-fluid">
+      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
       <%= link_to root_path, class: 'brand', style: 'color:hotpink;' do %>
-        Cake<em>Side</em>
+        Cakeside
       <% end %>
-      <div class="nav-collapse">
+      <div class="nav-collapse collapse">
+        <p class="navbar-text pull-right">
+        <% if user_signed_in? %>
+          <%= link_to current_user.name, my_dashboard_path, class: 'navbar-link' %>
+          <%= link_to my_dashboard_path, class: 'navbar-link' do %>
+            <%= avatar_for(current_user, size: 24) %>
+          <% end %>
+        <% else %>
+          <%= link_to "Sign In", login_path, class: 'navbar-link' %>
+        <% end %>
+        </p>
         <ul class="nav">
-          <li class="dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Creations<b class="caret"></b></a>
-            <ul class="dropdown-menu">
-              <li>
-              <%= link_to current_user ? my_root_path(anchor: 'cakes/new') : login_path do %>
-                <i class="icon-edit icon-large"></i> Add Creation
-              <% end %>
-              </li>
-              <li class="divider"></li>
-              <% cache @categories do %>
-                <li class="nav-header">Categories</li>
-                <% @categories.each do |category| %>
-                  <li><%= link_to category.name, category_path(category) %></li>
-                <% end %>
-              <% end %>
-              <li class="divider"></li>
-              <li><%= link_to "View All", creations_path %></li>
-            </ul>
-          </li>
-          <li class="dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tutorials<b class="caret"></b></a>
-            <ul class="dropdown-menu">
-              <li>
-                <%= link_to new_tutorial_path do %>
-                  <i class="icon-edit icon-large"></i> Add Tutorial
-                <% end %>
-              </li>
-              <li class="divider"></li>
-              <li class="nav-header">Recently Added</li>
-              <% cache @newest_tutorials do %>
-                <% @newest_tutorials.each do |tutorial| %>
-                <li><%= link_to tutorial.heading, tutorial_path(tutorial) %></li>
-                <% end %>
-              <% end %>
-              <li><%= link_to "...", tutorials_path %></li>
-              <li class="divider"></li>
-              <li><%= link_to "View All", tutorials_path %></li>
-            </ul>
-          </li>
-          <li class="dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Artists<b class="caret"></b></a>
-            <ul class="dropdown-menu">
-              <li class="nav-header">Top Contributers</li>
-              <% cache @top_members do %>
-                <% @top_members.each do |user| %>
-                <li><%= link_to user.name, profile_path(user) %></li>
-                <% end %>
-              <% end %>
-              <li class="divider"></li>
-              <li class="nav-header">Recently Joined</li>
-              <% cache @newest_members do %>
-                <% @newest_members.each do |user| %>
-                <li><%= link_to user.name, profile_path(user) %></li>
-                <% end %>
-              <% end %>
-              <li class="divider"></li>
-              <li><%= link_to "View All", profiles_path %></li>
-            </ul>
-          </li>
-        </ul>
-        <ul class="nav pull-right">
+          <% @categories.each do |category| %>
+              <li class="<%= "active" if params["slug"] == category.slug %>"><%= link_to category.name.pluralize, category_path(category) %></li>
+          <% end %>
+          <li class="<%= "active" if params["controller"] == "profiles" %>"> <%= link_to "Artists", profiles_path %> </li>
+          <li class="<%= "active" if params["controller"] == "tutorials" %>"> <%= link_to "Tutorials", tutorials_path %> </li>
           <li>
-            <%= link_to current_user ? my_root_path(anchor: 'cakes/new') : login_path do %>
-              <i class="icon-edit icon-large"></i> Add Creation
+            <%= form_tag(search_path, :method => "get", :name => "search", :class => "navbar-search pull-left") do %>
+              <input name="q" type="text" class="search-query" placeholder="Search" value="<%= @search %>" />
             <% end %>
           </li>
-          <%= form_tag(search_path, :method => "get", :name => "search", :class => "navbar-search pull-left") do %>
-            <input name="q" type="text" class="search-query" placeholder="Search" value="<%= @search %>" />
-          <% end %>
-          <li class="divider-vertical hidden-phone"></li>
-          <% if user_signed_in? %>
           <li>
-            <%= link_to my_dashboard_path do %>
-              <%= avatar_for(current_user, size: 24) %>
+            <%= link_to user_signed_in? ? my_root_path(anchor: 'cakes/new') : login_path do %>
+              <i class="icon-edit icon-large"></i> Add Creation
             <% end %>
           </li>
-          <% else %>
-            <li> <%= link_to "Sign In", login_path %> </li>
-          <% end %>
         </ul>
-      </div>
+      </div><!--/.nav-collapse -->
     </div>
   </div>
 </div>
diff --git a/app/views/layouts/_messages.html.erb b/app/views/layouts/_messages.html.erb
index 8164caed..11784033 100644
--- a/app/views/layouts/_messages.html.erb
+++ b/app/views/layouts/_messages.html.erb
@@ -1,6 +1,6 @@
 <% devise_flash -%>
 <% if(flash.any?) -%>
-<div class="row">
+<div class="row-fluid">
   <div class="span12">
     <% flash.each do |key, value| -%>
       <% Array(value).uniq.each do |message| -%>
diff --git a/app/views/layouts/_mixpanel.html.erb b/app/views/layouts/_mixpanel.html.erb
deleted file mode 100644
index 3a36af22..00000000
--- a/app/views/layouts/_mixpanel.html.erb
+++ /dev/null
@@ -1,16 +0,0 @@
-<!-- start Mixpanel --><script type="text/javascript">(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;a=e.createElement("script");a.type="text/javascript";a.async=!0;a.src=("https:"===e.location.protocol?"https:":"http:")+'//cdn.mxpnl.com/libs/mixpanel-2.2.min.js';f=e.getElementsByTagName("script")[0];f.parentNode.insertBefore(a,f);b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==
-typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.track_charge people.clear_charges people.delete_user".split(" ");for(g=0;g<i.length;g++)f(c,i[g]);
-b._i.push([a,e,d])};b.__SV=1.2}})(document,window.mixpanel||[]);
-mixpanel.init("<%= ENV['MIXPANEL_API_KEY'] %>");</script><!-- end Mixpanel -->
-<% if current_user %>
-<script type="text/javascript" charset="utf-8">
-<% if Rails.env.development? || Rails.env.test? %>
-mixpanel.disable();
-<% end %>
-mixpanel.identify(<%= current_user.id %>);
-mixpanel.name_tag("<%= current_user.email %>");
-mixpanel.people.set({"$email":"<%= current_user.email %>","$created":"<%= current_user.created_at %>","$last_login":"<%= current_user.last_sign_in_at %>","city":"<%= current_user.city %>","latitude":"<%= current_user.latitude %>","longitude":"<%= current_user.longitude %>","website":"<%= current_user.website %>","twitter":"<%= current_user.twitter %>","facebook":"<%= current_user.facebook %>","profile":"<%= "#{request.protocol}#{request.host_with_port}#{url_for(profile_path(current_user))}" %>"});
-mixpanel.track_links(".mix-link", "clicked-link", function(ele) { return { type: $(ele).attr('data-event') }; });
-mixpanel.track_forms('.button_to', "form-submitted", function(form) { return { type: $(form).attr('action') }; });
-</script>
-<% end %>
\ No newline at end of file
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 214822fd..47873c72 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -18,9 +18,8 @@
 <%= csrf_meta_tags %>
 </head>
 <body>
-<%= render "layouts/facebook" %>
-<div class="container">
-  <%= render "layouts/header" %>
+<%= render "layouts/header" %>
+<div class="container-fluid">
   <%= render "layouts/messages" %>
   <%= yield %>
 </div> <!-- /container -->
@@ -29,7 +28,6 @@
 <!--[if lt IE 9]>
   <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
-<%= render "layouts/mixpanel"%>
 <%= render "layouts/embedly"%>
 <%= yield :javascript %>
 <%= render "layouts/uservoice_feedback"%>
diff --git a/app/views/my/avatars/edit.html.erb b/app/views/my/avatars/edit.html.erb
index 2415492c..1c6295fc 100644
--- a/app/views/my/avatars/edit.html.erb
+++ b/app/views/my/avatars/edit.html.erb
@@ -1,11 +1,5 @@
-<% content_for :javascript do %>
-<script type="text/javascript">
-try { mixpanel.track_forms(".edit_avatar", "uploaded avatar"); } catch {}
-</script>
-<% end %>
-
 <%= render :partial => "shared/account_nav", :locals => { :selected => :picture } %>
-<div class="row">
+<div class="row-fluid">
   <div class="span12">
     <%= avatar_for(current_user) %>
     <%= form_for(@avatar, :url => my_avatar_path(@avatar), :method => :put, :multipart => true, remote: true, authenticity_token: true) do |f| %>
diff --git a/app/views/my/dashboard/index.html.erb b/app/views/my/dashboard/index.html.erb
index 8dbcc1e4..d17a8b86 100644
--- a/app/views/my/dashboard/index.html.erb
+++ b/app/views/my/dashboard/index.html.erb
@@ -1,6 +1,6 @@
 <% provide(:title, "Dashboard") -%>
 <%= render :partial => "shared/account_nav", :locals => { :selected => :dashboard } %>
-<div class="row">
+<div class="row-fluid">
   <div class="span7">
     <% @items.each do |item| %>
       <%= render item.class.to_s.downcase, item: item %>
diff --git a/app/views/my/favorites/index.html.erb b/app/views/my/favorites/index.html.erb
index b5c3b6a8..3b7c5c11 100644
--- a/app/views/my/favorites/index.html.erb
+++ b/app/views/my/favorites/index.html.erb
@@ -1,15 +1,22 @@
 <% provide(:title, "My Favorites") -%>
 <%= render :partial => "shared/account_nav", :locals => { :selected => :favorites } %>
-<div class="row">
-  <div class="span12">
-    <ul class="thumbnails">
-      <% @creations.each do |creation| %>
-        <li>
-        <%= link_to creation do %>
-          <img class="thumbnail" src="<%= creation.primary_image.url_for(:thumb) %>" alt="<%= creation.name %>">
-        <% end %>
+<div class="row-fluid">
+  <% @creations.each_slice(6).each do |batch| %>
+    <ul class='thumbnails'>
+      <% batch.each do |creation| %>
+        <li class="span2">
+          <div class="thumbnail">
+            <%= link_to creation do %>
+              <%= image_tag creation.primary_image.url_for(:thumb) %>
+            <% end %>
+            <div class="caption">
+              <h4><%= link_to shrink(creation.name, 12), creation %></h4>
+              <p><%= link_to shrink(creation.user.name, 20), profile_path(creation.user) %></p>
+              <p><small><%= time_ago_in_words(creation.created_at) %> ago.</small></p>
+            </div>
+          </div>
         </li>
       <% end %>
     </ul>
-  </div>
+  <% end %>
 </div>
diff --git a/app/views/my/passwords/index.html.erb b/app/views/my/passwords/index.html.erb
index f425b153..5a651079 100644
--- a/app/views/my/passwords/index.html.erb
+++ b/app/views/my/passwords/index.html.erb
@@ -1,6 +1,6 @@
 <%= render :partial => "shared/account_nav", :locals => { :selected => :password } %>
 
-<div class="row">
+<div class="row-fluid">
   <div class="span12">
     <%= form_for(@user, :url => my_password_path(@user), :html => { :method => :patch, :class => "form-horizontal" }) do |f| %>
       <div class="control-group">
diff --git a/app/views/my/settings/index.html.erb b/app/views/my/settings/index.html.erb
index 4e6b1530..c7ab59de 100644
--- a/app/views/my/settings/index.html.erb
+++ b/app/views/my/settings/index.html.erb
@@ -9,7 +9,7 @@
 
 <%= render :partial => "shared/account_nav", :locals => { :selected => :basic_info } %>
 
-<div class="row">
+<div class="row-fluid">
   <div class="span12">
     <%= form_for(@user, :url => my_setting_path(@user), :html => { :method => :put, :class => "form-horizontal" }) do |f| %>
       <fieldset>
diff --git a/app/views/photos/index.html.erb b/app/views/photos/index.html.erb
index 47c44ed8..977a65ab 100644
--- a/app/views/photos/index.html.erb
+++ b/app/views/photos/index.html.erb
@@ -1,7 +1,7 @@
-<div class="row">
+<div class="row-fluid">
   <div class="span12">
     <%= link_to "&laquo; Back to creation".html_safe, creation_path(@creation) %>
-    <div class="row">
+    <div class="row-fluid">
       <div class="span3">&nbsp;</div>
       <div class="span6">
         <div id="myCarousel" class="carousel slide">
diff --git a/app/views/photos/show.html.erb b/app/views/photos/show.html.erb
index e3b81f78..9da770c4 100644
--- a/app/views/photos/show.html.erb
+++ b/app/views/photos/show.html.erb
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row-fluid">
   <div class="span12">
     <h1><%= link_to @creation.name, creation_path(@creation) %></h1>
     <%= link_to creation_photo_path(@creation, @photo) do %>
@@ -7,7 +7,7 @@
   </div>
 </div>
 
-<div class="row">
+<div class="row-fluid">
   <div class="span12">
     <ul class="thumbnails">
       <% @creation.photos.each do |photo| %>
diff --git a/app/views/profiles/index.html.erb b/app/views/profiles/index.html.erb
index b7846eac..522de309 100644
--- a/app/views/profiles/index.html.erb
+++ b/app/views/profiles/index.html.erb
@@ -1,28 +1,23 @@
-<% provide(:title, "Cake Artists") -%>
-<div class="row">
-  <div class="span12">
-    <ul class="thumbnails">
-      <% @profiles.each do |profile| %>
-        <li class="span3">
-        <div class="thumbnail">
-          <%= link_to profile_path(profile) do %>
-            <%= avatar_for(profile) %>
-          <% end %>
-          <div class="caption">
-            <h5><%= link_to shrink(profile.name, 20), profile_path(profile) %> <small>(<%= profile.creations_count %>)</small></h5>
-
-            <% if(profile.city.blank?) -%>
-            <h6>somewhere in sugarland</h6>
-            <% else -%>
-            <h6><%= shrink(profile.city, 30) %></h6>
-            <% end -%>
+<div class="row-fluid">
+  <% @profiles.each_slice(6).each do |batch| %>
+    <ul class='thumbnails'>
+      <% batch.each do |profile| %>
+        <li class="span2">
+          <div class="thumbnail">
+            <%= link_to profile_path(profile) do %>
+              <%= avatar_for(profile) %>
+            <% end %>
+            <div class="caption">
+              <h4><%= link_to shrink(profile.name, 12), profile_path(profile) %></h4>
+              <p><%= link_to shrink(profile.city, 20, 'sugarland'), profile_path(profile) %></p>
+              <p><small><%= time_ago_in_words(profile.created_at) %> ago.</small></p>
+            </div>
           </div>
-        </div>
         </li>
       <% end %>
     </ul>
-  </div>
+  <% end %>
 </div>
-<div class="row">
-  <div class="span12 text-center"> <%= paginate @profiles %> </div>
+<div class="row-fluid">
+  <%= render "shared/paging", items: @profiles %>
 </div>
diff --git a/app/views/profiles/show.html.erb b/app/views/profiles/show.html.erb
index db388e93..daa0f7d9 100644
--- a/app/views/profiles/show.html.erb
+++ b/app/views/profiles/show.html.erb
@@ -3,25 +3,43 @@
   <div class="span3">
     <div class="thumbnail">
       <%= avatar_for(@user) %>
-      <div class="caption">
-        <h5><%= @user.name %></h5>
-        <hr>
-        <p><%= @user.city %></p>
-        <% unless @user.website.blank? %>
-          <p><a href="<%= @user.website %>" target="_blank">Website</a></p>
-        <% end %>
-        <% unless @user.twitter.blank? %>
-          <p><a href="https://twitter.com/<%= @user.twitter %>" target="_blank" class="twitter-follow-button" data-show-count="false">Follow @<%= @user.twitter %></a></p>
-          <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
-        <% end %>
-        <% unless @user.facebook.blank? %>
-          <p><a  href="<%= @user.facebook %>" target="_blank"><%= image_tag "f_logo_16x16x32.png", :alt => "Like us on Facebook" %> Like on Facebook</a></p>
-        <% end %>
-      </div>
     </div>
   </div>
   <div class="span9">
     <h1><%= @user.name %> <small>A member since <%= @user.created_at.to_s :foomat %>, with <%= @user.creations.length %> creations.</small> </h1>
-    <%= render "shared/creation_image_gallery" %>
+    <h5><%= @user.name %></h5>
+    <hr>
+    <p><%= @user.city %></p>
+    <% unless @user.website.blank? %>
+      <p><a href="<%= @user.website %>" target="_blank">Website</a></p>
+    <% end %>
+    <% unless @user.twitter.blank? %>
+      <p><a href="https://twitter.com/<%= @user.twitter %>" target="_blank" class="twitter-follow-button" data-show-count="false">Follow @<%= @user.twitter %></a></p>
+      <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
+    <% end %>
+    <% unless @user.facebook.blank? %>
+      <p><a  href="<%= @user.facebook %>" target="_blank"><%= image_tag "f_logo_16x16x32.png", :alt => "Like us on Facebook" %> Like on Facebook</a></p>
+    <% end %>
   </div>
 </div>
+<hr />
+<div class="row-fluid">
+  <% @creations.each_slice(6).each do |batch| %>
+    <ul class='thumbnails'>
+      <% batch.each do |creation| %>
+        <li class="span2">
+          <div class="thumbnail">
+            <%= link_to creation do %>
+              <%= image_tag creation.primary_image.url_for(:thumb) %>
+            <% end %>
+            <div class="caption">
+              <h4><%= link_to shrink(creation.name, 12), creation %></h4>
+              <p><%= link_to shrink(creation.user.name, 20), profile_path(creation.user) %></p>
+              <p><small><%= time_ago_in_words(creation.created_at) %> ago.</small></p>
+            </div>
+          </div>
+        </li>
+      <% end %>
+    </ul>
+  <% end %>
+</div>
diff --git a/app/views/search/index.html.erb b/app/views/search/index.html.erb
index 7737adc6..0520c698 100644
--- a/app/views/search/index.html.erb
+++ b/app/views/search/index.html.erb
@@ -1,5 +1,5 @@
 <% provide(:title, "#{@search}") -%>
-<div class="row">
+<div class="row-fluid">
   <div class="span12">
     <div class="tabbable tabs-left">
       <ul class="nav nav-tabs">
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb
index 92428313..fff2862b 100644
--- a/app/views/sessions/new.html.erb
+++ b/app/views/sessions/new.html.erb
@@ -12,9 +12,9 @@
   });
 </script>
 <% end %>
-<div class="row">
+<div class="row-fluid">
   <div class="span12">
-    <div class="row">
+    <div class="row-fluid">
       <div class="span6 hidden-phone">
         <%= image_tag "cakeside-logo.png" %>
         <div style="padding-left:10px;padding-right:10px;">
diff --git a/app/views/shared/_account_nav.html.erb b/app/views/shared/_account_nav.html.erb
index cc055218..3ee08a15 100644
--- a/app/views/shared/_account_nav.html.erb
+++ b/app/views/shared/_account_nav.html.erb
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row-fluid">
   <div class="span12">
     <ul class="nav nav-tabs">
       <li class="<%= selected == :dashboard ? "active" : "" %>"><%= link_to "Dashboard", my_dashboard_path %></li>
diff --git a/app/views/shared/_creation_image_gallery.html.erb b/app/views/shared/_creation_image_gallery.html.erb
index 6d899acd..8be75a7c 100644
--- a/app/views/shared/_creation_image_gallery.html.erb
+++ b/app/views/shared/_creation_image_gallery.html.erb
@@ -2,10 +2,10 @@
   <% @creations.each do |creation| %>
     <li class="span3">
     <div class="thumbnail">
-      <%= link_to creation, class: 'mix-link', data: { event: 'click-on-thumbnail' } do %>
+      <%= link_to creation do %>
         <img src="<%= creation.primary_image.url_for(:thumb) %>" alt="<%= creation.name %>" style="width:260px;height:180px;" />
       <% end %>
-      <h3><%= link_to short_name(creation, 15), creation, class: 'mix-link', data: { event: 'click-on-title' } %></h3>
+      <h3><%= link_to short_name(creation, 15), creation %></h3>
       <h4><small>By <%= link_to shrink(creation.user.name, 20), profile_path(creation.user) %></small></h4>
       <p>
       <%= link_to creation_favorites_path(:creation_id => creation.id) do %>
diff --git a/app/views/shared/_paging.html.erb b/app/views/shared/_paging.html.erb
index a110d140..d0e59b71 100644
--- a/app/views/shared/_paging.html.erb
+++ b/app/views/shared/_paging.html.erb
@@ -1,3 +1,3 @@
-<div class="row">
+<div class="row-fluid">
   <div class="span12 text-center"> <%= paginate items %> </div>
 </div>
diff --git a/app/views/tutorial_tags/index.html.erb b/app/views/tutorial_tags/index.html.erb
index eaea88b8..351e72da 100644
--- a/app/views/tutorial_tags/index.html.erb
+++ b/app/views/tutorial_tags/index.html.erb
@@ -1,5 +1,5 @@
 <% provide(:title, "Tag, you're it".html_safe) -%>
-<div class="row">
+<div class="row-fluid">
   <div class="span12">
     <% tag_cloud(@tags, %w(btn-mini btn-small btn-large)) do |tag, css_class| %>
       <%= link_to "#{tag.name} x #{tag.count}", { :action => :show, :id => tag.name }, :class => "#{css_class} btn" %>
diff --git a/app/views/tutorial_tags/show.html.erb b/app/views/tutorial_tags/show.html.erb
index 26c20e82..c7dfd8b5 100644
--- a/app/views/tutorial_tags/show.html.erb
+++ b/app/views/tutorial_tags/show.html.erb
@@ -1,48 +1,24 @@
-<% provide(:title, "#{@tag}") -%>
-<% content_for :javascript do -%>
-<script type="text/javascript">  
-  var ready = function(){ 
-    var container = $('#tutorials-div');
-    container.imagesLoaded(function(){
-      container.masonry({ itemSelector : '.span4', isResizable: true });
-    });
-  };
-  $(document).ready(ready);
-</script>
-<% end -%>
-<div class="row">
-  <div class="span9">
-    <h1><%= @total_tutorials %> tutorials tagged <em><%= @tag %></em></h1>
-  </div>
-  <div class="span3">
-    <p class="pull-right"><%= link_to "#{@total_creations} creations", creation_tag_path(@tag) %> &raquo;</p>
-  </div>
-</div>
-<div id="tutorials-div" class="row">
-  <div class="span12">
-    <ul class="thumbnails">
-    <% @tutorials.each do |tutorial| %>
-      <div class="span4">
-        <div class="thumbnail">
-          <img src="<%= tutorial.image_url %>" />
-          <div class="caption">
-            <h3><%= link_to tutorial.heading, tutorial.url, target: "_blank" %> <small><%= tutorial.created_at.to_s :foomat %></small></h3>
-            <p>
-            <% tutorial.tags.each do |tag| -%>
-              <%= link_to tutorial_tag_path(tag.name) do %>
-                <span class="label"><%= tag.name %></span>
-              <% end %>
-            <% end -%>
-            </p>
-            <p><%= tutorial.description %></p>
-            <p><%= link_to "View", tutorial %>View</a></p>
+<% provide(:title, @tag) -%>
+<div class="row-fluid">
+  <% @tutorials.each_slice(6).each do |batch| %>
+    <ul class='thumbnails'>
+      <% batch.each do |tutorial| %>
+        <li class="span2">
+          <div class="thumbnail">
+            <%= link_to tutorial do %>
+              <%= image_tag tutorial.image_url %>
+            <% end %>
+            <div class="caption">
+              <h4><%= link_to shrink(tutorial.heading, 12), tutorial %></h4>
+              <p><%= link_to shrink(tutorial.user.name, 20), profile_path(tutorial.user) %></p>
+              <p><small><%= time_ago_in_words(tutorial.created_at) %> ago.</small></p>
+            </div>
           </div>
-        </div>
-      </div>
-    <% end %>
+        </li>
+      <% end %>
     </ul>
-  </div>
+  <% end %>
 </div>
-<div class="row">
-  <div class="span12 text-center"> <%= paginate @tutorials %> </div>
+<div class="row-fluid">
+  <%= render "shared/paging", items: @tutorials %>
 </div>
diff --git a/app/views/tutorials/edit.html.erb b/app/views/tutorials/edit.html.erb
index 55bced59..513822fd 100644
--- a/app/views/tutorials/edit.html.erb
+++ b/app/views/tutorials/edit.html.erb
@@ -1,5 +1,5 @@
 <% provide(:title, "Edit tutorial") -%>
-<div class="row">
+<div class="row-fluid">
   <h1>Editing tutorial</h1>
   <%= render 'form' %>
 </div>
diff --git a/app/views/tutorials/index.html.erb b/app/views/tutorials/index.html.erb
index 17794fa7..38bc2766 100644
--- a/app/views/tutorials/index.html.erb
+++ b/app/views/tutorials/index.html.erb
@@ -1,34 +1,23 @@
-<% provide(:description, "The latest tutorials") -%>
-<% content_for :javascript do -%>
-<script type="text/javascript">  
-  $(function(){ new Masonry('#tutorials-div').load(); });
-</script>
-<% end -%>
-<div id="tutorials-div" class="row">
-  <div class="span12">
-  <ul class="thumbnails">
-    <% @tutorials.each do |tutorial| %>
-      <div class="span4">
-        <div class="thumbnail">
-          <img src="<%= tutorial.image_url %>" />
-          <div class="caption">
-            <h3><%= link_to tutorial.heading, tutorial.url, target: '_blank' %> <small><%= tutorial.created_at.to_s :foomat %></small></h3>
-            <p>
-            <% tutorial.tags.each do |tag| -%>
-              <%= link_to tutorial_tag_path(tag.name) do %>
-                <span class="label"><%= tag.name %></span>
-              <% end %>
-            <% end -%>
-            </p>
-            <p><%= tutorial.description %></p>
-            <p><%= link_to "View", tutorial, class: 'btn' %></p>
+<div class="row-fluid">
+  <% @tutorials.each_slice(6).each do |batch| %>
+    <ul class='thumbnails'>
+      <% batch.each do |tutorial| %>
+        <li class="span2">
+          <div class="thumbnail">
+            <%= link_to tutorial do %>
+              <%= image_tag tutorial.image_url %>
+            <% end %>
+            <div class="caption">
+              <h4><%= link_to shrink(tutorial.heading, 12), tutorial %></h4>
+              <p><%= link_to shrink(tutorial.user.name, 20), profile_path(tutorial.user) %></p>
+              <p><small><%= time_ago_in_words(tutorial.created_at) %> ago.</small></p>
+            </div>
           </div>
-        </div>
-      </div>
-    <% end %>
-  </ul>
-  </div>
+        </li>
+      <% end %>
+    </ul>
+  <% end %>
 </div>
-<div class="row">
-  <div class="span12 text-center"> <%= paginate @tutorials %> </div>
+<div class="row-fluid">
+  <%= render "shared/paging", items: @tutorials %>
 </div>
diff --git a/app/views/tutorials/new.html.erb b/app/views/tutorials/new.html.erb
index 7c1f3914..cae294e8 100644
--- a/app/views/tutorials/new.html.erb
+++ b/app/views/tutorials/new.html.erb
@@ -1,9 +1,9 @@
 <% provide(:title, "Share a tutorial link") -%>
-<div class="row">
+<div class="row-fluid">
   <div class="span12">
     <h1>Share a tutorial link</h1>
   </div>
 </div>
-<div class="row">
+<div class="row-fluid">
   <%= render 'form' %>
 </div>
diff --git a/app/views/tutorials/show.html.erb b/app/views/tutorials/show.html.erb
index 853e6029..20f867df 100644
--- a/app/views/tutorials/show.html.erb
+++ b/app/views/tutorials/show.html.erb
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row-fluid">
   <div class="span12">
     <div class="thumbnail">
       <img src="<%= @tutorial.image_url %>" />