Implemented USA design standards

app/views/home.liquid

@@ -1,35 +1,37 @@
-<section>
+<section class="usa-grid">
   <div class="header">
-    <img class="logo" style="float: left" src="https://18f.gsa.gov/assets/images/logo-18f.png">
+    <img class="logo usa-width-one-sixth" style="float: left" src="https://18f.gsa.gov/assets/images/logo-18f.png">
     <br/>
     <h1 class="title">{{ title }}</h1>
     <div style="clear: both"></div>
   </div>
   </br>
 </section>
 
-<h2>API endpoints</h2>
-
-<ul>
-{% for name in endpoints %}
-  <li><a href="/v1/{{ name }}">{{ name }}</a></li>
-{% endfor %}
-</ul>
-
-{% if examples.size > 0 %}
-  <h2>Examples</h2>
+<section class="usa-grid">
+  <h2>API endpoints</h2>
 
   <ul>
-  {% for ex in examples %}
-    <li><a href="{{ ex.link }}">{{ ex.name }}</a> {{ ex.description }}</li>
+  {% for name in endpoints %}
+    <li><a href="/v1/{{ name }}">{{ name }}</a></li>
   {% endfor %}
   </ul>
-{% endif %}
 
-<h2 class="bottom-margin">Browse Data Details by Category</h2>
-<div class="categories">
-  <div id="categories-list" class="categories__column"></div>
-</div>
+  {% if examples.size > 0 %}
+    <h2>Examples</h2>
+
+    <ul>
+    {% for ex in examples %}
+      <li><a href="{{ ex.link }}">{{ ex.name }}</a> {{ ex.description }}</li>
+    {% endfor %}
+    </ul>
+  {% endif %}
+
+  <h2 class="bottom-margin">Browse Data Details by Category</h2>
+  <div class="categories">
+    <div id="categories-list" class="categories__column"></div>
+  </div>
+</section>
 
 <script>
   var categories = {{ categories }} ;

public/lib/usa/_scss/all.scss

@@ -0,0 +1,39 @@
+// Vendor -------------- //
+
+@import 'lib/bourbon/bourbon';
+@import 'lib/neat/neat';
+@import 'lib/normalize';
+
+
+// Core -------------- //
+
+@import 'core/grid-settings';
+@import 'core/defaults';
+@import 'core/variables';
+@import 'core/base';
+@import 'core/grid';
+@import 'core/utilities';
+
+
+// Elements -------------- //
+// Styles basic html elements
+
+@import 'elements/typography';
+@import 'elements/list';
+@import 'elements/inputs';
+@import 'elements/buttons';
+@import 'elements/table';
+@import 'elements/figure';
+@import 'elements/labels';
+
+
+// Components -------------- //
+
+@import 'components/skipnav';
+@import 'components/disclaimer';
+@import 'components/sidenav';
+@import 'components/footer';
+@import 'components/forms';
+@import 'components/search';
+@import 'components/alerts';
+@import 'components/accordions';

public/lib/usa/_scss/components/_accordions.scss

@@ -0,0 +1,95 @@
+// Variables
+
+$accordion-border: 3px solid $color-gray-lightest;
+
+// Accordion Styles
+
+.usa-accordion,
+.usa-accordion-bordered {
+
+  + .usa-accordion,
+  + .usa-accordion-bordered {
+    margin-top: 1rem;
+  }
+
+  > ul {
+    color: $color-base;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+
+    > li {
+      background-color: $color-gray-lightest;
+      font-family: $font-sans;
+      list-style: none;
+      margin-bottom: 6px;
+      width: 100%;
+    }
+  }
+
+  button[aria-expanded=false] {
+    background-image: url('../img/plus.png');
+    background-image: url('../img/plus.svg');
+    background-repeat: no-repeat;
+    background-size: 1.3rem;
+  }
+
+  button {
+    background-color: $color-gray-lightest;
+    background-image: url('../img/minus.png');
+    background-image: url('../img/minus.svg');
+    background-position: right 3rem center;
+    background-repeat: no-repeat;
+    background-size: 13px;
+    color: $color-base;
+    cursor: pointer;
+    display: inline-block;
+    font-family: $font-sans;
+    margin: 0;
+    padding: {
+      bottom: 1.5rem;
+      left: 3rem;
+      right: 5.5rem;
+      top: 1.5rem;
+    }
+    width: 100%;
+
+    &:focus {
+      box-shadow: $focus-shadow;
+    }
+
+    &:hover {
+      background-color: $color-gray-lighter;
+      color: $color-base;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      margin: 0;
+    }
+  }
+}
+
+.usa-accordion-bordered {
+  .usa-accordion-content {
+    border: {
+      bottom: $accordion-border;
+      left: $accordion-border;
+      right: $accordion-border;
+    }
+  }
+}
+
+.usa-accordion-content {
+  display: block;
+  background-color: white;
+  overflow: auto;
+  padding: 3rem;
+
+  > *:first-child {
+    margin-top: 0;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}

public/lib/usa/_scss/components/_alerts.scss

@@ -0,0 +1,78 @@
+.usa-alert {
+  @include media($medium-screen) {
+    background-size: 5.2rem;
+  }
+  background-color: #eeeeee;  
+  background-position: 1rem 2rem;
+  background-repeat: no-repeat;
+  background-size: 4rem;
+  margin-top: 1.5em;
+  padding: 1em;
+
+  ul {
+    margin: {
+      bottom: 0;
+      top: 1em;
+    }
+  }
+}
+
+.usa-alert-icon {
+  display: table-cell;
+  padding-right: 1rem;
+}
+
+.usa-alert-body {
+  @include media($medium-screen) {
+    padding-left: 5rem;
+  }
+  display: table-cell;
+  padding-left: 3.5rem;
+  vertical-align: top;
+}
+
+.usa-alert-heading {
+  @include media($medium-screen) {
+    margin-top: .3rem;
+  }
+  margin: {
+    bottom: .3rem;
+    top: 0;
+  }
+}
+
+.usa-alert-text {
+  font-family: $font-sans;
+  margin: {
+    bottom: 0;
+    top: 0;
+  }
+}
+
+.usa-alert-success {
+  background-color: #E5FCDE;
+  background-image: url('../img/alerts/success.png');  
+  background-image: url('../img/alerts/success.svg');  
+}
+
+.usa-alert-warning {
+  background-color: #FDF7DC;
+  background-image: url('../img/alerts/warning.png');  
+  background-image: url('../img/alerts/warning.svg');   
+}
+
+.usa-alert-error {
+  background-color: #F9DEDE;
+  background-image: url('../img/alerts/error.png');  
+  background-image: url('../img/alerts/error.svg');   
+}
+
+.usa-alert-info {
+  background-color: #E8F5FA;
+  background-image: url('../img/alerts/info.png');  
+  background-image: url('../img/alerts/info.svg');   
+}
+
+.usa-alert-no_icon {
+ background-image: none; 
+}

public/lib/usa/_scss/components/_disclaimer.scss

@@ -0,0 +1,25 @@
+.usa-disclaimer {
+  @include media($small-screen) {
+    font-size: $h5-font-size;
+  }
+  background-color: $color-gray-lightest;
+  font-size: $h6-font-size;
+  padding: {
+    bottom: .5rem;
+    top: .5rem;
+  }
+}
+
+// This hides the stage note (i.e. alpha, beta, etc) of the disclaimer for 
+// anything smaller than large screen sizes
+.usa-disclaimer-stage {
+  @include media($large-screen) {
+    display: block;
+  }
+  display: none;
+  float: right;
+}
+
+.usa-flag_icon {
+  margin-right: .2rem;
+}