Merge pull request #55 from dod-ccpo/ui/panels-and-layout

Ui/panels and layout

atst/app.py

@@ -29,6 +29,12 @@ def make_app(config, deps, **kwargs):
             name="login",
         ),
         url(r"/home", MainHandler, {"page": "home"}, name="home"),
+        url(
+            r"/styleguide",
+            MainHandler,
+            {"page": "styleguide"},
+            name="styleguide",
+        ),
         url(
             r"/workspaces/blank",
             MainHandler,

scss/README.md

@@ -24,3 +24,59 @@ Overrides and Modifications
 ---
 
 When making modifications to the default USWDS components, please refer to the original source, and make a `.scss` file of the same name. Annotate the top of the file with a reference to the USWDS documentation and source code.
+
+Row/Column System
+---
+
+A simple, flexbox-powered row/column system.
+
+```
+<div class='row'>
+  <div class='col'></div>
+  <div class='col'></div>
+  <div class='col'></div>
+</div>
+```
+
+To make a column expand to fill up all available space relative to its sibling columns:
+
+```
+<div class='row'>
+  <div class='col col--grow'></div>
+  <div class='col'></div>
+  <div class='col'></div>
+</div>
+```
+
+To add uniform padding to rows and columns:
+
+```
+<div class='row row--pad'>
+  <div class='col col--pad'></div>
+  <div class='col col--pad'></div>
+  <div class='col col--pad'></div>
+</div>
+```
+
+Layouts and behaviors for specific row/col use cases should be handled on a case by case basis:
+
+```
+<div class='row row--pad foo'>
+  <div class='col col--pad foo__bar'></div>
+  <div class='col col--pad'></div>
+  <div class='col col--pad'></div>
+</div>
+
+...
+
+.foo.row {
+  .col {
+    flex: 1;
+  }
+  .foo__bar {
+    flex: 2;
+  }
+}
+```
+
+Page templates that inherit from the `base.html` template should render `.col` elements at their top level, with no other wrapping elements.

scss/atat.scss

@@ -1,10 +1,14 @@
 @import 'core/variables';
 @import '../node_modules/uswds/src/stylesheets/uswds';
 
+@import 'core/base';
+@import 'core/grid';
+
 @import 'elements/typography';
 @import 'elements/inputs';
 @import 'elements/buttons';
 @import 'elements/tables';
+@import 'elements/panels';
 
 @import 'components/site_action';
 @import 'components/empty_state';

scss/core/_base.scss

@@ -0,0 +1,8 @@
+/*
+ * Base Styles
+ * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/core/_base.scss
+ */
+
+body {
+  background-color: $color-gray-lightest;
+}

scss/core/_grid.scss

@@ -0,0 +1,46 @@
+/*
+ * Grid
+ * @see https://designsystem.digital.gov/components/grids/
+ * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/core/_grid.scss
+ */
+
+// Roll our own simple grid system
+// USWDS grid system is fairly outdated and does not serve the needs of this project
+// We are implementing a simple flexbox row/column system
+
+@mixin grid-row {
+  @include media($medium-screen) {
+    display: flex;
+    flex-direction: row;
+  }
+}
+
+@mixin grid-pad {
+  @include padding(null $site-margins-mobile);
+
+  @include media($medium-screen) {
+    @include padding(null $site-margins);
+  }
+}
+
+.row {
+  @include grid-row;
+
+  &.row--pad {
+    @include grid-pad;
+  }
+
+  &.row--max {
+    max-width: $site-max-width;
+  }
+}
+
+.col {
+  &.col--pad {
+    @include grid-pad;
+  }
+
+  &.col--grow {
+    flex-grow: 1;
+  }
+}

scss/core/_variables.scss

@@ -3,8 +3,8 @@
  * ===================================================
  */
 
-// What is this?
+// Standard gap
-$nav-width: 300px;
+$gap: .8rem; // 8px at 10px $em-base
 
 
 /*
@@ -13,6 +13,7 @@ $nav-width: 300px;
  * ===================================================
  */
 
+// $em-base:             10px; This is not defaulted in USWDS, so we cant override it
 $base-font-size:      1.7rem;
 $small-font-size:     1.4rem;
 $lead-font-size:      2rem;
@@ -117,9 +118,9 @@ $grid-columns-medium: 6;
 $grid-columns-large: 12;
 
 // @media single-keyword helpers
-$small: new-breakpoint(min-width $small-screen $grid-columns-small);
+// $small: new-breakpoint(min-width $small-screen $grid-columns-small);
-$medium: new-breakpoint(min-width $medium-screen $grid-columns-medium);
+// $medium: new-breakpoint(min-width $medium-screen $grid-columns-medium);
-$large: new-breakpoint(min-width $large-screen $grid-columns-large);
+// $large: new-breakpoint(min-width $large-screen $grid-columns-large);
 
 // Set the base path for assets (used for font and image paths below)
 $asset-path: '../';
@@ -134,9 +135,9 @@ $asset-pipeline:      false;
 // Magic Numbers
 $text-max-width:                66ch; // 66 characters per line
 $lead-max-width:                77rem;
-$site-max-width:                1040px;
+$site-max-width:                1200px; // previously 1040px;
-$site-margins:                  3rem;
+$site-margins:                  $gap; // previously 3rem;
-$site-margins-mobile:           1.5rem;
+$site-margins-mobile:           $gap / 2; // previously 1.5rem;
 $article-max-width:             600px;
 $input-max-width:               46rem;
 $label-border-radius:           2px;
@@ -146,7 +147,7 @@ $button-border-radius:          5px;
 $box-shadow:                    0 0 2px $color-shadow;
 $focus-outline:                 2px dotted $color-gray-light;
 $focus-spacing:                 3px;
-$nav-width:                     951px;
+$nav-width:                     300px; // previously 951px;
 $sidenav-current-border-width:  0.4rem; // must be in rem for math
 
 // 44 x 44 pixels hit target following Apple iOS Human Interface

scss/elements/_panels.scss

@@ -0,0 +1,46 @@
+/*
+ * Panels
+ * A generic block container
+ */
+
+@mixin panel-base {
+  background-color: $color-white;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  border-top-style: solid;
+  border-bottom-style: solid;
+  margin-bottom: $site-margins-mobile * 2;
+
+  @include media($medium-screen) {
+    margin-bottom: $site-margins * 2;
+  }
+}
+
+@mixin panel-theme-default {
+  border-top-color: $color-black;
+  border-bottom-color: $color-gray-light;
+}
+
+.panel {
+  @include panel-base;
+  @include panel-theme-default;
+}
+
+/*
+ * Panel Container
+ * Grid container for panel blocks
+ */
+
+.panel-container {
+  @include grid-row;
+  @include grid-pad;
+  @include margin(($site-margins-mobile * 2) null);
+
+  @include media($medium-screen) {
+    @include margin(($site-margins * 2) null);
+  }
+
+  > .col {
+    @include grid-pad;
+  }
+}

scss/sections/_main.scss

@@ -1,3 +1,3 @@
 section {
   margin-bottom: 10rem;
-}
+}

scss/sections/_navigation.scss

@@ -1,3 +1,7 @@
+.usa-header {
+  background-color: $color-white;
+}
+
 .usa-navbar {
   height: 5rem;
   width: 5%;
@@ -13,4 +17,4 @@
   li:last-child {
     padding-left: 3rem;
   }
-}
+}

templates/base.html.to

@@ -13,11 +13,11 @@
 
   {% include 'header.html.to' %}
 
-  <section class='usa-grid'>
+  <div class='panel-container'>
     {% block content %}
       these are not the droids you are looking for
     {% end %}
-  </section>
+  </div>
 
 
 

templates/styleguide.html.to

@@ -0,0 +1,28 @@
+{% extends "base.html.to" %}
+
+{% block content %}
+
+
+<div class='col'>
+  <div class='panel'>
+    <p>This is a panel</p>
+  </div>
+</div>
+
+<div class='col col--grow'>
+  <div class='panel'>
+    <p>This is a panel</p>
+
+    <div class='row'>
+      <div class='col col--grow'>col 1</div>
+      <div class='col col--grow'>col 2</div>
+    </div>
+  </div>
+
+  <div class='panel'>
+    Another panel
+  </div>
+</div>
+
+
+{% end %}