Add bootstrap

celeritas17 · Mar 24, 2013 · 8d6c0bf · 8d6c0bf
1 parent 2ed5a48
commit 8d6c0bf
Show file tree

Hide file tree

Showing 17 changed files with 154 additions and 250 deletions.
diff --git a/Gemfile b/Gemfile
@@ -15,4 +15,5 @@ group :assets do
   gem 'sass-rails',   '~> 3.2.3'
   gem 'coffee-rails', '~> 3.2.1'
   gem 'uglifier', '>= 1.0.3'
+  gem 'bootstrap-sass', '~> 2.3.1.0'
 end
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -29,6 +29,8 @@ GEM
       i18n (~> 0.6)
       multi_json (~> 1.0)
     arel (3.0.2)
+    bootstrap-sass (2.3.1.0)
+      sass (~> 3.2)
     builder (3.0.4)
     coffee-rails (3.2.2)
       coffee-script (>= 2.2.0)
@@ -105,6 +107,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  bootstrap-sass (~> 2.3.1.0)
   coffee-rails (~> 3.2.1)
   jquery-rails
   pg

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -12,4 +12,5 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require bootstrap
 //= require_tree .
diff --git a/app/assets/javascripts/pages.js.coffee b/app/assets/javascripts/pages.js.coffee
@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
diff --git a/app/assets/stylesheets/pages.css.scss b/app/assets/stylesheets/pages.css.scss
@@ -0,0 +1,3 @@
+// Place all the styles related to the Pages controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
diff --git a/app/assets/stylesheets/styles.css.scss b/app/assets/stylesheets/styles.css.scss
@@ -0,0 +1,51 @@
+$navbarBackgroundHighlight: #29264d;
+$navbarBackground: #29264d;
+
+@import 'bootstrap';
+@import 'bootstrap-responsive';
+
+body{
+	font-family: arial,helvetica,sans-serif;
+}
+
+a{
+	color: $grayLight;
+}
+
+.hero-unit{
+	background-color: $purple;
+}
+
+.footer{
+	margin-top:100px;
+	margin-left:45%;
+	color: $grayLight;
+	a{
+		color: $gray;
+	}
+}
+
+.container{
+	color:black;
+}
+
+.navbar-inner{
+	@include box-shadow(none !important);
+	border:0;
+}
+
+.color-override1{
+	color: #8a8a8a !important;	
+}
+
+.color-override2{
+	color: #bfbfbf !important;	
+}
+
+.hero-text{
+	text-align: center;
+}
+
+.btn-primary{
+	background-color: $purple;
+}
diff --git a/app/controllers/pages_controller.rb b/app/controllers/pages_controller.rb
@@ -0,0 +1,6 @@
+class PagesController < ApplicationController
+  def home
+  end
+  def about
+  end
+end
diff --git a/app/helpers/pages_helper.rb b/app/helpers/pages_helper.rb
@@ -0,0 +1,2 @@
+module PagesHelper
+end
diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb
@@ -0,0 +1,6 @@
+<div class="footer">
+	<small>
+		&copy;2013 A <%= link_to "Ryan Koven", "http://ryankoven.com"
+		%> Production
+	</small>
+</div>
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
@@ -0,0 +1,27 @@
+<div class="navbar" "navbar-fixed-top">
+  <div class="navbar-inner">
+    <div class="container">
+
+      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
+      <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>
+
+      <!-- Be sure to leave the brand out there if you want it shown -->
+      <a class="brand color-override2" href="http://haikuremixproject.com">Haiku Remix</a>
+
+      <!-- Everything you want hidden at 940px or less, place within here -->
+      <div class="nav-collapse collapse">
+          <ul class="nav"> 
+  	        <li><%= link_to "Home", root_path, class: "color-override1" %></li>
+    			  <li><%= link_to "Why", about_path, class: "color-override1" %></li>
+  		    </ul>
+          <ul class="nav pull-right">
+            <li><%= link_to "Login", "#", class: "color-override1" %></li>
+          </ul>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,14 +1,18 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <title>FirstProject</title>
-  <%= stylesheet_link_tag    "application", :media => "all" %>
-  <%= javascript_include_tag "application" %>
-  <%= csrf_meta_tags %>
-</head>
-<body>
+	<head>
+		  <title>Haikus</title>
+		  <%= stylesheet_link_tag    "application", :media => "all" %>
+		  <%= javascript_include_tag "application" %>
+		  <%= csrf_meta_tags %>
+	</head>
+	<body>
 
-<%= yield %>
+		<%= render "layouts/header" %>
+		<div class="container">
+			<%= yield %>
+		</div>
+		<%= render "layouts/footer" %>
 
-</body>
+	</body>
 </html>
diff --git a/app/views/pages/about.html.erb b/app/views/pages/about.html.erb
@@ -0,0 +1,9 @@
+
+
+<h1>About</h1>
+
+<p>Haikus are <%= link_to "fun", "http://haikuremixproject.com"%>
+
+</p>
+
+
diff --git a/app/views/pages/home.html.erb b/app/views/pages/home.html.erb
@@ -0,0 +1,14 @@
+
+<div class="center hero-unit">
+	<h1>Time for <%= link_to "Haikus", "http://haikuremixproject.com" %> </h1>
+	<p class="hero-text">The Cold of Winter
+	<br />
+	So Overwhelming in Might
+	<br />
+	Still Recedes with Time.
+	</p>
+
+	<p>
+		<%= link_to "Remix", "#", class: "btn btn-large btn-primary remix" %>
+	</p>
+</div>
diff --git a/config/routes.rb b/config/routes.rb
@@ -1,4 +1,6 @@
 FirstProject::Application.routes.draw do
+  root :to => 'pages#home'
+  get 'about' => 'pages#about'
   # The priority is based upon order of creation:
   # first created -> highest priority.