Insert Foundation assets and starting to integrate him in templates

foundation_theme/.gitignore

@@ -0,0 +1 @@
+.sass-cache

foundation_theme/config.rb

@@ -0,0 +1,25 @@
+require 'zurb-foundation'
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/static/"
+sass_dir = "scss"
+css_dir = "../webapp_statics/css"
+images_dir = "../webapp_statics/images"
+javascripts_dir = "../webapp_statics/js"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+output_style = :expanded
+
+# 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
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

foundation_theme/scss/_settings.scss

@@ -0,0 +1,247 @@
+@import "foundation/common/ratios";
+
+// Settings file containing Foundation defaults
+
+// Grid Settings
+
+// $rowWidth: 1000px;
+// $rowWidth: 100%;
+// $columnGutter: 30px;
+// $totalColumns: 12;
+// $mobileTotalColumns: 4;
+// $blockGridElements: 12; // Highest number of block grid elements, Maximum of 24 supported
+
+// Colors Settings
+
+// $mainColor: #2ba6cb;
+// $secondaryColor: #e9e9e9;
+// $alertColor: #c60f13;
+// $successColor: #5da423;
+// $txtColor: #222;
+// $highlightColor: #ffff99;
+// $black: #000;
+// $white: #fff;
+// $shinyEdge: rgba(#fff, .5);
+// $darkEdge: rgba(#000, .2);
+
+// Font Settings
+
+// $fontSmoothing: antialiased;
+// $headerFontFamily: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+// $headerFontWeight: bold;
+// $headerFontStyle: normal;
+// $headerFontColor: #222;
+// $bodyFontFamily: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+// $bodyFontWeight: normal;
+// $bodyFontStyle: normal;
+// $bodyFontColor: $txtColor;
+
+// Text Direction Settings
+
+// $textDirection: ltr; // Controls default global text direction, 'rtl' or 'ltr'
+
+// Button Settings
+
+// $buttonRadius: 3px;
+// $btnBase: 10px;
+
+// $tinyBtnBase: $btnBase - 5;
+// $smallBtnBase: $btnBase - 3;
+// $largeBtnBase: $btnBase + 5;
+
+// Form Settings
+
+// $formSpacing: 12px;
+// $labelFontWeight: 500;
+// $labelFontColor: lighten(#000, 30%);
+// $labelBtmMargin: 3px;
+// $inputFontColor: rgba(0,0,0,0.75);
+// $inputFontSize: 14px;
+// $inputBgColor: #fff;
+// $inputFocusBgColor: darken(#fff, 2%);
+// $inputBorderColor: darken(#fff, 20%);
+// $inputFocusBorderColor: darken(#fff, 30%);
+// $inputBorderStyle: solid;
+// $inputBorderWidth: 1px;
+// $inputBorderRadius: 2px;
+// $fieldsetBorderRadius: 3px;
+
+// Custom Form Settings
+
+// $custFormBorderColor: #ccc;
+// $custFormBgColor: #fff;
+// $custCheckColor: #222;
+// $custSelectCurrentFontColor: #141414;
+// $custSelectBgColor: #fff;
+// $custSelectBorderColor: #ddd;
+// $custSelectTriangleColor: #aaa;
+// $custSelectTriangleColorOpen: #222;
+// $custSelectDropHeight: 200px;
+// $custDropdownBgColor: #fff;
+// $custDropdownBorderColor: darken(#fff, 20%);
+// $custDropdownFontColor: #555;
+// $custDropdownSelectedBgColor: lighten(#2ba6cb, 40%);
+// $custDropdownSelectedFontColor: #000;
+// $custFormDisabledBgColor: #ddd;
+
+// Tab Settings
+
+// $tabHeight: 40px;
+// $tabTermFontSize: 12px;
+
+// Nav Bar Settings
+
+// $navBarHeight: 40px;
+// $navFlyoutBaseWidth: 250px;
+
+// Top Bar Settings
+
+// $topBarBgColor: #222;
+// $topBarHeight: 45px;
+// $topBarHeightMobile: 45px;
+$topBarBgColor: #000000;
+$topBarHeight: 75px;
+$topBarHeightMobile: 75px;
+// $topBarBtmMargin: 30px;
+// $topBarTitleWeight: bold;
+// $topBarTitleSize: 17px;
+// $topBarLinkColor: #fff;
+// $topBarLinkWeight: bold;
+// $topBarLinkSize: 13px;
+// $topBarDropBgColor: #222;
+// $topBarDropLinkColor: #fff;
+// $topBarDropToggleSize: 5px;
+// $topBarDropToggleColor: #fff;
+// $topBarDropToggleAlpha: 0.5;
+// $topBarSearchWidth: 200px;
+// $topBarBreakPoint: 940px; // Change to 9999px for always mobile layout
+// $topBarNavToggleSize: 8px;
+
+// UI Settings
+
+// $thumbRadius: 3px;
+// $progBarHeight: 25px;
+// $progBarBorderColor: darken(#fff, 20%);
+// $progBarBorderSize: 1px;
+// $progBarPad: 2px;
+// $linkListBottomMargin: 17px -22px;
+// $tableBorderRadius: 3px;
+
+// Tooltip Settings
+
+// $hasTipBorderBottom: dotted 1px #ccc;
+// $hasTipFontWeight: bold;
+// $hasTipFontColor: #333;
+// $hasTipBorderBottomHover: dotted 1px darken($mainColor, 20%);
+// $hasTipFontColorHover: $mainColor;
+// $tooltipBackgroundColor: #000;
+// $tooltipBackgroundOpacity: 0.85;
+// $tooltipFontSize: 12px;
+// $tooltipFontWeight: bold;
+// $tooltipFontColor: #fff;
+// $tapToCloseFontSize: 10;
+// $tapToCloseFontWeight: normal;
+// $tapToCloseFontColor: #888;
+// $tooltipFontSizeScreenSm: 14;
+// $tooltipBgOpacityScreenSm: 0.85;
+// $tooltipBorderRadius: 4px;
+
+// Pricing Table Settings
+
+// $priceTableBorder: solid 1px #ddd;
+// $priceTitleBgColor: #ddd;
+// $priceTitlePadding: 15px 20px;
+// $priceTitleAlign: center;
+// $priceTitleColor: #333;
+// $priceTitleWeight: bold;
+// $priceTitleSize: 16px;
+
+// $priceMoneyBgColor: #eee;
+// $priceMoneyPadding: 15px 20px;
+// $priceMoneyAlign: center;
+// $priceMoneyColor: #333;
+// $priceMoneyWeight: normal;
+// $priceMoneySize: 20px;
+
+// $priceBgColor: #fff;
+// $priceDescColor: #777;
+// $priceDescPadding: 15px;
+// $priceDescAlign: center;
+// $priceDescFontSize: 12px;
+// $priceDescWeight: normal;
+// $priceDescLineHeight: 1.4;
+// $priceDescBtmBorder: dotted 1px #ddd;
+
+// $priceItemColor: #333;
+// $priceItemPadding: 15px;
+// $priceItemAlign: center;
+// $priceItemFontSize: 14px;
+// $priceItemWeight: normal;
+// $priceItemBtmBorder: dotted 1px #ddd;
+
+// $priceCtaBgColor: #f5f5f5;
+// $priceCtaAlign: center;
+// $priceCtaPadding: 20px;
+
+// Orbit Settings
+
+// $orbitCaptionBgColorOldBrowser: #000;
+// $orbitCaptionBgColor: rgba(0,0,0,.6);
+// $orbitCaptionFontColor: #fff;
+// $orbitBulletNavColor: #999;
+// $orbitBulletNavColorActive: #222;
+// $orbitHasThumbBorderColor: #000;
+// $orbitHasThumbBorderWidth: 2px;
+// $orbitHasThumbBorderStyle: solid;
+// $orbitSlideNumBgColor: rgba(0,0,0,0.7);
+// $orbitSlideNumFontColor: #fff;
+// $orbitSlideNumPadding: 5px;
+
+// Clearing Settings
+
+// $clearingBg: rgba(0,0,0,0.8);
+// $clearingOldBrowserBg: rgb(0,0,0);
+// $clearingCaptionBg: rgba(0,0,0,0.7);
+// $clearingCaptionOldBrowserBg: rgb(0,0,0);
+// $clearingCaptionFontColor: #fff;
+// $clearingCloseColor: #fff;
+// $clearingArrowColor: #fff;
+// $clearingArrowSize: 16px;
+// $clearingCarouselBg: rgba(0,0,0,0.75);
+// $clearingCarouselOldBrowserBg: rgb(0,0,0);
+// $clearingCarouselHeight: 150px;
+// $clearingActiveImgHeight: 75%;
+// $clearingCarouselThumbWidth: 175px;
+// $clearingCarouselThumbActiveBorder: 4px solid rgb(255,255,255);
+// $clearingImgBg: rgba(0,0,0,0.75);
+// $clearingImgOldBrowserBg: rgb(0,0,0);
+
+// Joyride Settings
+
+// $tipBg: rgba(0,0,0,0.8);
+// $tipBgIE8: #000;
+// $tipFontColor: #fff;
+// $tipHeaderWeight: bold;
+// $tipDefaultWidth: 300px;
+// $tipBorderRadius: 4px;
+// $tipPadding: 18px 20px 24px;
+// $tipNubSize: 14px;
+// $tipFontSize: 14px;
+// $tipTimerWidth: 50px;
+// $tipTimerHeight: 3px;
+// $tipTimerBorder: solid 1px #555;
+// $tipTimerColor: #666;
+// $tipCloseColor: #777;
+// $tipCloseSize: 20px;
+// $tipCloseWeight: normal;
+// $tipScreenFill: rgba(0,0,0,0.5);
+
+// Modular Scale Settings
+
+// $ratio: $golden; // THIS IS DEFAULT IN MODULAR-SCALE
+// $baseFontSize: 14px;
+// $importantModNum: 44px;
+// $base-size: $baseFontSize $importantModNum;
+// Produced the following list of values: 14, 17, 23, 27, 37, 44, 59, 71, 95, 115;
+// http://www.modularscale.com by Tim Brown
+// https://github.com/scottkellum/modular-scale by scottkellum

foundation_theme/scss/icons/accessibility/_accessibility_foundicons.scss

@@ -0,0 +1,50 @@
+@import "settings";
+
+/* font-face */
+@include face;
+
+/* global foundicon styles */
+[class*="#{$classPrefix}"] {
+  display: inline;
+  width: auto;
+  height: auto;
+  line-height: inherit;
+  vertical-align: baseline;
+  background-image: none;
+  background-position: 0 0;
+  background-repeat: repeat;
+}
+[class*="#{$classPrefix}"]:before {
+  font-family: $fontName;
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+}
+
+/* icons */
+@include i-class(wheelchair,"000");
+@include i-class(speaker,"001");
+@include i-class(fontsize,"002");
+@include i-class(eject,"003");
+@include i-class(view-mode,"004");
+@include i-class(eyeball,"005");
+@include i-class(asl,"006");
+@include i-class(person,"007");
+@include i-class(question,"008");
+@include i-class(adult,"009");
+@include i-class(child,"00a");
+@include i-class(glasses,"00b");
+@include i-class(cc,"00c");
+@include i-class(blind,"00d");
+@include i-class(braille,"00e");
+@include i-class(iphone-home,"00f");
+@include i-class(w3c,"010");
+@include i-class(css,"011");
+@include i-class(key,"012");
+@include i-class(hearing-impaired,"013");
+@include i-class(male,"014");
+@include i-class(female,"015");
+@include i-class(network,"016");
+@include i-class(guidedog,"017");
+@include i-class(universal-access,"018");
+@include i-class(elevator,"019");

foundation_theme/scss/icons/accessibility/_accessibility_foundicons_ie7.scss

@@ -0,0 +1,35 @@
+@import "settings";
+
+/* general icons for IE7 */
+[class*="#{$classPrefix}"] {
+  font-family: $fontName;
+  font-weight: normal;
+  font-style: normal;
+}
+
+@include ie-class(wheelchair,"000");
+@include ie-class(speaker,"001");
+@include ie-class(fontsize,"002");
+@include ie-class(eject,"003");
+@include ie-class(view-mode,"004");
+@include ie-class(eyeball,"005");
+@include ie-class(asl,"006");
+@include ie-class(person,"007");
+@include ie-class(question,"008");
+@include ie-class(adult,"009");
+@include ie-class(child,"00a");
+@include ie-class(glasses,"00b");
+@include ie-class(cc,"00c");
+@include ie-class(blind,"00d");
+@include ie-class(braille,"00e");
+@include ie-class(iphone-home,"00f");
+@include ie-class(w3c,"010");
+@include ie-class(css,"011");
+@include ie-class(key,"012");
+@include ie-class(hearing-impaired,"013");
+@include ie-class(male,"014");
+@include ie-class(female,"015");
+@include ie-class(network,"016");
+@include ie-class(guidedog,"017");
+@include ie-class(universal-access,"018");
+@include ie-class(elevator,"019");

foundation_theme/scss/icons/accessibility/_settings.scss

@@ -0,0 +1,28 @@
+$fontFileName: "../fonts/accessibility_foundicons";
+$fontName: "AccessibilityFoundicons";
+$classPrefix: "foundicon-";
+
+@mixin i-class($name,$pua) {
+  .#{$classPrefix}#{$name}:before { 
+    content: "\f#{$pua}";
+  }
+}
+
+@mixin ie-class($name,$pua) {
+  .#{$classPrefix}#{$name} { 
+    *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = "&#xf#{$pua};"); 
+  }
+}
+
+@mixin face {
+  @font-face { 
+    font-family: $fontName;
+    src: url('#{$fontFileName}.eot');
+    src: url('#{$fontFileName}.eot?#iefix') format('embedded-opentype'),
+         url('#{$fontFileName}.woff') format('woff'),
+         url('#{$fontFileName}.ttf') format('truetype'),
+         url('#{$fontFileName}.svg##{$fontName}') format('svg');
+    font-weight: normal;
+    font-style: normal;
+  }
+}