add sass and compass to project

kerpekri · Jan 14, 2017 · 3031f15 · 3031f15
1 parent e9318a6
commit 3031f15
Show file tree

Hide file tree

Showing 17 changed files with 201 additions and 57 deletions.
diff --git a/.sass-cache/8b1de0fb964996dfca872842620703baaa5efa9b/_utilities.scssc b/.sass-cache/8b1de0fb964996dfca872842620703baaa5efa9b/_utilities.scssc
diff --git a/.sass-cache/ab6f5670ca5ba22fe1805dd4124bed43d8ec6f85/ie.sassc b/.sass-cache/ab6f5670ca5ba22fe1805dd4124bed43d8ec6f85/ie.sassc
diff --git a/.sass-cache/ab6f5670ca5ba22fe1805dd4124bed43d8ec6f85/print.sassc b/.sass-cache/ab6f5670ca5ba22fe1805dd4124bed43d8ec6f85/print.sassc
diff --git a/.sass-cache/ab6f5670ca5ba22fe1805dd4124bed43d8ec6f85/screen.sassc b/.sass-cache/ab6f5670ca5ba22fe1805dd4124bed43d8ec6f85/screen.sassc
diff --git a/.sass-cache/c17044e14c0b02252815f0ff968911ec47c759ba/_reset.scssc b/.sass-cache/c17044e14c0b02252815f0ff968911ec47c759ba/_reset.scssc
diff --git a/Gemfile b/Gemfile
@@ -1,4 +1,10 @@
 source 'https://rubygems.org'
 
+# framework
 gem 'sinatra'
-gem 'thin'
+
+# web server
+gem 'thin'
+
+# css extension
+gem 'sass', '~> 3.4', '>= 3.4.21'
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -6,6 +6,7 @@ GEM
     rack (1.6.5)
     rack-protection (1.5.3)
       rack
+    sass (3.4.21)
     sinatra (1.4.7)
       rack (~> 1.5)
       rack-protection (~> 1.4)
@@ -20,6 +21,7 @@ PLATFORMS
   x64-mingw32
 
 DEPENDENCIES
+  sass (~> 3.4, >= 3.4.21)
   sinatra
   thin
 

diff --git a/config.rb b/config.rb
@@ -0,0 +1,20 @@
+require 'compass/import-once/activate'
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "stylesheets"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "javascripts"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+preferred_syntax = :sass
diff --git a/index.html b/index.html
@@ -14,6 +14,14 @@
 		<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
 		<link rel="stylesheet" href="css/style.css">
 
+        <!-- COMPASS / SASS INCLUDES -->
+        <link href="/public/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
+        <link href="/public/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
+        <!--[if IE]>
+        <link href="/public/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css"/>
+        <![endif]-->
+        <!-- COMPASS / SASS INCLUDES -->
+
 		<!--Let browser know website is optimized for mobile-->
 		<title>Random letter generator | Alphabet App</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

diff --git a/public/css/style.css b/public/css/style.css
@@ -1,9 +1,10 @@
-body { 
-	color: #F3FFF8;
-	background-color: #3ECAFF;
-	overflow-x:hidden;
-	overflow-y:hidden;
+body {
+    color: #F3FFF8;
+    background-color: #3ECAFF;
+    overflow-x: hidden;
+    overflow-y: hidden;
 }
+
 @font-face {
     font-family: ReemKufi-Regular;
     src: url(fonts/ReemKufi-Regular.ttf);
@@ -14,16 +15,16 @@ div {
 }
 
 h1#body_title {
-	text-align: center;
-	font-size: 300px;
-	padding-top: 10%;
-	padding-bottom: 10%;
+    text-align: center;
+    font-size: 300px;
+    padding-top: 10%;
+    padding-bottom: 10%;
 }
 
 i#rotation_arrow {
-	text-align: center;
-	font-size: 2em;
-	color:blue;
+    text-align: center;
+    font-size: 2em;
+    color: blue;
 }
 
 button#rotation_arrow {
@@ -68,49 +69,60 @@ button#rotation_arrow {
 
 /* =Preloader */
 #preloader {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: 101;
-  background-color: #212121;
-  color: #ffffff; }
-  #preloader .txt {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 101;
+    background-color: #212121;
+    color: #ffffff;
+}
+
+#preloader .txt {
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
-        -ms-transform: translate(-50%, -50%);
-            transform: translate(-50%, -50%);
-            }
-  #preloader .txt-perc {
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+
+#preloader .txt-perc {
     font-size: 20px;
     font-family: 'ReemKufi-Regular';
     opacity: 1;
     margin: 0 0 6px 0;
     max-width: 400px;
-    text-align: center; }
-  #preloader .progress {
+    text-align: center;
+}
+
+#preloader .progress {
     width: 100px;
     height: 10px;
     background-color: rgba(255, 255, 255, 0.2);
-    margin: 0 auto 15px auto; }
-    #preloader .progress span {
-      display: block;
-      width: 0;
-      height: 100%;
-      background-color: rgba(255, 255, 255, 0.8); }
-  #preloader.is-hidden {
+    margin: 0 auto 15px auto;
+}
+
+#preloader .progress span {
+    display: block;
+    width: 0;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.8);
+}
+
+#preloader.is-hidden {
     visibility: hidden;
     opacity: 0;
     display: none;
-    }
+}
 
 .is-loading {
-  overflow: hidden; }
+    overflow: hidden;
+}
 
 .loaded {
     display: none;
 }
+
 .btn-floating img {
     width: inherit;
     display: inline-block;

diff --git a/public/js/alphabet.js b/public/js/alphabet.js
@@ -1,5 +1,5 @@
-$(function() {
-    cookieExists = getCookie();
+$(function () {
+    var cookieExists = getCookie();
 
     if (cookieExists == null || cookieExists == undefined) {
         $("#preloader").removeClass("hidden");
@@ -10,29 +10,29 @@ $(function() {
 
     }
 
-	$("#rotation_arrow").click(function() {
-	    var letter_list = "abcdefghijklmnopqrstuvwxyz".toUpperCase();
+    $("#rotation_arrow").click(function () {
+        var letter_list = "abcdefghijklmnopqrstuvwxyz".toUpperCase();
         var random_letter = generate_letter(letter_list);
         insert_letter(random_letter);
     });
 
-    function setCookie () {
-        Cookies.set('alphabetApp', 'visited', { expires: 0.1, path: '' });
-    };
+    function setCookie() {
+        Cookies.set('alphabetApp', 'visited', {expires: 0.1, path: ''});
+    }
 
-    function getCookie () {
+    function getCookie() {
         return Cookies.get('alphabetApp');
-    };
+    }
 
-	function insert_letter(random_letter) {
-		var text = $('h1#body_title').text();
-		$("h1#body_title").replaceWith('<h1 id=body_title>' + random_letter + '</h1>');
-	};
+    function insert_letter(random_letter) {
+        var bodyTitle = $('h1#body_title');
+        bodyTitle.replaceWith('<h1 id=body_title>' + random_letter + '</h1>');
+    }
 
     function generate_letter(letter_list) {
-    	// add condition that previous letter dont generate again
-		return letter_list[Math.floor(Math.random() * letter_list.length)];
-    };
+        // add condition that previous letter dont generate again
+        return letter_list[Math.floor(Math.random() * letter_list.length)];
+    }
 
     function loadLoadingBar() {
         var widthOfLoadingBar = 0;
@@ -48,19 +48,20 @@ $(function() {
             widthOfLoadingBar = widthOfLoadingBar + incrementWidthValueBy;
             document.getElementById('progress_span').style.width = widthOfLoadingBar + '%';
         }, incrementSpeedValue);
-    };
+    }
 
     function loadComplete() {
         // preloader out
         var preloaderOutTl = new TimelineMax();
+        var preloaderElement = $('#preloader');
 
         preloaderOutTl
-            .to($('.progress'), 0.3, {y: 100, autoAlpha: 0, ease:Back.easeIn})
-            .to($('.txt-perc'), 0.3, {y: 100, autoAlpha: 0, ease:Back.easeIn}, 0.1)
+            .to($('.progress'), 0.3, {y: 100, autoAlpha: 0, ease: Back.easeIn})
+            .to($('.txt-perc'), 0.3, {y: 100, autoAlpha: 0, ease: Back.easeIn}, 0.1)
             .set($('body'), {className: '-=is-loading'})
-            .to($('#preloader'), 0.7, {yPercent: 100, ease:Power4.easeInOut})
-            .set($('#preloader'), {className: '+=is-hidden'});
+            .to(preloaderElement, 0.7, {yPercent: 100, ease: Power4.easeInOut})
+            .set(preloaderElement, {className: '+=is-hidden'});
 
         return preloaderOutTl;
-    };
+    }
 });
diff --git a/public/sass/ie.sass b/public/sass/ie.sass
@@ -0,0 +1,6 @@
+/*
+  Welcome to Compass. Use this file to write IE specific override styles.
+  Import this file using the following HTML or equivalent:
+  <!--[if IE]>
+    <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
+  <![endif]-->
diff --git a/public/sass/print.sass b/public/sass/print.sass
@@ -0,0 +1,6 @@
+/*
+  Welcome to Compass. Use this file to define print styles.
+  Import this file using the following HTML or equivalent:
+  <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
+  
+
diff --git a/public/sass/screen.sass b/public/sass/screen.sass
@@ -0,0 +1,7 @@
+/*
+  Welcome to Compass.
+  In this file you should write your main styles. (or centralize your imports)
+  Import this file using the following HTML or equivalent:
+  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
+
+@import compass/reset
diff --git a/public/stylesheets/ie.css b/public/stylesheets/ie.css
@@ -0,0 +1,5 @@
+/* Welcome to Compass. Use this file to write IE specific override styles.
+ * Import this file using the following HTML or equivalent:
+ * <!--[if IE]>
+ *   <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
+ * <![endif]--> */
diff --git a/public/stylesheets/print.css b/public/stylesheets/print.css
@@ -0,0 +1,3 @@
+/* Welcome to Compass. Use this file to define print styles.
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */
diff --git a/public/stylesheets/screen.css b/public/stylesheets/screen.css
@@ -0,0 +1,68 @@
+/* Welcome to Compass.
+ * In this file you should write your main styles. (or centralize your imports)
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
+/* line 5, ../../../../../Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+
+/* line 22, ../../../../../Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+html {
+  line-height: 1;
+}
+
+/* line 24, ../../../../../Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+ol, ul {
+  list-style: none;
+}
+
+/* line 26, ../../../../../Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* line 28, ../../../../../Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+caption, th, td {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle;
+}
+
+/* line 30, ../../../../../Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+q, blockquote {
+  quotes: none;
+}
+/* line 103, ../../../../../Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+q:before, q:after, blockquote:before, blockquote:after {
+  content: "";
+  content: none;
+}
+
+/* line 32, ../../../../../Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+a img {
+  border: none;
+}
+
+/* line 116, ../../../../../Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
+  display: block;
+}