Unverified Commit 4a45edef authored by Andrey Azov's avatar Andrey Azov Committed by GitHub
Browse files

Remove Zurb Foundation (#147)

parent cf8cbc92
Pipeline #32705 passed with stages
in 5 minutes and 7 seconds
......@@ -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.
......@@ -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",
......
......@@ -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",
......
......@@ -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);
}
}
......@@ -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);
......
@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);
}
}
......
@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);
}
......
......@@ -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;
}
......
@import 'src/styles/common';
.trackPanelWrapper {
@include flex;
display: flex;
position: absolute;
right: 0;
}
.trackPanel {
@include flex;
display: flex;
position: relative;
}
@import 'src/styles/common';
.trackPanelTabs {
@include flex;
display: flex;
font-size: 13px;
justify-content: space-between;
margin-left: 44px;
......
@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;
}
......
......@@ -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;
......
......@@ -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 {
......
.root {
position: relative;
height: 100%;
}
/*
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)';
@import 'settings';
@import '~foundation-sites/scss/foundation';
@import 'breakpoints';
// 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;
}
// Foundation for Sites Settings
// -----------------------------
//
// Table of Contents:
//
// 1. Global
// 2. Breakpoints
// 3. The Grid
// 4. Base Typography
// 5. Typography Helpers
// 6. Abide
// 7. Accordion
// 8. Accordion Menu
// 9. Badge
// 10. Breadcrumbs
// 11. Button
// 12. Button Group
// 13. Callout
// 14. Card
// 15. Close Button
// 16. Drilldown
// 17. Dropdown
// 18. Dropdown Menu
// 19. Flexbox Utilities
// 20. Forms
// 21. Label
// 22. Media Object
// 23. Menu
// 24. Meter
// 25. Off-canvas
// 26. Orbit
// 27. Pagination
// 28. Progress Bar
// 29. Prototype Arrow
// 30. Prototype Border-Box
// 31. Prototype Border-None
// 32. Prototype Bordered
// 33. Prototype Display
// 34. Prototype Font-Styling
// 35. Prototype List-Style-Type
// 36. Prototype Overflow
// 37. Prototype Position
// 38. Prototype Rounded
// 39. Prototype Separator
// 40. Prototype Shadow
// 41. Prototype Sizing
// 42. Prototype Spacing
// 43. Prototype Text-Decoration
// 44. Prototype Text-Transformation
// 45. Prototype Text-Utilities
// 46. Responsive Embed
// 47. Reveal
// 48. Slider
// 49. Switch
// 50. Table
// 51. Tabs
// 52. Thumbnail
// 53. Title Bar
// 54. Tooltip
// 55. Top Bar
// 56. Xy Grid
@import '~foundation-sites/scss/util/util';
// 1. Global
// ---------
$global-font-size: 14px;
$global-width: rem-calc(1200);
$global-lineheight: 1.5;
$foundation-palette: (
primary: #1779ba,
secondary: #767676,
success: #3adb76,
warning: #ffae00,
alert: #cc4b37
);
$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #17354e;
$white: #fefefe;
$body-background: $white;
$body-font-color: $black;
$body-font-family: Lato, 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
$body-antialiased: true;
$global-margin: 1rem;
$global-padding: 1rem;
$global-position: 1rem;
$global-weight-normal: normal;
$global-weight-bold: bold;
$global-radius: 0;
$global-menu-padding: 0.7rem 1rem;
$global-padding-left: 100px;
$global-menu-nested-margin: 1rem;
$global-text-direction: ltr;
$global-flexbox: true;
$global-prototype-breakpoints: false;
$global-button-cursor: auto;
$global-color-pick-contrast-tolerance: 0;
$print-transparent-backgrounds: true;
// Colour Palette
// ---------
$ens-black: #17354e;
$ens-shadow-color: rgba(0, 0, 0, 0.4);
......@@ -148,769 +66,7 @@ $normal: 400;
$bold: 700;
$dark: 900;
@include add-foundation-colors;
// 2. Breakpoints
// --------------
// $breakpoints: (
// small: 0,
// medium: 640px,
// large: 1024px,
// xlarge: 1200px,
// xxlarge: 1440px
// );
$breakpoints: (
small: 0,
medium: 900px,
large: 1400px
);
$print-breakpoint: large;
$breakpoint-classes: (small medium large);
// 3. The Grid
// -----------
$grid-row-width: $global-width;
$grid-column-count: 12;
$grid-column-gutter: (
small: 20px,
medium: 30px
);
$grid-column-align-edge: true;
$grid-column-alias: 'columns';
$block-grid-max: 8;
// 4. Base Typography
// Base Typography
// ------------------
$header-font-family: $body-font-family;
$header-font-weight: $global-weight-normal;
$header-font-style: normal;
$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
$header-color: inherit;
$header-lineheight: 1.4;
$header-margin-bottom: 0.5rem;
$header-styles: (
small: (
'h1': (
'font-size': 24
),
'h2': (
'font-size': 20
),
'h3': (
'font-size': 19
),
'h4': (
'font-size': 18
),
'h5': (
'font-size': 17
),
'h6': (
'font-size': 16
)
),
medium: (
'h1': (
'font-size': 48
),
'h2': (
'font-size': 40
),
'h3': (
'font-size': 31
),
'h4': (
'font-size': 25
),
'h5': (
'font-size': 20
),
'h6': (
'font-size': 16
)
)
);
$header-text-rendering: optimizeLegibility;
$small-font-size: 80%;
$header-small-font-color: $medium-gray;
$paragraph-lineheight: 1.6;
$paragraph-margin-bottom: 1rem;
$paragraph-text-rendering: optimizeLegibility;
$code-color: $black;
$code-font-family: $font-family-monospace;
$code-font-weight: $global-weight-normal;
$code-background: $light-gray;
$code-border: 1px solid $medium-gray;
$code-padding: rem-calc(2 5 1);
$anchor-color: $primary-color;
$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
$anchor-text-decoration: none;
$anchor-text-decoration-hover: none;
$hr-width: $global-width;
$hr-border: 1px solid $medium-gray;
$hr-margin: rem-calc(20) auto;
$list-lineheight: $paragraph-lineheight;
$list-margin-bottom: $paragraph-margin-bottom;
$list-style-type: disc;
$list-style-position: outside;
$list-side-margin: 1.25rem;
$list-nested-side-margin: 1.25rem;
$defnlist-margin-bottom: 1rem;
$defnlist-term-weight: $global-weight-bold;
$defnlist-term-margin-bottom: 0.3rem;
$blockquote-color: $dark-gray;
$blockquote-padding: rem-calc(9 20 0 19);
$blockquote-border: 1px solid $medium-gray;
$cite-font-size: rem-calc(13);
$cite-color: $dark-gray;
$cite-pseudo-content: '\2014 \0020';
$keystroke-font: $font-family-monospace;
$keystroke-color: $black;
$keystroke-background: $light-gray;
$keystroke-padding: rem-calc(2 4 0);
$keystroke-radius: $global-radius;
$abbr-underline: 1px dotted $black;
// 5. Typography Helpers
// ---------------------
$lead-font-size: $global-font-size * 1.25;
$lead-lineheight: 1.6;