Remove Zurb Foundation (#147)

src/ensembl/doc/architecture/decisions/0002-frontend-code.md

@@ -8,20 +8,16 @@ Accepted
 
 ## Context
 
-A frontend framework is necessary for the development of the new website. This framework needs to be modern, well supported and documented, as well as have good performance. Also, a styling library is required.
+A frontend framework is necessary for the development of the new website. This framework needs to be modern, well supported and documented, as well as have good performance.
 
 ## Decision
 
 [React.js](https://reactjs.org/) is used as the frontend framework for building the new website. React.js is used with [TypeScript](https://www.typescriptlang.org/), which is a superset of JavaScript.
 
-[Foundation for Sites](https://foundation.zurb.com/sites.html) is used as the styling library. It is used with [SASS](https://sass-lang.com/), which is a superset of CSS.
-
 ## Consequences
 
 Due to the declarative nature of React.js, building components necessary for the new website becomes a lot easier compared to using a library such as jQuery. React.js is widely supported and also is easier to learn. This should help the existing team members and new members to get on board quickly.
 
 Using strict TypeScript would help to detect errors in the code quite early as there is a compile step involved. Also, using TypeScript itself means the code is partially documented due its static typing nature. This would help the team to understand the code better and also focus less on documenting the code.
 
-Foundation for Sites is one of the popular CSS libraries among frontend developers. Unlike Twitter's Bootstrap library, it is easier to customise.
-
-SASS offers a lot of features that are not currently available with CSS. Writing reusable style code is also possible with SASS.
\ No newline at end of file
+SASS offers a lot of features that are not currently available with CSS. Writing reusable style code is also possible with SASS.

src/ensembl/package-lock.json

@@ -9284,11 +9284,6 @@
       "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=",
       "dev": true
     },
-    "foundation-sites": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/foundation-sites/-/foundation-sites-6.5.3.tgz",
-      "integrity": "sha512-ZwI0idjHHjezh6jRjpPxkczvmtUuJ1uGatZHpyloX0MvsFHfM0BFoxrqdXryXugGPdmb+yJi3JYMnz6+5t3K1A=="
-    },
     "fragment-cache": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",

src/ensembl/package.json

@@ -54,7 +54,6 @@
     "connected-react-router": "6.5.2",
     "core-js": "3.2.1",
     "dotenv": "8.1.0",
-    "foundation-sites": "6.5.3",
     "koa-proxy": "1.0.0-alpha.3",
     "lodash": "4.17.15",
     "query-string": "6.8.2",

src/ensembl/src/content/Content.scss

@@ -2,10 +2,10 @@
 
 .content {
   &.shorter {
-    min-height: calc(100vh - 73px);
+    height: calc(100% - 73px);
   }
 
   &.taller {
-    min-height: calc(100vh - 25px);
+    height: calc(100% - 25px);
   }
 }

src/ensembl/src/content/app/browser/Browser.scss

@@ -7,10 +7,10 @@
 }
 
 .browserInnerWrapper {
+  display: flex;
   position: absolute;
   overflow: hidden;
   width: 100vw;
-  @include flex;
   transition: height 0.3s linear;
   &.shorter {
     height: calc(100vh - 194px);

src/ensembl/src/content/app/browser/browser-bar/BrowserBar.scss

 @import 'src/styles/common';
 
 .browserBar {
-  @include flex;
+  display: flex;
   background: $ens-light-grey;
   box-shadow: 0 2px 3px $ens-grey;
   height: 32px;
@@ -22,7 +22,7 @@
 }
 
 .browserInfo {
-  @include flex;
+  display: flex;
   flex-wrap: nowrap;
   font-size: 12px;
   margin: 0;
@@ -40,7 +40,7 @@
   &.browserInfoExpanded {
     width: calc(100vw - 36px);
 
-    @include breakpoint(large) {
+    @media #{$breakpoint-large} {
       width: calc(100vw - 356px);
     }
   }

src/ensembl/src/content/app/browser/browser-nav/BrowserNavBar.scss

 @import 'src/styles/common';
 
 .browserNavBar {
-  @include flex;
+  display: flex;
   background: $ens-light-grey;
   padding: 16px;
 
-  @include breakpoint(large) {
+  @media #{$breakpoint-large} {
     width: calc(100vw - 356px);
   }
 

src/ensembl/src/content/app/browser/drawer/Drawer.scss

@@ -11,8 +11,9 @@
   overflow-y: auto;
 
   h2 {
-    @include flex;
-    @include flex-align(center, middle);
+    display: flex;
+    align-items: center;
+    justify-content: center;
     text-align: center;
   }
 

src/ensembl/src/content/app/browser/track-panel/TrackPanel.scss

 @import 'src/styles/common';
 
 .trackPanelWrapper {
-  @include flex;
+  display: flex;
   position: absolute;
   right: 0;
 }
 
 .trackPanel {
-  @include flex;
+  display: flex;
   position: relative;
 }

src/ensembl/src/content/app/browser/track-panel/track-panel-tabs/TrackPanelTabs.scss

 @import 'src/styles/common';
 
 .trackPanelTabs {
-  @include flex;
+  display: flex;
   font-size: 13px;
   justify-content: space-between;
   margin-left: 44px;

src/ensembl/src/header/Header.scss

 @import 'src/styles/common';
 
 .topBar {
-  @include top-bar-container;
-  @include top-bar-unstack;
-
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
   color: $white;
   padding: 2px 20px;
+  background-color: $ens-black;
 }
 
 .homeLink {
@@ -32,7 +34,7 @@
   font-size: 11px;
   margin-left: 30px;
 
-  @include breakpoint(medium) {
+  @media #{$breakpoint-medium} {
     display: inline-block;
   }
 

src/ensembl/src/header/account/Account.scss

@@ -3,8 +3,9 @@
 .account {
   border-bottom: 1px solid $ens-grey;
   height: 300px;
-  @include flex;
-  @include flex-align(center, middle);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   h2 {
     color: $ens-grey;

src/ensembl/src/header/launchbar/Launchbar.scss

@@ -6,7 +6,7 @@
   border-bottom: 1px solid $ens-grey;
   border-top: 1px solid $ens-grey;
   padding: 11px 6px;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .categoriesWrapper {

src/ensembl/src/root/Root.scss

 .root {
   position: relative;
+  height: 100%;
 }

src/ensembl/src/styles/_breakpoints.scss

+/* 
+Breakpoints suggested by Foundation (copied from _settings.scss):
+
+$breakpoints: (
+  small: 0,
+  medium: 640px,
+  large: 1024px,
+  xlarge: 1200px,
+  xxlarge: 1440px
+);
+
+*/
+
+$breakpoint-small: 'screen and (min-width: 0)';
+$breakpoint-medium: 'screen and (min-width: 900px)';
+$breakpoint-large: 'screen and (min-width: 1400px)';

src/ensembl/src/styles/_common.scss

 @import 'settings';
-@import '~foundation-sites/scss/foundation';
+@import 'breakpoints';

src/ensembl/src/styles/_normalize.scss

+// Normalization rules picked from foundation-global-styles and foundation-normalize
+
+@import 'common';
+
+// apply a natural box layout model
+html {
+  box-sizing: border-box;
+  font-size: $global-font-size;
+}
+
+// inherit the natural box layout from html; allow box-sizing to easily change if necessary
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+*:focus {
+  outline: none;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+
+  background: $body-background;
+
+  font-family: $body-font-family;
+  font-weight: $global-weight-normal;
+  line-height: $global-lineheight;
+  color: $body-font-color;
+
+  @if ($body-antialiased) {
+    -webkit-font-smoothing: antialiased; // sass-lint:disable-line no-vendor-prefixes
+    -moz-osx-font-smoothing: grayscale; // sass-lint:disable-line no-vendor-prefixes
+  }
+}
+
+img {
+  // Get rid of gap under images by making them display: inline-block; by default
+  display: inline-block;
+  vertical-align: middle;
+
+  // Grid defaults to get images and embeds to work properly
+  max-width: 100%;
+  height: auto;
+  -ms-interpolation-mode: bicubic;
+}
+
+// Make sure textarea takes on height automatically
+textarea {
+  height: auto;
+  min-height: 50px;
+  border-radius: $global-radius;
+}
+
+// Make select elements are 100% width by default
+select {
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: $global-radius;
+}
+
+// Styles Google Maps and MapQuest embeds properly
+// sass-lint:disable-line no-ids
+.map_canvas,
+.mqa-display {
+  img,
+  embed,
+  object {
+    max-width: none !important;
+  }
+}
+
+// Reset <button> styles created by most browsers
+button {
+  // Remove the focus ring around an element when a mouse input is detected.
+  &[data-whatinput='mouse'] {
+    outline: 0;
+  }
+  padding: 0;
+  appearance: none;
+  border: 0;
+  border-radius: $global-radius;
+  background: transparent;
+  line-height: 1;
+  cursor: $global-button-cursor;
+}
+
+pre {
+  overflow: auto; // Prevent text overflow on pre
+  font-family: monospace; // Correct the inheritance and scaling of font size in all browsers
+  font-size: 1em; // Correct the odd `em` font sizing in all browsers.
+}
+
+// Change the font styles in all browsers.
+// Remove the margin in Firefox and Safari.
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1;
+  margin: 0;
+}
+
+b,
+strong {
+  font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
+}
+
+small {
+  font-size: 80%; // // Add the correct font size in all browsers
+}
+
+// Prevent `sub` and `sup` elements from affecting the line height in
+// all browsers.
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}

src/ensembl/src/styles/main.scss

 @import 'common';
+@import 'normalize';
 @import 'fonts';
 @import 'animation';
 
-@include foundation-global-styles;
-@include foundation-prototype-classes;
-@include foundation-visibility-classes;
-
-// apply a natural box layout model
-html {
-  box-sizing: border-box;
-}
-
-// inherit the natural box layout from html; allow box-sizing to easily change if necessary
-*,
-*:before,
-*:after {
-  box-sizing: inherit;
-}
-
-*:focus {
-  outline: none;
+html,
+body,
+.ens-app {
+  height: 100%;
 }
 
 a {

src/ensembl/stories/shared-components/image-button/ImageButton.stories.scss

 @import 'src/styles/common';
 
-@import 'src/shared/image-button/ImageButton.scss';
+@import 'src/shared/components/image-button/ImageButton.scss';
 
 .imageCard {
   float: left;