Removed bootstrap except for simplified version of grid.

Added some temporary styles so its still usable.

Gruntfile.js

@@ -20,7 +20,7 @@ module.exports = function(grunt) {
       options: {},
       dist: {
         files: {
-          'src/assets/css/common.scss': [{path: 'src/app/common/*', first: 'src/app/common/_variables.scss'}],
+          'src/assets/css/common.scss': [{path: 'src/app/common/*', first: 'src/app/common/_setup.scss'}],
           'src/assets/css/components.scss': ['src/app/components/**/*']
         }
       }

README.md

@@ -0,0 +1,39 @@
+# Humanitarian ID Web App version 2
+
+## Getting started
+
+TO DO
+
+## Front end
+
+### CSS
+
+This project uses [Sass](http://sass-lang.com/)
+
+Run `grunt watch` to watch for changes and rebuild the css.
+
+#### Structure
+
+##### Global styles
+
+Global styles, such as resets and grid styles, should be added to `app/common`.
+
+Any _*.scss file in `app/common` (excluding sub-directories) will be automatically added to the CSS build.
+
+##### Variables and mixins
+
+As variables and mixins need to be imported before other Sass these are added to sub-directories in `app/common` and manually imported into `app/common/_setup.scss`
+
+##### Component styles
+
+Component specific files should be added to that component's directory, e.g. `app/components/my-component/my-component.scss`.
+
+Any _*.scss file in `app/components` (including sub-directories) will be automatically added to the CSS build.
+
+#### Grid
+
+Uses a simplified [Bootstrap v4 grid](https://github.com/twbs/bootstrap).
+
+Uses `col-{breakpoint}-{number}` style classes as with standard Bootstrap grid. `push`, `pull` and `offset` also supported.
+
+See `app/common/_variables.scss` for available breakpoints.

src/app/common/_base.scss

@@ -1,45 +1,103 @@
-/* ==========================================================================
-   Author's custom styles
-   ========================================================================== */
+/* 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 {
-  padding-top: 60px;
+  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;
+}
+
+/**
+ * Base styles
+ */
+
+* {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  &:before, &:after {
+    box-sizing: border-box;
+  }
+}
+
+html, body {
+  height: 100%;
+}
+
+html, input {
+  // Font size should be set at the correct percentage to match the base-font-size
+  // 16px = 100%
+  // 18px = 112.5%
+  // See http://pxtoem.com/ for conversion chart
+  font-size: 100%;
+}
+
+body {
+  font-family: $body-font;
+  @include font-size($base-font-size);
+  line-height: 1.5;
 }
 
 body.toggled {
   padding-left: 350px;
 }
 
-.alert {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  z-index: 1000;
-  border-radius: 0;
-  text-align: center;
+img {
+  max-width: 100%;
+  display: inline-block;
 }
 
-.alert .close {
-  display: none;
-}
+a {
+  text-decoration: underline;
 
-#admin {
-  position: absolute;
-  top: 0;
-  left: 0;
-  border-right: 1px solid black;
-  height: 100% !important;
-  width: 350px;
+  &:hover, &:focus, &:active {
+    text-decoration: none;
+  }
 }
 
-.admin-icon {
-  color: #fff;
-  position: fixed;
-  right: 5px;
-  bottom: 5px;
-  cursor: pointer;
+h1 {
+  @include font-size($large-font-size);
 }
 
-.admin-background {
-  color: #2b5e82;
+h1, h2, h3, h4, h5, h6 {
+  font-weight: bold;
 }

src/app/common/_grid.scss

@@ -0,0 +1,147 @@
+/// Grid system
+//
+// Generate semantic grid columns with these mixins.
+//
+// Adapted from Bootstrap v4 https://github.com/twbs/bootstrap/tree/v4-dev/scss
+
+@mixin make-container() {
+  margin-left: auto;
+  margin-right: auto;
+  padding-right: ($grid-gutter / 2);
+  padding-left:  ($grid-gutter / 2);
+  @if not $enable-flex {
+    @include clearfix();
+  }
+}
+
+@mixin make-gutters() {
+  padding-right: ($grid-gutter / 2);
+  padding-left:  ($grid-gutter / 2);
+}
+
+@mixin make-row() {
+  margin-right: ($grid-gutter  / -2);
+  margin-left:  ($grid-gutter  / -2);
+
+  @if $enable-flex {
+    display: flex;
+    flex-wrap: wrap;
+  } @else {
+    @include clearfix();
+  }
+}
+
+@mixin make-col-ready() {
+  position: relative;
+  min-height: 1px;
+
+  @if $enable-flex {
+    width: 100%;
+  }
+}
+
+@mixin make-col($size, $columns: $grid-columns) {
+  @if $enable-flex {
+    flex: 0 0 percentage($size / $columns);
+    max-width: percentage($size / $columns);
+  } @else {
+    float: left;
+    width: percentage($size / $columns);
+  }
+}
+
+@mixin make-col-offset($size, $columns: $grid-columns) {
+  margin-left: percentage($size / $columns);
+}
+
+@mixin make-col-push($size, $columns: $grid-columns) {
+  left: if($size > 0, percentage($size / $columns), auto);
+}
+
+@mixin make-col-pull($size, $columns: $grid-columns) {
+  right: if($size > 0, percentage($size / $columns), auto);
+}
+
+@mixin make-col-modifier($type, $size, $columns) {
+  @if $type == push {
+    @include make-col-push($size, $columns);
+  } @else if $type == pull {
+    @include make-col-pull($size, $columns);
+  } @else if $type == offset {
+    @include make-col-offset($size, $columns);
+  }
+}
+
+@mixin make-grid-columns($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
+  %grid-column {
+    position: relative;
+    min-height: 1px;
+
+    @if $enable-flex {
+      width: 100%;
+    }
+
+    @include make-gutters();
+  }
+
+  $breakpoint-counter: 0;
+  @each $breakpoint in map-keys($breakpoints) {
+    $breakpoint-counter: ($breakpoint-counter + 1);
+
+    .col-#{$breakpoint} {
+      @extend %grid-column;
+    }
+
+    @for $i from 1 through $columns {
+      .col-#{$breakpoint}-#{$i} {
+        @extend %grid-column;
+      }
+    }
+    @include media-query($breakpoint) {
+      @if $enable-flex {
+        .col-#{$breakpoint} {
+          flex-basis: 0;
+          flex-grow: 1;
+          max-width: 100%;
+        }
+       .col-#{$breakpoint}-auto {
+          flex: 0 0 auto;
+          width: auto;
+        }
+      }
+
+      @for $i from 1 through $columns {
+        .col-#{$breakpoint}-#{$i} {
+          @include make-col($i, $columns);
+        }
+      }
+
+      @each $modifier in (pull, push) {
+        @for $i from 0 through $columns {
+          .#{$modifier}-#{$breakpoint}-#{$i} {
+            @include make-col-modifier($modifier, $i, $columns)
+          }
+        }
+      }
+
+      // `$columns - 1` because offsetting by the width of an entire row isn't possible
+      @for $i from 0 through ($columns - 1) {
+        @if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .offset-xs-0
+          .offset-#{$breakpoint}-#{$i} {
+            @include make-col-modifier(offset, $i, $columns)
+          }
+        }
+      }
+    }
+  }
+}
+
+.container {
+  @include make-container();
+}
+
+.row {
+  @include make-row();
+}
+
+@include make-grid-columns();

src/app/common/_setup.scss

@@ -0,0 +1,4 @@
+@import 'variables/variables';
+@import 'mixins/clearfix';
+@import 'mixins/font-size';
+@import 'mixins/media-queries';