add ui system to be configured for project

backend/config/urls.py

@@ -54,4 +54,5 @@ def edx_path(route, component_name):
     edx_path('map_quiz/', 'MapQuiz'),
     edx_path('budget_voting_simulation/', 'BudgetVotingSimViz'),
     edx_path('heat_map/', 'DemocracyViz'),
+    edx_path('system/', 'System'),
 ]

frontend/src/UILibrary/System.js

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import Colors from './tokens/Colors';
+import Typography from './tokens/Typography';
+
+
+const System = () => (
+    <div style={{ margin: '2em' }}>
+        <h1>DHLab UI Library</h1>
+
+        <p style={{ marginBottom: "1em", marginTop: "1em"}}>
+            A collection of all the components that make the DHLab <a href="/">Prespectives from
+            Africa Library</a>. We leverage
+            <a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer">
+                Bootstrap
+            </a>
+            and the
+            <a href="https://react-bootstrap.github.io/" target="_blank" rel="noopener noreferrer">
+                the React Bootstrap library
+            </a>.
+            Make sure to try to use components you see here — this will keep our user
+            experience and code consistent.
+        </p>
+
+        <p>
+            We don&apos;t make use of all the components in the React library. Either because
+            we didn&apos;t yet find the use case, and sometimes because some of them
+            aren&apos;t so great, so please check here for our Officially Supported Components™.
+            This library will grow over time and you&apos;re free to suggest additions and
+            changes over in the
+            <a href="https://app.slack.com/client/TCLM42YA0/CCLTGQHJ6">#general</a>
+            Slack channel. But, please don&apos;t go yolo-adding
+            random React components into the codebase that&apos;ll end up siloed and a pain to
+            deal with later. All components that we use in the main codebase
+            need to be documented here. If you have any design or development questions,
+            holla at a staff member on Slack.
+        </p>
+
+        <Colors />
+        <Typography />
+    </div>
+);
+
+export default System;

frontend/src/UILibrary/scss/_animation.scss

@@ -0,0 +1,28 @@
+@keyframes animationFadeIn {
+	0 {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes animationFadeOut {
+	0 {
+    opacity: 1;
+    visibility: visible;
+	}
+	100% {
+    opacity: 0;
+    visibility: hidden;
+	}
+}
+
+@keyframes animationSkeleton {
+	0 {
+		transform: translateX(-100%);
+	}
+	100% {
+		transform: translateX(100%);
+	}
+}

frontend/src/UILibrary/scss/_reset.scss

@@ -0,0 +1,71 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+button {
+  border: none;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  overflow: visible;
+
+  background: transparent;
+
+  /* inherit font & color from ancestor */
+  color: inherit;
+  font: inherit;
+
+  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
+  line-height: normal;
+
+  /* Corrects font smoothing for webkit */
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+
+  /* Corrects inability to style clickable `input` types in iOS */
+  -webkit-appearance: none;
+}

frontend/src/UILibrary/scss/_variables.scss

@@ -0,0 +1,45 @@
+/******************************************************************************
+1. Colors
+******************************************************************************/
+
+/******************************************************************************
+1.1 Base Colors
+******************************************************************************/
+$black: #000000;
+$white: #FFFFFF;
+$red: #BC1C00; /* use only on error messages! */
+$color_grey_50: #FAFAFA;
+$color_grey_100: #F5F5F5;
+$color_grey_200: #EEEEEE;
+$color_grey_300: #E0E0E0;
+$color_grey_400: #BDBDBD;
+$color_grey_500: #9E9E9E;
+$color_grey_600: #757575;
+$color_grey_700: #616161;
+$color_grey_800: #424242;
+$color_grey_900: #212121;
+
+/******************************************************************************
+1.2 Brand Colors
+******************************************************************************/
+$color_primary_50: #EDE1E8;
+$color_primary_100: #D1B3C5;
+$color_primary_200: #B3819E;
+$color_primary_300: #944E77;
+$color_primary_400: #7D2859;
+$color_primary_500: #66023C;
+$color_primary_600: #5E0236;
+$color_primary_700: #53012E;
+$color_primary_800: #490127;
+$color_primary_900: #38011A;
+
+
+/******************************************************************************
+2. Mixins
+******************************************************************************/
+@import "mixins/aspect-ratio";
+@import "mixins/breakpoints";
+@import "mixins/skeletonLoader";
+@import "mixins/typography";
+
+@import "animation";