todo_app

Gemfile

@@ -3,6 +3,8 @@ ruby '2.2.0'
 gem 'rails', '4.2.0'
 gem 'pg'
 gem 'sass-rails', '~> 5.0'
+gem 'font-awesome-sass'
+gem 'foundation-rails'
 gem 'uglifier', '>= 1.3.0'
 gem 'coffee-rails', '~> 4.1.0'
 gem 'jquery-rails'

Gemfile.lock

@@ -93,7 +93,12 @@ GEM
     faker (1.4.3)
       i18n (~> 0.5)
     ffi (1.9.6)
+    font-awesome-sass (4.3.0)
+      sass (~> 3.2)
     formatador (0.2.5)
+    foundation-rails (5.4.5.0)
+      railties (>= 3.1.0)
+      sass (>= 3.2.0)
     globalid (0.3.0)
       activesupport (>= 4.1.0)
     guard (2.11.1)
@@ -285,6 +290,8 @@ DEPENDENCIES
   dotenv-rails
   factory_girl_rails (~> 4.0)
   faker
+  font-awesome-sass
+  foundation-rails
   guard
   guard-rails
   jbuilder (~> 2.0)

app/assets/javascripts/application.js

@@ -12,5 +12,7 @@
 //
 //= require jquery
 //= require jquery_ujs
+= require foundation
 //= require turbolinks
 //= require_tree .
+$(function(){ $(document).foundation(); });

app/assets/stylesheets/application.css

@@ -1,15 +1,61 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any styles
- * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
- * file per style scope.
- *
- *= require_tree .
- *= require_self
- */
+/*  SECTIONS  */
+body {
+  background-color: rgba(136, 148, 232, 0.4)
+}
+.section {
+  clear: both;
+  padding: 0px;
+  margin: 0px;
+  background-color: rgba(6, 19, 132, 1);
+}
+
+/*  COLUMN SETUP  */
+.col {
+  display: block;
+  float:left;
+  margin: 1% 0 1% 1.6%;
+  text-align: center;
+  color: white;
+  font-family: papyrus;
+}
+.col:first-child { margin-left: 0; }
+
+/*  GROUPING  */
+.group:before,
+.group:after { content:""; display:table; }
+.group:after { clear:both;}
+.group { zoom:1; /* For IE 6/7 */ }
+/*  GRID OF THREE  */
+.span_3_of_3 { width: 100%; }
+.span_2_of_3 { width: 66.13%; }
+.span_1_of_3 { width: 32.26%; }
+
+/*  GO FULL WIDTH BELOW 480 PIXELS */
+@media only screen and (max-width: 480px) {
+  .col {  margin: 1% 0 1% 0%; }
+  .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
+}
+
+.tasks_style {
+  border: solid 6px rgba(6, 19, 132, 0.7);
+  margin-left: 25%;
+  margin-right: 25%;
+  margin-top: 8%;
+  background-color: white;
+  padding: 15px;
+  text-align: center;
+}
+
+h2 .tasks_style {
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.unstyled {
+  list-style: none;
+}
+
+li .task_style {
+  list-style: inline;
+}
+