ilstyle 0.4.3 → 0.4.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 96219fcccb0c42acc430683b6dbe6a1fbe5d9d39
-  data.tar.gz: 504cf2521eee64b07b9c746fb130fa9a4439521a
+  metadata.gz: b1dabb73c09cf8af4824ec820e254c2f64764393
+  data.tar.gz: da6b712999d89d47e86e5089e4a39a1ac9e8cbcd
 SHA512:
-  metadata.gz: b985bd75e5b9fb773d1959de156ab90b91f7051c4bd870d2abb2e5a023336ddaafaa095a9cffea7021fadbe7d6dd392e811e9fff1c524d099cfae99a97a4541f
-  data.tar.gz: 29ed185cc9268c88908a65e5c7fc81d9e6caebc46c484c120ce46923eef32f0f9ec2621d9320b2ab648310e16472adfd1b96c6344d0824f9fde11cb8696cebe5
+  metadata.gz: 281af71a9560c0e5d2b5254ceca49076f07f2518f7d96c4c839d39a08ff4450f9070aabf7d9bb8f105c09f06c56fbfccbb1311a3b5c79816607892b8d130d0ad
+  data.tar.gz: 3f9be1505ea0bd9685af9f4db72994267e46ef34b9c23a01517041dbd6d3ff1ba6d379210464117d2e523eef7889955104f0656f8b0b92bbb9ad334d9368982d

data/README.rdoc

@@ -1,3 +1,21 @@
 = Ilstyle
 
-This project rocks and uses MIT-LICENSE.
+This project allows static assets to be shared between Rails projects.
+
+== Sharing assets using gems
+
+To share assets using a gem, the files-to-be-shared must be placed inside the folder as if this gem is a rails project. This means in must be put into "ilstyle/app/assets/XX/"
+
+= Fluid Grid
+
+To understand what a Fluid grid is, read the following:
+http://alistapart.com/article/fluidgrids
+
+Changes in our implementation is using em sizes instead of percentages. This allows grid classes to be used within columns.
+
+http://www.responsivegridsystem.com
+This was used to get the foundation for a grid system. We changed percentages to em sizes to create a fluid responsive grid.
+
+To understand how to use mediaqueries to load a different CSS depending on screen-size or orientation, read: http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes
+
+Responsive, Fluid, Grid, Media Queries, the explanation on http://www.adamkaplan.me/grid/ shows how it all can be combined to create a modern web app.

data/app/assets/stylesheets/ilstyle/1024.css

@@ -0,0 +1,20 @@
+/*  MAKE LAYOUT RESPONSIVE at 1024px FOR SMALLER SCREENS ================================================================ */
+
+
+	
+		header {
+			width: 93.75%; /* 960px / 1024px */
+		}
+
+		#maincontent{
+					width: 93.75%; /* 960px / 1024px */
+		}
+		
+		.maincontent{
+			width: 93.75%; /* 960px / 1024px */
+		}
+
+		footer {
+			width: 93.75%; /* 960px / 1024px */
+		}
+		

data/app/assets/stylesheets/ilstyle/10cols.css

@@ -0,0 +1,78 @@
+/*  GRID OF TEN   ============================================================================= */
+
+
+.span_10_of_10 {
+	width: 100%;
+}
+
+.span_9_of_10 {
+	width: 89.84%;
+}
+
+.span_8_of_10 {
+	width: 79.68%;
+}
+
+.span_7_of_10 {
+	width: 69.52%; 
+}
+
+.span_6_of_10 {
+	width: 59.36%; 
+}
+
+.span_5_of_10 {
+	width: 49.2%; 
+}
+
+.span_4_of_10 {
+	width: 39.04%; 
+}
+
+.span_3_of_10 {
+	width: 28.88%;
+}
+
+.span_2_of_10 {
+	width: 18.72%; 
+}
+
+.span_1_of_10 {
+	width: 8.56%; 
+}
+
+
+/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+
+@media only screen and (max-width: 480px) {
+	.span_10_of_10 {
+		width: 100%; 
+	}
+	.span_9_of_10 {
+		width: 100%; 
+	}
+	.span_8_of_10 {
+		width: 100%; 
+	}
+	.span_7_of_10 {
+		width: 100%; 
+	}
+	.span_6_of_10 {
+		width: 100%; 
+	}
+	.span_5_of_10 {
+		width: 100%; 
+	}
+	.span_4_of_10 {
+		width: 100%; 
+	}
+	.span_3_of_10 {
+		width: 100%; 
+	}
+	.span_2_of_10 {
+		width: 100%; 
+	}
+	.span_1_of_10 {
+		width: 100%; 
+	}
+}

data/app/assets/stylesheets/ilstyle/11cols.css

@@ -0,0 +1,84 @@
+/*  GRID OF ELEVEN   ============================================================================= */
+
+.span_11_of_11 {
+	width: 100%;
+}
+
+.span_10_of_11 {
+	width: 90.76%;
+}
+
+.span_9_of_11 {
+	width: 81.52%;
+}
+
+.span_8_of_11 {
+	width: 72.29%;
+}
+
+.span_7_of_11 {
+	width: 63.05%; 
+}
+
+.span_6_of_11 {
+	width: 53.81%; 
+}
+
+.span_5_of_11 {
+	width: 44.58%; 
+}
+
+.span_4_of_11 {
+	width: 35.34%; 
+}
+
+.span_3_of_11 {
+	width: 26.1%;
+}
+
+.span_2_of_11 {
+	width: 16.87%; 
+}
+
+.span_1_of_11 {
+	width: 7.63%; 
+}
+
+
+/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+
+@media only screen and (max-width: 480px) {
+	.span_11_of_11 {
+		width: 100%; 
+	}
+	.span_10_of_11 {
+		width: 100%; 
+	}
+	.span_9_of_11 {
+		width: 100%; 
+	}
+	.span_8_of_11 {
+		width: 100%; 
+	}
+	.span_7_of_11 {
+		width: 100%; 
+	}
+	.span_6_of_11 {
+		width: 100%; 
+	}
+	.span_5_of_11 {
+		width: 100%; 
+	}
+	.span_4_of_11 {
+		width: 100%; 
+	}
+	.span_3_of_11 {
+		width: 100%; 
+	}
+	.span_2_of_11 {
+		width: 100%; 
+	}
+	.span_1_of_11 {
+		width: 100%; 
+	}
+}

data/app/assets/stylesheets/ilstyle/2cols.css

@@ -0,0 +1,21 @@
+/*  GRID OF TWO   ============================================================================= */
+
+
+.span_2_of_2 {
+	width: 100%;
+}
+
+.span_1_of_2 {
+	width: 49.2%;
+}
+
+/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+
+@media only screen and (max-width: 480px) {
+	.span_2_of_2 {
+		width: 100%; 
+	}
+	.span_1_of_2 {
+		width: 100%; 
+	}
+}

data/app/assets/stylesheets/ilstyle/3cols.css

@@ -0,0 +1,29 @@
+/*  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 AT LESS THAN 480 PIXELS */
+
+@media only screen and (max-width: 480px) {
+	.span_3_of_3 {
+		width: 100%; 
+	}
+	.span_2_of_3 {
+		width: 100%; 
+	}
+	.span_1_of_3 {
+		width: 100%;
+	}
+}

data/app/assets/stylesheets/ilstyle/480.css

@@ -0,0 +1,139 @@
+/*  MAKE LAYOUT RESPONSIVE at 480px FOR IPHONE LANDSCAPE ============================================ */
+
+
+	
+		header {
+			width: 93.75%; /* 450px / 480px */
+		}
+
+
+		#maincontent{
+			width: 93.75%; /* 450px / 480px */
+		}
+		
+	
+		.maincontent{
+			width: 93.75%; /* 450px / 480px */
+		}
+		
+		
+		footer {
+			width: 93.75%; /* 450px / 480px */
+		}
+		
+		
+
+/*  GRID OF EIGHT TURNS INTO A GRID OF FOUR */
+
+.span_8_of_8 {
+	width: 100%; 
+	margin-left: 0;
+}
+
+.span_7_of_8 {
+	width: 100%;
+	margin-left: 0;
+}
+
+.span_6_of_8 {
+	width: 100%;
+	margin-left: 0;
+}
+
+.span_5_of_8 {
+	width: 100%;
+	margin-left: 0;
+}
+
+.span_4_of_8 {
+	width: 100%;
+	margin-left: 0;
+}
+
+.span_3_of_8 {
+	width: 74.2%;
+	margin: 1% 0 1% 3.2%;
+}
+
+.span_2_of_8 {
+	width: 48.4%;
+	margin: 1% 0 1% 3.2%; 
+}
+
+.span_1_of_8 {
+	width: 22.6%;
+	margin: 1% 0 1% 3.2%; 
+}
+
+.span_1_of_8:nth-child(4n+1) { 
+	clear: both;
+	margin-left: 0;
+}
+		
+/*  Except in the Example and in the Sample */
+
+#example .maincontent .span_8_of_8 {
+	width: 100%; 
+	margin-left: 0;
+}
+#example .maincontent .span_7_of_8 {
+	width: 100%; 
+	margin-left: 0;
+}
+#example .maincontent .span_6_of_8 {
+	width: 100%;
+	margin-left: 0; 
+}
+#example .maincontent .span_5_of_8 {
+	width: 100%; 
+	margin-left: 0;
+}
+#example .maincontent .span_4_of_8 {
+	width: 100%; 
+	margin-left: 0;
+}
+#example .maincontent .span_3_of_8 {
+	width: 100%;
+	margin-left: 0; 
+}
+#example .maincontent .span_2_of_8 {
+	width: 100%%; 
+	margin-left: 0;
+}
+#example .maincontent .span_1_of_8 {
+	width: 100%; 
+	margin-left: 0;
+}
+
+#sample .maincontent .span_8_of_8 {
+	width: 100%; 
+	margin-left: 0;
+}
+#sample .maincontent .span_7_of_8 {
+	width: 100%; 
+	margin-left: 0;
+}
+#sample .maincontent .span_6_of_8 {
+	width: 100%;
+	margin-left: 0; 
+}
+#sample .maincontent .span_5_of_8 {
+	width: 100%; 
+	margin-left: 0;
+}
+#sample .maincontent .span_4_of_8 {
+	width: 100%; 
+	margin-left: 0;
+}
+#sample .maincontent .span_3_of_8 {
+	width: 100%;
+	margin-left: 0; 
+}
+#sample .maincontent .span_2_of_8 {
+	width: 100%%; 
+	margin-left: 0;
+}
+#sample .maincontent .span_1_of_8 {
+	width: 100%; 
+	margin-left: 0;
+}

data/app/assets/stylesheets/ilstyle/4cols.css

@@ -0,0 +1,36 @@
+/*  GRID OF FOUR   ============================================================================= */
+
+	
+.span_4_of_4 {
+	width: 100%; 
+}
+
+.span_3_of_4 {
+	width: 74.6%; 
+}
+
+.span_2_of_4 {
+	width: 49.2%; 
+}
+
+.span_1_of_4 {
+	width: 23.8%; 
+}
+
+
+/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+
+@media only screen and (max-width: 480px) {
+	.span_4_of_4 {
+		width: 100%; 
+	}
+	.span_3_of_4 {
+		width: 100%; 
+	}
+	.span_2_of_4 {
+		width: 100%; 
+	}
+	.span_1_of_4 {
+		width: 100%; 
+	}
+}

data/app/assets/stylesheets/ilstyle/5cols.css

@@ -0,0 +1,43 @@
+/*  GRID OF FIVE   ============================================================================= */
+
+	
+.span_5_of_5 {
+	width: 100%;
+}
+
+.span_4_of_5 {
+  	width: 79.68%; 
+}
+
+.span_3_of_5 {
+  	width: 59.36%; 
+}
+
+.span_2_of_5 {
+  	width: 39.04%;
+}
+
+.span_1_of_5 {
+  	width: 18.72%;
+}
+
+
+/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+
+@media only screen and (max-width: 480px) {
+	.span_5_of_5 {
+		width: 100%; 
+	}
+	.span_4_of_5 {
+		width: 100%; 
+	}
+	.span_3_of_5 {
+		width: 100%; 
+	}
+	.span_2_of_5 {
+		width: 100%; 
+	}
+	.span_1_of_5 {
+		width: 100%; 
+	}
+}

data/app/assets/stylesheets/ilstyle/6cols.css

@@ -0,0 +1,50 @@
+/*  GRID OF SIX   ============================================================================= */
+
+
+.span_6_of_6 {
+	width: 100%;
+}
+
+.span_5_of_6 {
+  	width: 83.06%;
+}
+
+.span_4_of_6 {
+  	width: 66.13%;
+}
+
+.span_3_of_6 {
+  	width: 49.2%;
+}
+
+.span_2_of_6 {
+  	width: 32.26%;
+}
+
+.span_1_of_6 {
+  	width: 15.33%;
+}
+
+
+/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+
+@media only screen and (max-width: 480px) {
+	.span_6_of_6 {
+		width: 100%; 
+	}
+	.span_5_of_6 {
+		width: 100%; 
+	}
+	.span_4_of_6 {
+		width: 100%; 
+	}
+	.span_3_of_6 {
+		width: 100%; 
+	}
+	.span_2_of_6 {
+		width: 100%; 
+	}
+	.span_1_of_6 {
+		width: 100%; 
+	}
+}

data/app/assets/stylesheets/ilstyle/768.css

@@ -0,0 +1,22 @@
+/*  MAKE LAYOUT RESPONSIVE at 768px FOR IPAD PORTRAIT ================================================================ */
+
+
+	
+		header {
+			width: 93.75%; /* 720px / 768px */
+		}
+
+		#maincontent{
+			width: 93.75%; /* 720px / 768px */
+		}
+
+		
+		.maincontent{
+			width: 93.75%; /* 720px / 768px */
+		}
+
+		
+		footer {
+			width: 93.75%; /* 720px / 768px */
+		}
+		

data/app/assets/stylesheets/ilstyle/7cols.css

@@ -0,0 +1,57 @@
+/*  GRID OF SEVEN   ============================================================================= */
+
+
+.span_7_of_7 {
+	width: 100%;
+}
+
+.span_6_of_7 {
+	width: 85.48%;
+}
+
+.span_5_of_7 {
+  	width: 70.97%;
+}
+
+.span_4_of_7 {
+  	width: 56.45%;
+}
+
+.span_3_of_7 {
+  	width: 41.94%;
+}
+
+.span_2_of_7 {
+  	width: 27.42%;
+}
+
+.span_1_of_7 {
+  	width: 12.91%;
+}
+
+
+/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+
+@media only screen and (max-width: 480px) {
+	.span_7_of_7 {
+		width: 100%; 
+	}
+	.span_6_of_7 {
+		width: 100%; 
+	}
+	.span_5_of_7 {
+		width: 100%; 
+	}
+	.span_4_of_7 {
+		width: 100%; 
+	}
+	.span_3_of_7 {
+		width: 100%; 
+	}
+	.span_2_of_7 {
+		width: 100%; 
+	}
+	.span_1_of_7 {
+		width: 100%; 
+	}
+}

data/app/assets/stylesheets/ilstyle/8cols.css

@@ -0,0 +1,64 @@
+/*  GRID OF EIGHT   ============================================================================= */
+
+	
+.span_8_of_8 {
+	width: 100%;
+}
+
+.span_7_of_8 {
+	width: 87.3%; 
+}
+
+.span_6_of_8 {
+	width: 74.6%; 
+}
+
+.span_5_of_8 {
+	width: 61.9%; 
+}
+
+.span_4_of_8 {
+	width: 49.2%; 
+}
+
+.span_3_of_8 {
+	width: 36.5%;
+}
+
+.span_2_of_8 {
+	width: 23.8%; 
+}
+
+.span_1_of_8 {
+	width: 11.1%; 
+}
+
+
+/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+
+@media only screen and (max-width: 480px) {
+	.span_8_of_8 {
+		width: 100%; 
+	}
+	.span_7_of_8 {
+		width: 100%; 
+	}
+	.span_6_of_8 {
+		width: 100%; 
+	}
+	.span_5_of_8 {
+		width: 100%; 
+	}
+	.span_4_of_8 {
+		width: 100%; 
+	}
+	.span_3_of_8 {
+		width: 100%; 
+	}
+	.span_2_of_8 {
+		width: 100%; 
+	}
+	.span_1_of_8 {
+		width: 100%; 
+	}
+}

data/app/assets/stylesheets/ilstyle/9cols.css

@@ -0,0 +1,71 @@
+/*  GRID OF NINE   ============================================================================= */
+
+
+.span_9_of_9 {
+	width: 100%;
+}
+
+.span_8_of_9 {
+	width: 88.71%;
+}
+
+.span_7_of_9 {
+	width: 77.42%; 
+}
+
+.span_6_of_9 {
+	width: 66.13%; 
+}
+
+.span_5_of_9 {
+	width: 54.84%; 
+}
+
+.span_4_of_9 {
+	width: 43.55%; 
+}
+
+.span_3_of_9 {
+	width: 32.26%;
+}
+
+.span_2_of_9 {
+	width: 20.97%; 
+}
+
+.span_1_of_9 {
+	width: 9.68%; 
+}
+
+
+/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+
+@media only screen and (max-width: 480px) {
+	.span_9_of_9 {
+		width: 100%; 
+	}
+	.span_8_of_9 {
+		width: 100%; 
+	}
+	.span_7_of_9 {
+		width: 100%; 
+	}
+	.span_6_of_9 {
+		width: 100%; 
+	}
+	.span_5_of_9 {
+		width: 100%; 
+	}
+	.span_4_of_9 {
+		width: 100%; 
+	}
+	.span_3_of_9 {
+		width: 100%; 
+	}
+	.span_2_of_9 {
+		width: 100%; 
+	}
+	.span_1_of_9 {
+		width: 100%; 
+	}
+}

data/app/assets/stylesheets/ilstyle/_colours.css.scss

@@ -0,0 +1,13 @@
+/* Define colours */
+$ilorange:#F57E29;
+$ilorangelight:#fe854b;
+$ilgray:#535353;
+$ilgraylight:#a6a6a6;
+$ilblue:#0E719F;
+$ilgreen:#0ec505;
+$ildarkgreen:#01992b;
+$ilred:#fc2727;
+$ildarkred: #ff0c37;
+$ilredlight: #ff949a;
+$ilbackground: #e4e4e4;
+$ilyellow: #ffc974;

data/app/assets/stylesheets/ilstyle/_grid.css.scss

@@ -0,0 +1,30 @@
+/*  GRID OF TWELVE   ============================================================================= */
+
+.span_12_of_12 { width: 100%; }
+.span_11_of_12 { width: 91.53%; }
+.span_10_of_12 { width: 83.06%; }
+.span_9_of_12 {  width: 74.6%; }
+.span_8_of_12 {  width: 66.13%; }
+.span_7_of_12 {  width: 57.66%; }
+.span_6_of_12 {  width: 49.2%; }
+.span_5_of_12 {  width: 40.73%; }
+.span_4_of_12 {  width: 32.26%; }
+.span_3_of_12 {  width: 23.8%; }
+.span_2_of_12 {  width: 15.33%;  }
+.span_1_of_12 {  width: 6.86%; }
+
+/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+@media only screen and (max-width: 480px) {
+	.span_12_of_12,
+	.span_11_of_12,
+	.span_10_of_12,
+	.span_9_of_12,
+	.span_8_of_12,
+	.span_7_of_12,
+	.span_6_of_12,
+	.span_5_of_12,
+	.span_4_of_12,
+	.span_3_of_12,
+	.span_2_of_12,
+	.span_1_of_12 { width: 100%; }
+}

data/app/assets/stylesheets/ilstyle/col.css

@@ -0,0 +1,42 @@
+
+/*  SECTIONS  ============================================================================= */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING  ============================================================================= */
+
+
+.group:before,
+.group:after {
+    content:"";
+    display:table;
+}
+.group:after {
+    clear:both;
+}
+.group {
+    zoom:1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP   ==================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */
+
+
+/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */
+
+@media only screen and (max-width: 480px) {
+	.col { 
+		margin: 1% 0 1% 0%;
+	}
+}

data/app/assets/stylesheets/ilstyle/i-level.css.scss

@@ -1,20 +1,7 @@
 /* Regular CSS file for i-level look */
 /* Imports */
 @import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400);
-
-/* Define colours */
-$ilorange:#F57E29;
-$ilorangelight:#fe854b;
-$ilgray:#535353;
-$ilgraylight:#a6a6a6;
-$ilblue:#0E719F;
-$ilgreen:#0ec505;
-$ildarkgreen:#01992b;
-$ilred:#fc2727;
-$ildarkred: #ff0c37;
-$ilredlight: #ff949a;
-$ilbackground: #e4e4e4;
-$ilyellow: #ffc974;
+@import 'colours';
 
 /************************************
  **           Text                  *
@@ -299,6 +286,7 @@ nav[role=navigation]{
   li:hover ul{
     display:block;
     color: white;
+    position: absolute;
   }
 
   li.last ul{

data/app/assets/stylesheets/ilstyle/mobile.css.scss

@@ -0,0 +1,259 @@
+@import 'colours';
+@import 'global_mixins';
+
+/* NOTE: Put globals in tablet.css.scss as it is loaded BEFORE mobile */
+
+/* set size values and OS Specific changes */
+/* MARK: iPhone Portrait */
+@media only screen and ( min-width: 320px ) and (max-width: 479px ){
+    $mobile-width: 22.786em;
+
+    .span_1_of_6{ width: 7.524em; } /* used in navigation */
+    #mainNavigation div:nth-child(3n+3){ width: 7.571em; }
+    /* set size mobile width */
+    aside article, .span_16_of_16, .span_15_of_16, .span_14_of_16,
+    .span_13_of_16, .span_12_of_16, .span_11_of_16, .span_10_of_16,
+    .span_9_of_16, .span_8_of_16, .span_7_of_16, .span_6_of_16,
+    .span_5_of_16, .span_4_of_16, .span_3_of_16, .span_2_of_16,
+    .span_1_of_16 { width: $mobile-width; max-width:100%; }
+    aside > .span_4_of_16{ width: $mobile-width; }
+
+    #selectRegion{
+        width: 21.429em;
+        background: url( image-path( 'selectIcon.png') )  no-repeat;
+        background-size: 2.286em 2.286em;
+        background-color: white;
+        background-position: 19.214em -0.071em;
+    }
+    section .map{ height: 20.7143em; }
+    .map > div > svg{ width: 21.429em; }
+
+    #DOMNameList{  width: 20em; }
+    #DOMStatsList{  width: 20em; }
+    #DOMCanvasContainer,
+    section.map{ height: 230px; }
+    #DOMSmallRegionCanvasContainer{ display: none; }
+
+
+    #headcontainer{ width: 320px; }
+    #maincontent section.map{ padding: 5px; }
+
+    #mobileSelectRegionNavigation{ margin-left: 1px; width: 318px; }
+
+    aside .col{ margin-left: 0px; margin-bottom: 5px; }
+    #nvm_news_frame{ height: 1750px; }
+
+    #maincontent > section{ padding: 10px; }
+}
+
+
+/* MARK: Android Phones */
+@media only screen and ( min-width: 480px ) and ( max-width: 599px ){
+    $mobile-width: 34.214em;
+    .span_1_of_6{ width: 11.333em; }
+    /* set size mobile width */
+    aside article, .span_16_of_16, .span_15_of_16, .span_14_of_16,
+    .span_13_of_16, .span_12_of_16, .span_11_of_16, .span_10_of_16,
+    .span_9_of_16, .span_8_of_16, .span_7_of_16, .span_6_of_16,
+    .span_5_of_16, .span_4_of_16, .span_3_of_16, .span_2_of_16,
+    .span_1_of_16 { width: $mobile-width; max-width:100%; }
+    aside > .span_4_of_16{ width: $mobile-width; }
+
+
+    #selectRegion{
+        width: 32.786em;
+        background: url( image-path( 'selectIcon.png') )  no-repeat;
+        background-size: 2.286em 2.286em;
+        background-color: white;
+        background-position: 30.571em -0.071em; }
+    section .map{ height: 23.429em; }
+    .map > div > svg{ width: 32.714em; }
+
+    #DOMNameList{ width: 32em; }
+    #DOMStatsList{ width: 32em; }
+    #DOMCanvasContainer,
+    section.map{ height: 370px; }
+    #DOMSmallRegionCanvasContainer{ display: none; }
+
+    #headcontainer{ width: 480px;}
+    #mobileSelectRegionNavigation{ margin-left: 1px; width: 478px; }
+
+    #nvm_news_frame{ height: 1160px; }
+
+    #maincontent > section{ padding: 15px;}
+
+    ul.two-column{ margin: 0px; }
+    ul.two-column li{
+        width: 48%;
+        min-width: 200px;
+        display:inline-block;
+        padding: 0px;
+        margin: 0px;
+        vertical-align:top;
+        border: none;
+    }
+}
+
+
+/* MARK: 7" android tablets */
+@media only screen and ( min-width: 600px ) and ( max-width: 767px ){
+    $mobile-width: 42.786em;
+    .span_1_of_6{ width: 14.167em; }
+
+    /* set size mobile width */
+    aside article, .span_16_of_16, .span_15_of_16, .span_14_of_16,
+    .span_13_of_16, .span_12_of_16, .span_11_of_16, .span_10_of_16,
+    .span_9_of_16, .span_8_of_16, .span_7_of_16, .span_6_of_16,
+    .span_5_of_16, .span_4_of_16, .span_3_of_16, .span_2_of_16,
+    .span_1_of_16 { width: $mobile-width; max-width:100%; }
+    aside > .span_4_of_16{ width: $mobile-width; }
+
+    #selectRegion{
+        width: 41.357em;
+        background: url( image-path( 'selectIcon.png') )  no-repeat;
+        background-size: 2.286em 2.286em;
+        background-color: white;
+        background-position: 39.286em -0.071em; }
+    section .map{ height: 23.429em; }
+    .map > div > svg{ width: 38.214em; }
+
+    #DOMNameList{  width: 40em; }
+    #DOMStatsList{  width: 40em; }
+
+    #headcontainer{ width: 600px;}
+    #mobileSelectRegionNavigation{ margin-left: 1px; width: 598px; }
+    #mainNavigation div:nth-child(3n+3){ width: 199px; }
+
+
+    #DOMCanvasContainer,
+    section.map{ height: 420px;  }
+    #DOMSmallRegionCanvasContainer{ display: none; }
+
+    ul.two-column{ margin: 0px; }
+    ul.two-column li{
+        width: 48%;
+        min-width: 200px;
+        display:inline-block;
+        padding: 0px;
+        margin: 0px;
+        vertical-align:top;
+        border: none;
+    }
+}
+
+
+/* MARK: All mobile */
+@media only screen and ( min-width: 320px ) and ( max-width: 767px ){
+    /* set margins */
+    $margin: 0.071em;
+    $padding: 0.357em;
+    $header-size: 3.929em;
+    .col{ margin: $margin 0 0 $margin; } /* Set top and left margin */
+    #maincontent{ margin: $margin 0 0 $margin; }
+    nav > .col:first-child{ margin-left: $margin; }
+    #headcontainer{ margin-bottom: $margin; }
+
+    /* change padding */
+    #maincontent{ padding: $padding; }
+    footer section{ padding: $padding; }
+
+    /* set styling of header */
+    .headerIcon{ width: $header-size; }
+    .headerIcon.siteLogo{ top:0;left:0; height:$header-size; }
+    #headerBar{ border:none; height: $header-size; margin: 0px 0px 0px $margin; background-color: $blue_dark; background-image: none; }
+
+    /* Changes menu's */
+    #menutoggle{
+        display:block;
+        position: absolute;
+    	right: 0;
+    	height: 2.292em;
+        width: 2.292em;
+        font-size: 1.714em;
+        border: none;
+    	border-left: 0.0417em solid $admin_blue;
+        background-color: $blue_dark;
+    	text-align: center;
+    	display: table-cell;
+        vertical-align: center;
+    	color: white;
+    }
+    nav#mobileSelectRegionNavigation{
+        position: relative;
+        display:inline-block;
+        height: $header-size;
+        @include background-gradient( $link, $link_light );
+        vertical-align: middle;
+        margin-top: $margin;
+    }
+    #selectRegion{
+        position: absolute;
+        left: 0.714em;
+        top: 0.929em;
+    	height: 2.149em;
+        border: 0 !important;.  /*Removes border*/
+        -webkit-appearance: none;  /*Removes default chrome and safari style*/
+        -moz-appearance: none;  /*Removes default style Firefox*/
+
+        text-indent: 0.001em;          /* Removes default arrow from firefox*/
+        text-overflow: "";               /*Removes default arrow from firefox*/
+    }
+
+    .tile_link{ padding: 0.3em; }
+
+    .noTopMargin{ margin-left: 0px; }
+    aside.span_4_of_16 { width: 100%; } /* push the sidebar below the main content */
+
+    aside article:first-child{ margin-top: $margin;}
+    aside .col{ margin-left: $margin; }
+    aside .col:nth-child(2){ margin-left: 0px; }
+
+    aside .sidebarlinks a { background: none; color: white; }
+    aside .sidebarlinks{ background-image: none;}
+    /* hide non-relevant tags */
+    .headerIcon.socialMedia{ display:none; }
+    #headerImage{ display:none; }
+
+    nav#mainNavigation { display: none; }
+    nav .tile {
+        a{
+            font-size: 0.929em;
+            height: 2.769em;
+            line-height: 2.385em; }
+        a:hover{
+            height: 2.769em;
+            line-height: 2.385em; }
+        a.highlighted{
+            height: 2.769em;
+            line-height: 2.385em; }
+    }
+
+    .headerIcon{ box-shadow: none;}
+    #maincontentcontainer{ padding-left: 1px; }
+    #maincontent{ margin: 5px 0px 0px 0px; padding: 0px;}
+
+    .span_3_of_16, .span_4_of_16{ width: 100%;}
+
+    #DOMStatsList > div > div { width: 148px;}
+    .DOMPopulationNumbers{ width: 100%  !important;}
+    .POI_select { display: none; }
+    .POI_select.mobile_select{ display: inline-block; }
+    #article_navigation{ display: none; }
+    #search_realtors{ display: none; }
+    #search_realtors.mobile{ display: inline-block; }
+
+    .realtor > div{ margin-left: initial !important; }
+    aside article{ margin-left: 0px !important; margin-top: 5px !important;}
+
+    #zoomMap{ display: none; }
+
+    .fullscreen_overlay{
+        left: 0;
+        right: 0;
+        margin: 0 auto;
+        #maincontent{
+            width: 100%;
+        }
+    }
+
+}

data/app/assets/stylesheets/ilstyle/tablet.css.scss

@@ -0,0 +1,78 @@
+@import 'colours';
+@import 'global_mixins';
+
+/* Hide Mobile specific elements when not on a mobile platform */
+.POI_select.mobile_select{ display: none; }
+#search_realtors.mobile{ display: none; }
+
+/* MARK: iPad portrait */
+/* Below 960 switch to using the ipad version */
+@media only screen and (min-width: 768px ) and ( max-width: 959px ){
+    .span_16_of_16, .span_15_of_16, .span_14_of_16, .span_13_of_16,
+    .span_12_of_16 { width: 54.857em; }
+    .span_11_of_16 { width: 46.786em; }
+    .span_10_of_16 { width: 42.500em; }
+    .span_9_of_16 { width: 38.214em; }
+    .span_8_of_16 { width: 33.929em; }
+    .span_7_of_16 { width: 29.643em; }
+    .span_6_of_16 { width: 25.357em; }
+    .span_5_of_16 { width: 21.071em; }
+    .span_4_of_16 { width: 16.786em; }
+    .span_3_of_16 { width: 12.500em; }
+    .span_2_of_16 { width: 8.214em; } /* 115px / 14 */
+    .span_1_of_16 { width: 3.929em; } /* 55px / 14 */
+
+    .span_1_of_6{ width: 8.845em; }
+
+    aside > .span_4_of_16.map{ width: 100%; }
+
+    aside > .map + article{ margin-left: 0px; }
+
+    .noTopMargin{ margin-left: 0px; }
+    aside.span_4_of_16 { width: 54.857em; } /* push the sidebar below the main content */
+    aside > .span_4_of_16{ width: 18.048em; }
+    aside > article{ width: 17.929em; }
+    aside > article.col,
+    aside > nav#article_navigation {
+        margin: 0 5px 5px 0;
+    }
+    aside .col{ margin-left: $margin; }
+    aside .col:nth-child(2){ margin-left: 0px; }
+    #DOMStatsList{  width: 33.929em; }
+
+    aside nav { position: initial; }
+    nav .tile a{ font-size: 1em; height: 2.571em; }
+    nav .tile a:hover{ height: 2.571em; }
+    nav .tile a.highlighted{ height: 2.571em; }
+
+    #headerImage{
+        height:14.643em;
+    }
+
+    .POI_select { display: none; }
+    .POI_select.mobile_select{ display: inline-block; width: 100%; }
+    #search_realtors{ display: none; }
+    #search_realtors.mobile{ display: inline-block; width: 100%; }
+
+    ul.two-column{ margin: 0px; }
+    ul.two-column li{
+        width: 30%;
+        min-width: 200px;
+        display:inline-block;
+        padding: 0px;
+        margin: 0px;
+        vertical-align:top;
+        border: none;
+    }
+
+    .fullscreen_overlay{
+        left: 0;
+        right: 0;
+        margin: 0 auto;
+        .map{ height: 37.5em; }
+        #maincontent{
+            width: 100%;
+        }
+    }
+
+} /* end iPad */

data/lib/ilstyle/version.rb

@@ -1,3 +1,3 @@
 module Ilstyle
-  VERSION = "0.4.3"
+  VERSION = '0.4.4'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ilstyle
 version: !ruby/object:Gem::Version
-  version: 0.4.3
+  version: 0.4.4
 platform: ruby
 authors:
 - Etienne van Delden
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-08-25 00:00:00.000000000 Z
+date: 2014-09-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -55,11 +55,28 @@ files:
 - app/assets/images/ilstyle/arrow-right_large_hover.png
 - app/assets/images/ilstyle/i-level_ruiten.png
 - app/assets/javascripts/i-level.js
+- app/assets/stylesheets/ilstyle/1024.css
+- app/assets/stylesheets/ilstyle/10cols.css
+- app/assets/stylesheets/ilstyle/11cols.css
+- app/assets/stylesheets/ilstyle/12cols.css
+- app/assets/stylesheets/ilstyle/2cols.css
+- app/assets/stylesheets/ilstyle/3cols.css
+- app/assets/stylesheets/ilstyle/480.css
+- app/assets/stylesheets/ilstyle/4cols.css
+- app/assets/stylesheets/ilstyle/5cols.css
+- app/assets/stylesheets/ilstyle/6cols.css
+- app/assets/stylesheets/ilstyle/768.css
+- app/assets/stylesheets/ilstyle/7cols.css
+- app/assets/stylesheets/ilstyle/8cols.css
+- app/assets/stylesheets/ilstyle/9cols.css
+- app/assets/stylesheets/ilstyle/_colours.css.scss
+- app/assets/stylesheets/ilstyle/_grid.css.scss
+- app/assets/stylesheets/ilstyle/col.css
 - app/assets/stylesheets/ilstyle/i-level.css.scss
+- app/assets/stylesheets/ilstyle/mobile.css.scss
 - app/assets/stylesheets/ilstyle/normalize.css.scss
+- app/assets/stylesheets/ilstyle/tablet.css.scss
 - doc/Advies%20berekening%20printers%20versie%203.docx
-- doc/Custom Drop-Down List Styling | Codrops.webloc
-- doc/CustomDropDownListStyling.zip
 - doc/Font ITC American Typewriter Std.zip
 - doc/Font Lucida Sans Std.zip
 - doc/Voorbeelden/kadokaarten.docx.docx
@@ -84,7 +101,6 @@ files:
 - doc/pijl-wit.png
 - doc/pijlen (3) orange.ai
 - doc/pijlen (3) orange.pdf
-- doc/prototype- eigen calls inzien.png
 - doc/ruiten logo.ai
 - doc/ruiten logo.eps
 - doc/ruiten-logo.png
@@ -157,4 +173,3 @@ signing_key:
 specification_version: 4
 summary: Gem to load all standard i-level files
 test_files: []
-has_rdoc: