Started to build out the app. Its got a basic set of features and it should really be in VC

client/semantic/src/themes/flat/collections/form.overrides

@@ -0,0 +1,28 @@
+/*******************************
+           Overrides
+*******************************/
+
+.ui.form input[type="text"],
+.ui.form input[type="email"],
+.ui.form input[type="date"],
+.ui.form input[type="password"],
+.ui.form input[type="number"],
+.ui.form input[type="url"],
+.ui.form input[type="tel"] {
+  border-bottom: 1px solid #DDDDDD;
+}
+
+.ui.form .selection.dropdown {
+  border: none;
+  box-shadow: none !important;
+  border-bottom: 1px solid #DDDDDD;
+  border-radius: 0em !important;
+}
+.ui.form .selection.dropdown > .menu {
+  border-top-width: 1px !important;
+  border-radius: @defaultBorderRadius !important;
+}
+
+.ui.form .ui.icon.input > .icon {
+  width: 1em;
+}

client/semantic/src/themes/flat/collections/form.variables

@@ -0,0 +1,74 @@
+/*******************************
+             Form
+*******************************/
+
+/*-------------------
+       Elements
+--------------------*/
+
+
+/* Text */
+@paragraphMargin: 1em 0em;
+
+/* Field */
+@fieldMargin: 0em 0em 1em;
+
+/* Form Label */
+@labelFontSize: @relative11px;
+@labelTextTransform: uppercase;
+
+@groupedLabelTextTransform: none;
+
+/* Input */
+@inputHorizontalPadding: 0.5em;
+@inputBackground: transparent;
+@inputBorder: none;
+@inputBorderRadius: 0em;
+@inputBoxShadow: none;
+@invertedInputColor: @invertedTextColor;
+
+@textAreaPadding: 1em;
+@textAreaBackground: transparent;
+@textAreaFocusBackground: #EEEEEE;
+@textAreaBorder: 1px solid #DDDDDD;
+
+/* Divider */
+@dividerMargin: 1em 0em;
+
+/* Validation Prompt */
+@validationMargin: 0em 0em 0em 1em;
+@validationArrowOffset: -0.3em;
+
+/*-------------------
+        States
+--------------------*/
+
+/* Disabled */
+
+/* Focus */
+@inputFocusPointerSize: 0px;
+@inputErrorPointerSize: 0px;
+
+/* Dropdown Error */
+@dropdownErrorHoverBackground: #FFF2F2;
+@dropdownErrorActiveBackground: #FDCFCF;
+
+/* Focused Error */
+@inputErrorFocusBackground: @negativeBackgroundColor;
+@inputErrorFocusColor: @negativeColorHover;
+@inputErrorFocusBorder: @negativeBorderColor;
+@inputErrorFocusBoxShadow: @inputErrorPointerSize 0em 0em 0em @negativeColorHover inset;
+
+/* Placeholder */
+@inputPlaceholderColor: lighten(@inputColor, 55);
+@inputPlaceholderFocusColor: lighten(@inputColor, 35);
+@inputErrorPlaceholderColor: lighten(@formErrorColor, 10);
+@inputErrorPlaceholderFocusColor: lighten(@formErrorColor, 5);
+
+/* Loading */
+@formLoaderDimmerColor: rgba(255, 255, 255, 0.6);
+@formLoaderPath: "@{imagePath}/loader-large.gif";
+@formLoaderPosition: 50% 50%;
+
+/* (x) Wide Field */
+@gutterWidth: 1.5em;

client/semantic/src/themes/flat/globals/site.overrides

@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/

client/semantic/src/themes/flat/globals/site.variables

@@ -0,0 +1,107 @@
+/*******************************
+         Site Settings
+*******************************/
+
+/*-------------------
+        Paths
+--------------------*/
+
+@imagePath : "../../themes/default/assets/images";
+@fontPath  : "../../themes/default/assets/fonts";
+
+/*-------------------
+       Fonts
+--------------------*/
+
+@headerFont    : "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
+@pageFont      : "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
+@fontSmoothing : antialiased;
+
+/*-------------------
+      Site Colors
+--------------------*/
+
+/*---  Colors  ---*/
+@blue             : #0074D9;
+@green            : #2ECC40;
+@orange           : #FF851B;
+@pink             : #D9499A;
+@purple           : #A24096;
+@red              : #FF4136;
+@teal             : #39CCCC;
+@yellow           : #FFCB08;
+
+@black            : #191919;
+@grey             : #CCCCCC;
+@white            : #FFFFFF;
+
+/*---  Light Colors  ---*/
+@lightBlue        : #54C8FF;
+@lightGreen       : #2ECC40;
+@lightOrange      : #FF851B;
+@lightPink        : #FF8EDF;
+@lightPurple      : #CDC6FF;
+@lightRed         : #FF695E;
+@lightTeal        : #6DFFFF;
+@lightYellow      : #FFE21F;
+
+@primaryColor     : @blue;
+@secondaryColor   : @black;
+
+
+/*-------------------
+        Page
+--------------------*/
+
+@bodyBackground      : #FCFCFC;
+@fontSize            : 14px;
+@textColor           : rgba(0, 0, 0, 0.8);
+
+@headerMargin        : 1em 0em 1rem;
+@paragraphMargin     : 0em 0em 1em;
+
+@linkColor           : #009FDA;
+@linkUnderline       : none;
+@linkHoverColor      : lighten( @linkColor, 5);
+@linkHoverUnderline  : @linkUnderline;
+
+@highlightBackground : #FFFFCC;
+@highlightColor      : @textColor;
+
+
+
+/*-------------------
+  Background Colors
+--------------------*/
+
+@subtleTransparentBlack : rgba(0, 0, 0, 0.03);
+@transparentBlack       : rgba(0, 0, 0, 0.05);
+@strongTransparentBlack : rgba(0, 0, 0, 0.10);
+
+@subtleTransparentWhite : rgba(255, 255, 255, 0.01);
+@transparentWhite       : rgba(255, 255, 255, 0.05);
+@strongTransparentWhite : rgba(255, 255, 255, 0.01);
+
+/* Used for differentiating neutrals */
+@subtleGradient: linear-gradient(transparent, rgba(0, 0, 0, 0.05));
+
+/* Used for differentiating layers */
+@subtleShadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
+
+
+/*-------------------
+        Grid
+--------------------*/
+
+@columnCount: 16;
+
+/*-------------------
+     Breakpoints
+--------------------*/
+
+@mobileBreakpoint            : 320px;
+@tabletBreakpoint            : 768px;
+@computerBreakpoint          : 992px;
+@largeMonitorBreakpoint      : 1400px;
+@widescreenMonitorBreakpoint : 1900px;
+