diff --git a/.gitmodules b/.gitmodules
index 95a76e1f..20fa20e2 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -4,4 +4,6 @@
 [submodule "extlib/pdf.js"]
 	path = extlib/pdf.js
 	url = git://github.com/mozilla/pdf.js.git
-
+[submodule "extlib/skeleton"]
+	path = extlib/skeleton
+	url = git://github.com/dhg/Skeleton.git
diff --git a/extlib/skeleton b/extlib/skeleton
new file mode 160000
index 00000000..7ab68209
--- /dev/null
+++ b/extlib/skeleton
@@ -0,0 +1 @@
+Subproject commit 7ab682091d1032035cfcb668e6bd4b465bfa4679
diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css
index 7b422167..f998bbb3 100644
--- a/mediagoblin/static/css/base.css
+++ b/mediagoblin/static/css/base.css
@@ -107,7 +107,7 @@ input, textarea {
 
 .container {
   margin: auto;
-  width: 96%;
+/*  width: 96%;*/
   max-width: 940px;
 }
 
@@ -275,6 +275,22 @@ text-align: center;
 	margin-left: 8px;
 }
 
+.alpha {
+  margin-left:0;
+}
+
+.omega {
+  margin-right:0;
+}
+
+.heaven {
+  margin-top:0;
+}
+
+.hell {
+  margin-bottom:0;
+}
+
 /* forms */
 
 .form_box,.form_box_xl {
@@ -820,7 +836,7 @@ pre {
   header {
     text-align: center;
   }
-  
+
   .header_right {
     margin-right: 2%;
     float: none;
@@ -829,12 +845,32 @@ pre {
   a.logo {
     margin-left: 2%;
   }
+  
+}
+@media screen and (min-width: 960px) {
+  .container .three.columns {
+    width:180px;
+    margin-left:3px;
+    margin-right:3px;
+  }
+}
+@media only screen and (min-width: 768px) and (max-width: 959px) {
+  .container .three.columns {
+    width:147px;
+    margin-left:2px;
+    margin-right:2px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .thumb_row {
+    margin-bottom: 0;
+  }
 }
-
 @media screen and (max-width: 570px) {
   .media_thumbnail {
     width: 29%;
   }
+
 }
 
 @media screen and (max-width: 380px) {
diff --git a/mediagoblin/static/css/extlib/skeleton.css b/mediagoblin/static/css/extlib/skeleton.css
new file mode 120000
index 00000000..6ecf4919
--- /dev/null
+++ b/mediagoblin/static/css/extlib/skeleton.css
@@ -0,0 +1 @@
+../../../../extlib/skeleton/stylesheets/skeleton.css
\ No newline at end of file
diff --git a/mediagoblin/static/extlib/skeleton b/mediagoblin/static/extlib/skeleton
new file mode 120000
index 00000000..737bfce4
--- /dev/null
+++ b/mediagoblin/static/extlib/skeleton
@@ -0,0 +1 @@
+../../../extlib/skeleton/
\ No newline at end of file
diff --git a/mediagoblin/templates/mediagoblin/base.html b/mediagoblin/templates/mediagoblin/base.html
index 6d49ff47..ecc24f89 100644
--- a/mediagoblin/templates/mediagoblin/base.html
+++ b/mediagoblin/templates/mediagoblin/base.html
@@ -31,19 +31,12 @@
     <title>{% block title %}{{ app_config['html_title'] }}{% endblock %}</title>
     <link rel="stylesheet" type="text/css"
           href="{{ request.staticdirect('/css/extlib/reset.css') }}"/>
+    <link rel="stylesheet" type="text/css"
+          href="{{ request.staticdirect('/css/extlib/skeleton.css') }}"/>
     <link rel="stylesheet" type="text/css"
           href="{{ request.staticdirect('/css/base.css') }}"/>
     <link rel="shortcut icon"
           href="{{ request.staticdirect('/images/goblin.ico') }}" />
-    <script type="text/javascript"
-            src="{{ request.staticdirect('/js/extlib/jquery.js') }}"></script>
-    <script type="text/javascript"
-            src="{{ request.staticdirect('/js/header_dropdown.js') }}"></script>
-    <script type="text/javascript"
-            src="{{ request.staticdirect('/js/notifications.js') }}"></script>
-    <script>
-      var mark_all_comments_seen_url = "{{ request.urlgen('mediagoblin.notifications.mark_all_comment_notifications_seen') }}"
-    </script>
 
     {# For clarification, the difference between the extra_head.html template
      # and the head template hook is that the former should be used by
@@ -180,5 +173,14 @@
       </div>
     {%- endblock mediagoblin_body %}
     {% include 'mediagoblin/bits/body_end.html' %}
+    <script type="text/javascript"
+            src="{{ request.staticdirect('/js/extlib/jquery.js') }}"></script>
+    <script type="text/javascript"
+            src="{{ request.staticdirect('/js/header_dropdown.js') }}"></script>
+    <script type="text/javascript"
+            src="{{ request.staticdirect('/js/notifications.js') }}"></script>
+    <script>
+      var mark_all_comments_seen_url = "{{ request.urlgen('mediagoblin.notifications.mark_all_comment_notifications_seen') }}"
+    </script>
   </body>
 </html>
diff --git a/mediagoblin/templates/mediagoblin/utils/collection_gallery.html b/mediagoblin/templates/mediagoblin/utils/collection_gallery.html
index dfe2ebe2..64b30815 100644
--- a/mediagoblin/templates/mediagoblin/utils/collection_gallery.html
+++ b/mediagoblin/templates/mediagoblin/utils/collection_gallery.html
@@ -19,15 +19,15 @@
 {% from "mediagoblin/utils/pagination.html" import render_pagination %}
 
 {% macro media_grid(request, collection_items, col_number=5) %}
-  <table class="thumb_gallery">
+  <div class="thumb_gallery">
     {% for row in collection_items|batch(col_number) %}
-      <tr class="thumb_row
+      <div class="row thumb_row
                  {%- if loop.first %} thumb_row_first
                  {%- elif loop.last %} thumb_row_last{% endif %}">
         {% for item in row %}
           {% set media_entry = item.get_media_entry %}
           {% set entry_url = media_entry.url_for_self(request.urlgen) %}
-          <td class="media_thumbnail thumb_entry
+          <div class="three columns media_thumbnail thumb_entry
                      {%- if loop.first %} thumb_entry_first
                      {%- elif loop.last %} thumb_entry_last{% endif %}">
             <a href="{{ entry_url }}">
@@ -49,11 +49,11 @@
 	        {%- trans %}(remove){% endtrans -%}
 	      </a>
 	    {% endif %}
-          </td>
+          </div>
         {% endfor %}
-      </tr>
+      </div>
     {% endfor %}
-  </table>
+  </div>
 {%- endmacro %}
 
 {#
diff --git a/mediagoblin/templates/mediagoblin/utils/object_gallery.html b/mediagoblin/templates/mediagoblin/utils/object_gallery.html
index d328b552..1b4a15ed 100644
--- a/mediagoblin/templates/mediagoblin/utils/object_gallery.html
+++ b/mediagoblin/templates/mediagoblin/utils/object_gallery.html
@@ -19,14 +19,14 @@
 {% from "mediagoblin/utils/pagination.html" import render_pagination %}
 
 {% macro media_grid(request, media_entries, col_number=5) %}
-  <table class="thumb_gallery">
+  <div class="thumb_gallery">
     {% for row in media_entries|batch(col_number) %}
-      <tr class="thumb_row
+      <div class="row thumb_row
                  {%- if loop.first %} thumb_row_first
                  {%- elif loop.last %} thumb_row_last{% endif %}">
         {% for entry in row %}
           {% set entry_url = entry.url_for_self(request.urlgen) %}
-          <td class="media_thumbnail thumb_entry
+          <div class="three columns media_thumbnail thumb_entry
                      {%- if loop.first %} thumb_entry_first
                      {%- elif loop.last %} thumb_entry_last{% endif %}">
             <a href="{{ entry_url }}">
@@ -35,11 +35,11 @@
             {% if entry.title %}
               <a class="thumb_entry_title" href="{{ entry_url }}">{{ entry.title }}</a>
             {% endif %}
-          </td>
+          </div>
         {% endfor %}
-      </tr>
+      </div>
     {% endfor %}
-  </table>
+  </div>
 {%- endmacro %}
 
 {#