Replaced Blueprint by Skeleton

RobertAudi · Sep 15, 2011 · 356beec · 356beec
1 parent 97e4392
commit 356beec
Show file tree

Hide file tree

Showing 43 changed files with 824 additions and 1,534 deletions.
diff --git a/app/assets/stylesheets/admin/base.css b/app/assets/stylesheets/admin/base.css
@@ -2,42 +2,67 @@
  *=require_self
  *=require_directory .
  */
+/* Global */
+/* Taken from the Blueprint Framework */
+/*FIXME: There is a bug where the first element of the table gets the wrong color.*/
+table {border-collapse:separate;border-spacing:0;}
+caption, th, td {text-align:left;font-weight:normal;float:none !important;}
+table, th, td {vertical-align:middle;}
+table {margin-bottom:1.4em;width:100%;}
+th {font-weight:bold;}
+thead th {background:#c3d9ff;}
+th, td, caption {padding:4px 10px 4px 5px;}
+tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}
+tfoot {font-style:italic;}
+/*---------------------------------------------------------------------------*/
+
 /* Header */
 header
 {
-  background-color: #333;
+  background-color: #2a2a2a;
   height: 40px;
-  color: #fff;
+  border-top: 3px solid #000;
+  border-bottom: 2px solid #000;
 }
-
 header section
 {
-  font-size: 120%;
-  border-bottom: 2px solid #262626;
-  height: 37px;
+  width: 960px;
+  margin: 0 auto;
+  padding: 10px;
+  color: #eee;
 }
-
-header nav
+header section nav p
 {
-  width: 950px;
-  margin: 0 auto;
-  padding-top: 10px;
+  margin: 0;
+}
+header section nav p.left
+{
+  float: left;
+  margin-left: 10px;
+}
+header section nav p.right
+{
+  float: right;
+  margin-right: 10px;
 }
 
-nav p
+/* Header Links */
+header a:link,
+header a:visited
 {
-  margin: 0;
-  padding-right: 20px;
-  padding-left:  20px;
+  color: #eee;
+}
+header a:hover,
+header a:active
+{
+  color: #c3c3c3;
 }
 
-/* Main content */
-.container section
+/* Navigation menu */
+.container > nav
 {
-  font-size: 110%;
-  padding: 20px;
-  background-color: #dfdfdf;
-
+  background-color: #373737;
+
   /* Rounded Corners on the bottom */
   /* Bottom right */
   -moz-border-radius-bottomright: 10px;
@@ -47,57 +72,45 @@ nav p
   -moz-border-radius-bottomleft: 10px;
   -webkit-border-bottom-left-radius: 10px;
   border-bottom-left-radius: 10px;
-}
 
-/* Form errors */
-#error_explanation
-{
-  width: 400px;
-  border: 2px solid red;
-  padding: 7px;
-  padding-bottom: 12px;
   margin-bottom: 20px;
-  background-color: #f0f0f0;
 }
-
-#error_explanation h2 {
-  text-align: left;
-  font-weight: bold;
-  padding: 5px 5px 5px 15px;
-  font-size: 12px;
-  margin: -7px;
-  background-color: #c00;
-  color: #fff;
+.container > nav ul li
+{
+  diplay: inline;
 }
-
-#error_explanation p {
-  color: #333;
-  margin-bottom: 0;
-  padding: 5px;
+.container > nav ul li a
+{
+  display: block;
+  float: left;
+  margin: -5px 20px 10px 20px;
 }
 
-#error_explanation ul li {
-  font-size: 12px;
-  list-style: square;
+/*Navigation Links*/
+.container > nav a:link,
+.container > nav a:visited
+{
+  color: #eee;
 }
-
-.field_with_errors {
-  padding: 2px;
-  background-color: red;
-  display: table;
+.container > nav a:hover,
+.container > nav a:active
+{
+  color: #c3c3c3;
 }
 
-.field_with_errors label {
-  color: #fff;
+/* Main content */
+section#main-content
+{
 }
 
-/* Rails debug dump */
-pre.debug_dump
+/* Debug Dump */
+.debug_dump
 {
-  background-color: #ffdcdc;
+  margin: 20px 0;
   padding: 10px;
+  background-color: #fcc;
   border: 1px solid red;
-  
+
   /* Rounded corners */
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;

diff --git a/app/assets/stylesheets/admin/dashboard.css b/app/assets/stylesheets/admin/dashboard.css
@@ -1,22 +0,0 @@
-section#posts,
-section#drafts
-{
-  width: 400px;
-  border: 1px solid #333;
-  margin-bottom: 10px;
-
-  /* Rounded corners */
-  -moz-border-radius:    10px;
-  -webkit-border-radius: 10px;
-  -khtml-border-radius:  10px;
-  border-radius:         10px;
-}
-
-section#posts .date,
-section#drafts .date
-{
-  font-style: italic;
-  font-size: 80%;
-  margin-top: -20px;
-  margin-bottom: 10px;
-}

diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb
@@ -1,10 +1,40 @@
 <!DOCTYPE html>
-<html>
+<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
+<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
+<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
+<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
 <head>
+  <%# Basic Page Needs %>
+  <%# ================================================== %>
+  <meta charset="utf-8">
   <title><%= title %></title>
-  <%= stylesheet_link_tag "blueprint/screen", "admin/base" %>
-  <%= stylesheet_link_tag "blueprint/print", :media => "print" %>
+
+  <%# HTML Shiv for IE < 9 %>
+  <%# ================================================== %>
+  <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+  <![endif]-->
+
+  <%# Skeleton Framework %>
+  <%# ================================================== %>
+  <%= stylesheet_link_tag "base", "skeleton", "layout" %>
+
+  <%# My CSS %>
+  <%# ================================================== %>
+  <%= stylesheet_link_tag "admin/base" %>
+
+  <%# Favicons %>
+  <%# ================================================== %>
+  <%#<link rel="shortcut icon" href="images/favicon.ico">%>
+  <%#<link rel="apple-touch-icon" href="images/apple-touch-icon.png">%>
+  <%#<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">%>
+  <%#<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">%>
+
+
+  <%# JS %>
+  <%# ================================================== %>
   <%= javascript_include_tag "application" %>
+
   <%= csrf_meta_tags %>
 </head>
 <body>
@@ -25,7 +55,14 @@
   </header>
 
   <div class="container">
-    <section>
+    <nav class="sixteen columns">
+      <ul>
+        <li><%= link_to "Dashboard", dashboard_path %></li>
+        <li><%= link_to "Posts", admin_posts_path %></li>
+        <li><%= link_to "Users", admin_users_path %></li>
+      </ul>
+    </nav>
+    <section id="main-content" class="sixteen columns">
       <% flash.each do |key, value| %>
         <div class="flash <%= key %>">
           <%= value %>
@@ -34,8 +71,9 @@
 
       <%= yield %>
     </section>
+    <br class="clear" />
 
     <%= debug params if Rails.env.development? %>
-  </div>
+  </div> <%# End of div#container %>
 </body>
 </html>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,12 +1,42 @@
 <!DOCTYPE html>
-<html>
+<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
+<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
+<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
+<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
 <head>
+
+  <%# Basic Page Needs %>
+  <%# ================================================== %>
+  <meta charset="utf-8">
   <title><%= title %></title>
-  <%= stylesheet_link_tag "blueprint/screen", "application" %>
+
+  <%# HTML Shiv for IE < 9 %>
+  <%# ================================================== %>
+  <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+  <![endif]-->
+
+  <%# Skeleton Framework %>
+  <%# ================================================== %>
+  <%= stylesheet_link_tag "base", "skeleton", "layout" %>
+
+  <%# My CSS %>
+  <%# ================================================== %>
+  <%= stylesheet_link_tag "application" %>
+
+  <%# Favicons %>
+  <%# ================================================== %>
+  <%#<link rel="shortcut icon" href="images/favicon.ico">%>
+  <%#<link rel="apple-touch-icon" href="images/apple-touch-icon.png">%>
+  <%#<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">%>
+  <%#<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">%>
+
   <%= csrf_meta_tags %>
 </head>
 <body>
-  <%= yield %>
-  <%= debug params if Rails.env.development? %>
+  <div class="container">
+    <%= yield %>
+    <%= debug params if Rails.env.development? %>
+  </div>
 </body>
 </html>
diff --git a/vendor/assets/images/apple-touch-icon-114x114.png b/vendor/assets/images/apple-touch-icon-114x114.png
diff --git a/vendor/assets/images/apple-touch-icon-72x72.png b/vendor/assets/images/apple-touch-icon-72x72.png
diff --git a/vendor/assets/images/apple-touch-icon.png b/vendor/assets/images/apple-touch-icon.png
diff --git a/vendor/assets/images/favicon.ico b/vendor/assets/images/favicon.ico
diff --git a/vendor/assets/javascripts/tabs.js b/vendor/assets/javascripts/tabs.js
@@ -0,0 +1,42 @@
+/*
+* Skeleton V1.1
+* Copyright 2011, Dave Gamache
+* www.getskeleton.com
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+* 8/17/2011
+*/
+
+
+$(document).ready(function() {
+
+	/* Tabs Activiation
+	================================================== */
+
+	var tabs = $('ul.tabs');
+
+	tabs.each(function(i) {
+
+		//Get all tabs
+		var tab = $(this).find('> li > a');
+		tab.click(function(e) {
+
+			//Get Location of tab's content
+			var contentLocation = $(this).attr('href');
+
+			//Let go if not a hashed one
+			if(contentLocation.charAt(0)=="#") {
+
+				e.preventDefault();
+
+				//Make Tab Active
+				tab.removeClass('active');
+				$(this).addClass('active');
+
+				//Show Tab Content & add active class
+				$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
+
+			}
+		});
+	});
+});
diff --git a/vendor/assets/robots.txt b/vendor/assets/robots.txt
@@ -0,0 +1,5 @@
+# www.robotstxt.org/
+# www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156449
+
+User-agent: *
+