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;
+}
+