Merge pull request #6 from OpenTechFund/16-fe-enviroment-setup

16 fe enviroment setup

opentech/static_src/package.json

@@ -16,9 +16,11 @@
     "src_js": "src/javascript",
     "src_css": "src/sass",
     "src_img": "src/images",
+    "src_font": "src/fonts",
     "dest_js": "../static_compiled/js",
     "dest_css": "../static_compiled/css",
     "dest_img": "../static_compiled/images",
+    "dest_font": "../static_compiled/fonts",
     "dist": "../static_compiled"
   },
   "scripts": {
@@ -30,6 +32,7 @@
     "create_dirs:dest_js": "mkdir -p $npm_package_config_dest_js",
     "create_dirs:dest_css": "mkdir -p $npm_package_config_dest_css",
     "create_dirs:dest_img": "mkdir -p $npm_package_config_dest_img",
+    "create_dirs:dest_font": "mkdir -p $npm_package_config_dest_font",
     "create_dirs": "npm-run-all -p create_dirs:*",
     "clean:dist": "rm -rf $npm_package_config_dist/{js/**,css/**,images/**}",
     "clean": "npm-run-all -p clean:*",
@@ -56,6 +59,8 @@
     "lint": "npm-run-all -p lint:js lint:css",
 
     "//[ Watches ]//": "",
+    "watch:font": "onchange $npm_package_config_src_font'/**/**' -- npm-run-all sync:font reload",
+    "watch:font:debug": "onchange $npm_package_config_src_font'/**/**' -- npm-run-all sync:font",
     "watch:img": "onchange $npm_package_config_src_img'/**/**' -- npm-run-all sync:img reload",
     "watch:img:debug": "onchange $npm_package_config_src_img'/**/**' -- npm-run-all sync:img",
     "watch:js": "onchange $npm_package_config_dest_js'/**/**' -- npm-run-all -p reload lint:js",
@@ -64,6 +69,7 @@
     "watch": "npm-run-all -p watch:*",
 
     "//[ Syncs ]//": "",
+    "sync:fonts": "rsync -rtvu --delete $npm_package_config_src_font/ $npm_package_config_dest_font/",
     "sync:img": "rsync -rtvu --delete $npm_package_config_src_img/ $npm_package_config_dest_img/",
     "sync": "npm-run-all -p sync:*",
 

opentech/static_src/src/sass/abstracts/_mixins.scss

-/*------------------------------------*\
-    $MIXINS
-\*------------------------------------*/
-
-
-/* ============================================
-    Media queries
-*/
+// Media queries
 @mixin media-query($queries...) {
     @each $query in $queries {
         @each $breakpoint in $breakpoints {
@@ -21,10 +14,7 @@
     }
 }
 
-
-/* ============================================
-  Placeholder text
-*/
+//   Placeholder text
 @mixin placeholder-text {
     // sass-lint:disable no-vendor-prefixes
     &.placeholder { @content; }
@@ -35,10 +25,7 @@
     // sass-lint:enddisable
 }
 
-
-/* ============================================
-  Hide text
-*/
+// Hide text
 @mixin hidden {
     position: absolute;
     width: 1px;
@@ -47,20 +34,14 @@
     clip: rect(1px, 1px, 1px, 1px);
 }
 
-
-/* ============================================
-  iOS Native vertical scroll
-*/
+// iOS Native vertical scroll
 @mixin native-vertical-scroll {
     overflow-x: hidden;
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch; // sass-lint:disable-line no-misspelled-properties
 }
 
-
-/* ============================================
-    Output a rem and px fallback value for the given property
-*/
+// Output a rem and px fallback value for the given property
 @mixin rem($property, $values) {
 
     $px:  ();
@@ -81,18 +62,12 @@
     // sass-lint:enddisable
 }
 
-
-/* ============================================
-    Output a `font-size: [x]rem;` declaration for the given px value
-*/
+// Output a `font-size: [x]rem;` declaration for the given px value
 @mixin rem-font-size($font-size) {
     @include rem(font-size, $font-size);
 }
 
-
-/* ============================================
-    Font sizes
-*/
+// Font sizes
 @mixin font-size($keyword) {
     $size: map-get($font-sizes, $keyword);
 
@@ -102,3 +77,20 @@
         @include rem-font-size($size);
     }
 }
+
+// button mixin
+@mixin button($bg) {
+    padding: 10px 60px;
+    background: $bg;
+    border: 1px solid $color--white;
+    transition: background $transition;
+
+    &:hover {
+        background: darken($bg, 8%);
+        transition: background $transition;
+    }
+
+    &:active {
+        background: darken($bg, 25%);
+    }
+}

opentech/static_src/src/sass/abstracts/_variables.scss

-$color--primary: #6a737c;
-$color--secondary: #eaeaea;
-$color--tertiary: #f9f9f9;
-
 $color--white: #fff;
 $color--black: #141414;
+$color--light-blue: #43bbf1;
+$color--dark-blue: #25aae1;
 
 $color--default: $color--black;
+$color--primary: $color--light-blue;
+$color--secondary: #eaeaea;
+$color--tertiary: #f9f9f9;
 
 // Button colours
 $button-colours: (
@@ -15,13 +16,13 @@ $button-colours: (
 );
 
 // Fonts
-$font--primary: Sans-Serif;
+$font--primary: 'proxima-nova';
 $font--secondary: Sans-Serif;
 
 // Font weights
+$weight--black: 800;
 $weight--bold: 700;
 $weight--semibold: 600;
-$weight--medium: 500;
 $weight--normal: 400;
 $weight--light: 200;
 
@@ -36,15 +37,15 @@ $font-sizes: (
     kilo:    48px,
 
     // standard sizes
-    alpha:   38px,
-    beta:    30px,
-    gamma:   28px,
-    delta:   22px,
-    epsilon: 20px,
-    zeta:    16px,
+    alpha:   72px,
+    beta:    42px,
+    gamma:   36px,
+    delta:   24px,
+    epsilon: 17px,
+    zeta:    15px,
 
     // non-standard small sizes
-    milli:   14px
+    milli:   13px
 );
 
 // Wrappers

opentech/static_src/src/sass/base/_base.scss

@@ -20,7 +20,6 @@ html {
 
 body {
     overflow-x: hidden;
-    background-color: $color--tertiary;
 
     &.no-scroll {
         overflow-y: hidden;
@@ -62,3 +61,27 @@ ol {
     margin: 0;
     list-style: none;
 }
+
+.is-invisible,
+%is-invisible {
+    z-index: -1;
+    opacity: 0;
+    transition: opacity, z-index, $transition;
+}
+
+.is-visible,
+%is-visible {
+    z-index: 5;
+    opacity: 1;
+    transition: opacity, z-index, $transition;
+}
+
+.is-hidden,
+%is-hidden {
+    display: none;
+}
+
+.is-unhidden,
+%is-unhidden {
+    display: block;
+}

opentech/static_src/src/sass/base/_typography.scss

@@ -59,14 +59,82 @@ blockquote {
 }
 
 // Default sizes
-h1, .alpha   { @include font-size(alpha); }
-h2, .beta    { @include font-size(beta); }
-h3, .gamma   { @include font-size(gamma); }
-h4, .delta   { @include font-size(delta); }
-h5, .epsilon { @include font-size(epsilon); }
-h6, .zeta    { @include font-size(zeta); }
+h1, .alpha   {
+    @include font-size(alpha);
+    font-weight: $weight--black;
+}
+
+h2, .beta    {
+    @include font-size(beta);
+    font-weight: $weight--bold;
+}
+
+h3, .gamma   {
+    @include font-size(gamma);
+    font-weight: $weight--light;
+}
+
+h4, .delta   {
+    @include font-size(delta);
+    font-weight: $weight--bold;
+}
+
+h5, .epsilon {
+    @include font-size(epsilon);
+    font-weight: $weight--bold;
+}
+
+h6, .zeta    {
+    @include font-size(zeta);
+    font-weight: $weight--bold;
+}
 
 .giga { @include font-size(giga); }
 .mega { @include font-size(mega); }
 .kilo { @include font-size(kilo); }
 small, .milli { @include font-size(milli); }
+
+// thin
+@font-face {
+    font-family: 'proxima-nova';
+    font-style: normal;
+    font-weight: 200;
+    src: url('./../fonts/proxima-nova/proxima-nova-thin.woff') format('woff');
+    text-rendering: optimizeLegibility;
+}
+
+// regular
+@font-face {
+    font-family: 'proxima-nova';
+    font-style: normal;
+    font-weight: 400;
+    src: url('./../fonts/proxima-nova/proxima-nova-regular.woff') format('woff');
+    text-rendering: optimizeLegibility;
+}
+
+// semibold
+@font-face {
+    font-family: 'proxima-nova';
+    font-style: normal;
+    font-weight: 600;
+    src: url('./../fonts/proxima-nova/proxima-nova-semibold.woff') format('woff');
+    text-rendering: optimizeLegibility;
+}
+
+// bold
+@font-face {
+    font-family: 'proxima-nova';
+    font-style: normal;
+    font-weight: 700;
+    src: url('./../fonts/proxima-nova/proxima-nova-bold.woff') format('woff');
+    text-rendering: optimizeLegibility;
+}
+
+// black
+@font-face {
+    font-family: 'proxima-nova';
+    font-style: normal;
+    font-weight: 800;
+    src: url('./../fonts/proxima-nova/proxima-nova-black.woff') format('woff');
+    text-rendering: optimizeLegibility;
+}