From 3875d4efd15b454625f4058a8a10cd4b3c59c5a5 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Fri, 6 Jul 2018 14:34:52 -0400 Subject: [PATCH 01/22] Create a styleguide page --- atst/app.py | 6 ++++++ templates/styleguide.html.to | 25 +++++++++++++++++++++++++ 2 files changed, 31 insertions(+) create mode 100644 templates/styleguide.html.to diff --git a/atst/app.py b/atst/app.py index 40e1d96d..094a61b1 100644 --- a/atst/app.py +++ b/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, diff --git a/templates/styleguide.html.to b/templates/styleguide.html.to new file mode 100644 index 00000000..4982a56a --- /dev/null +++ b/templates/styleguide.html.to @@ -0,0 +1,25 @@ +{% extends "base.html.to" %} + +{% block content %} + +
+ +

AT-ST Component Styleguide

+ +
+
+
+

This is a panel

+
+
+ +
+
+

This is a panel

+
+
+
+ +
+ +{% end %} From 034a2feddf303ed665d59e2beaf365649484f7b0 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Fri, 6 Jul 2018 14:35:04 -0400 Subject: [PATCH 02/22] Base background color --- scss/core/_base.scss | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 scss/core/_base.scss diff --git a/scss/core/_base.scss b/scss/core/_base.scss new file mode 100644 index 00000000..d56847b9 --- /dev/null +++ b/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; +} From 17519d3967f277c6f40889ac522e5863dd9a0f16 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Fri, 6 Jul 2018 14:35:28 -0400 Subject: [PATCH 03/22] modify some variables --- scss/core/_variables.scss | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/scss/core/_variables.scss b/scss/core/_variables.scss index f7f565c6..756be969 100644 --- a/scss/core/_variables.scss +++ b/scss/core/_variables.scss @@ -3,8 +3,8 @@ * =================================================== */ -// What is this? -$nav-width: 300px; +// Standard gap +$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; @@ -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-margins: 3rem; -$site-margins-mobile: 1.5rem; +$site-max-width: 1200px; // previously 1040px; +$site-margins: $gap; // previously 3rem; +$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 From 77600abfa6771e7fff69fc152ab495f93d2dfbcd Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Fri, 6 Jul 2018 14:35:40 -0400 Subject: [PATCH 04/22] Imports --- scss/atat.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/scss/atat.scss b/scss/atat.scss index 80d9f0ad..f04b895a 100644 --- a/scss/atat.scss +++ b/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'; From af96956c11de3c93b6da9f3141b31e253689bdd0 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Fri, 6 Jul 2018 14:35:54 -0400 Subject: [PATCH 05/22] remove the global grid wrapper --- templates/base.html.to | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/base.html.to b/templates/base.html.to index 2c99539c..0a063f22 100644 --- a/templates/base.html.to +++ b/templates/base.html.to @@ -13,11 +13,11 @@ {% include 'header.html.to' %} -
+
{% block content %} these are not the droids you are looking for {% end %} -
+ From 6d85a1ac8189a346a9e207443de4486627070272 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Fri, 6 Jul 2018 14:36:00 -0400 Subject: [PATCH 06/22] Panel styles --- scss/elements/_panels.scss | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 scss/elements/_panels.scss diff --git a/scss/elements/_panels.scss b/scss/elements/_panels.scss new file mode 100644 index 00000000..1666cbf9 --- /dev/null +++ b/scss/elements/_panels.scss @@ -0,0 +1,27 @@ +/* + * 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; + + @include media($medium) { + margin-bottom: $site-margins; + } +} + +@mixin panel-theme-default { + border-top-color: $color-black; + border-bottom-color: $color-gray-dark; +} + +.panel { + @include panel-base; + @include panel-theme-default; +} From be088e971d1220aaf86183ec7e844af38e30291b Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Fri, 6 Jul 2018 14:36:10 -0400 Subject: [PATCH 07/22] Grid customizations --- scss/core/_grid.scss | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 scss/core/_grid.scss diff --git a/scss/core/_grid.scss b/scss/core/_grid.scss new file mode 100644 index 00000000..7653465e --- /dev/null +++ b/scss/core/_grid.scss @@ -0,0 +1,42 @@ +/* + * Grid + * @see https://designsystem.digital.gov/components/grids/ + * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/core/_grid.scss + */ + +// The default grid has no independent styling for a generic "cell" +// Lets add one! +@mixin usa-cell { + @include padding(null $site-margins-mobile); + + @include media($medium-screen) { + @include padding(null $site-margins); + } +} + +// Redefine the grid +// We need a full-width grid, so make .usa-full-grid actually do that. +// By default it just removed the padding, which didn't really make sense. +.usa-grid-full { + max-width: none; + @include padding(null $site-margins-mobile); + + @include media($medium) { + @include padding(null $site-margins); + } + + // Flexbox-ize the grid + &.usa-grid__flex { + display: flex; + flex-direction: row; + } +} + +.usa-cell, +[class*='usa-width-'] { + @include usa-cell; +} + +.usa-width-grow { + flex-grow: 1; +} From 0ab18ae319d5093226edd36af812d7ec856f4124 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Fri, 6 Jul 2018 16:03:14 -0400 Subject: [PATCH 08/22] Just yur basic flexbox row/col system --- scss/core/_grid.scss | 46 ++++++++++++++++++++++++-------------------- 1 file changed, 25 insertions(+), 21 deletions(-) diff --git a/scss/core/_grid.scss b/scss/core/_grid.scss index 7653465e..f45ee8e4 100644 --- a/scss/core/_grid.scss +++ b/scss/core/_grid.scss @@ -4,9 +4,18 @@ * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/core/_grid.scss */ -// The default grid has no independent styling for a generic "cell" -// Lets add one! -@mixin usa-cell { +// 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) { @@ -14,29 +23,24 @@ } } -// Redefine the grid -// We need a full-width grid, so make .usa-full-grid actually do that. -// By default it just removed the padding, which didn't really make sense. -.usa-grid-full { - max-width: none; - @include padding(null $site-margins-mobile); +.row { + @include grid-row; - @include media($medium) { - @include padding(null $site-margins); + &.row--pad { + @include grid-pad; } - // Flexbox-ize the grid - &.usa-grid__flex { - display: flex; - flex-direction: row; + &.row--max { + max-width: $site-max-width; } } -.usa-cell, -[class*='usa-width-'] { - @include usa-cell; -} +.col { + &.col--pad { + @inclue grid-pad; + } -.usa-width-grow { - flex-grow: 1; + &.col--grow { + flex-grow: 1; + } } From cc83fa3b525fc519f3e9dc7fcc7344d28b84345a Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Fri, 6 Jul 2018 16:03:55 -0400 Subject: [PATCH 09/22] Comment out breakpoint vars that are (silently!!!) breaking things due to undefined functions --- scss/core/_variables.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/scss/core/_variables.scss b/scss/core/_variables.scss index 756be969..2301e58e 100644 --- a/scss/core/_variables.scss +++ b/scss/core/_variables.scss @@ -118,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); -$medium: new-breakpoint(min-width $medium-screen $grid-columns-medium); -$large: new-breakpoint(min-width $large-screen $grid-columns-large); +// $small: new-breakpoint(min-width $small-screen $grid-columns-small); +// $medium: new-breakpoint(min-width $medium-screen $grid-columns-medium); +// $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: '../'; From de8340b212f4b711e1019b0f60b04d313ff94e7b Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Fri, 6 Jul 2018 16:04:09 -0400 Subject: [PATCH 10/22] panel rows --- scss/atat.scss | 1 + scss/elements/_panel-rows.scss | 19 +++++++++++++++++++ 2 files changed, 20 insertions(+) create mode 100644 scss/elements/_panel-rows.scss diff --git a/scss/atat.scss b/scss/atat.scss index f04b895a..3506a717 100644 --- a/scss/atat.scss +++ b/scss/atat.scss @@ -9,6 +9,7 @@ @import 'elements/buttons'; @import 'elements/tables'; @import 'elements/panels'; +@import 'elements/panel-rows'; @import 'components/site_action'; @import 'components/empty_state'; diff --git a/scss/elements/_panel-rows.scss b/scss/elements/_panel-rows.scss new file mode 100644 index 00000000..064140ee --- /dev/null +++ b/scss/elements/_panel-rows.scss @@ -0,0 +1,19 @@ +/* + * Panel Rows/Cols + * An extension of the generic Row/Col system + * for grids of panels with evenly spaced gutters + */ + +.panel-row { + @include grid-row; + @include grid-pad; + + > .col { + @include grid-pad; + margin-bottom: $site-margins-mobile; + + @include media($medium-screen) { + margin-bottom: $site-margins; + } + } +} From 65fa41964ea21201b60565ab5c04465d1f74237f Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Fri, 6 Jul 2018 16:04:22 -0400 Subject: [PATCH 11/22] Base panel styles --- scss/elements/_panels.scss | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/scss/elements/_panels.scss b/scss/elements/_panels.scss index 1666cbf9..8498ec25 100644 --- a/scss/elements/_panels.scss +++ b/scss/elements/_panels.scss @@ -9,16 +9,11 @@ border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; - margin-bottom: $site-margins-mobile; - - @include media($medium) { - margin-bottom: $site-margins; - } } @mixin panel-theme-default { border-top-color: $color-black; - border-bottom-color: $color-gray-dark; + border-bottom-color: $color-gray-light; } .panel { From 67fc5c1d725110d442f27ca125a749f38dcd74c9 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Fri, 6 Jul 2018 16:04:34 -0400 Subject: [PATCH 12/22] global container styles --- scss/sections/_main.scss | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/scss/sections/_main.scss b/scss/sections/_main.scss index 9fb92a24..a4159054 100644 --- a/scss/sections/_main.scss +++ b/scss/sections/_main.scss @@ -1,3 +1,11 @@ +.container { + @include margin(($site-margins-mobile * 2) null); + + @include media($medium-screen) { + @include margin(($site-margins * 2) null); + } +} + section { margin-bottom: 10rem; -} \ No newline at end of file +} From 35a5a62b576497413e372f7f01b9c3530cecef8c Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Fri, 6 Jul 2018 16:04:49 -0400 Subject: [PATCH 13/22] Change global container classname --- templates/base.html.to | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/base.html.to b/templates/base.html.to index 0a063f22..41d569b6 100644 --- a/templates/base.html.to +++ b/templates/base.html.to @@ -13,7 +13,7 @@ {% include 'header.html.to' %} -
+
{% block content %} these are not the droids you are looking for {% end %} From 51110c30bf68f2addb9ddae10fd1851cc7861bac Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Fri, 6 Jul 2018 16:05:01 -0400 Subject: [PATCH 14/22] Add some row/col and panel examples --- templates/styleguide.html.to | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/templates/styleguide.html.to b/templates/styleguide.html.to index 4982a56a..12fc3f92 100644 --- a/templates/styleguide.html.to +++ b/templates/styleguide.html.to @@ -2,24 +2,23 @@ {% block content %} -
- -

AT-ST Component Styleguide

- -
-
+
+

This is a panel

-
+

This is a panel

+ +
+
col 1
+
col 2
+
-
- {% end %} From 6c17eb684a81bda25f9cd220994f482ad20bb609 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Fri, 6 Jul 2018 16:05:31 -0400 Subject: [PATCH 15/22] Briefly document the Row/Column system --- scss/README.md | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/scss/README.md b/scss/README.md index 79235853..29f3eec2 100644 --- a/scss/README.md +++ b/scss/README.md @@ -24,3 +24,57 @@ 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 +--- + +The USWDS current grid system is fairly outdated and does not cleanly meet the needs of the AT-ST UI. A simplified, flexbox-powered row/column system is implemented in its place. + +``` +
+
+
+
+
+``` + +To make a column expand to fill up all available space relative to its sibling columns: + +``` +
+
+
+
+
+``` + +To add uniform padding to rows and columns: + +``` +
+
+
+
+
+``` + +Layouts and behaviors for specific row/col use cases should be handled on a case by case basis: + +``` +
+
+
+
+
+ +... + +.foo.row { + .col { + flex: 1; + } + .foo__bar { + flex: 2; + } +} +``` From 4425d37cb04e3a10a99ee6780a97353855a39e5a Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 9 Jul 2018 09:23:53 -0400 Subject: [PATCH 16/22] Dont need panel rows --- scss/atat.scss | 1 - scss/elements/_panel-rows.scss | 19 ------------------- 2 files changed, 20 deletions(-) delete mode 100644 scss/elements/_panel-rows.scss diff --git a/scss/atat.scss b/scss/atat.scss index 3506a717..f04b895a 100644 --- a/scss/atat.scss +++ b/scss/atat.scss @@ -9,7 +9,6 @@ @import 'elements/buttons'; @import 'elements/tables'; @import 'elements/panels'; -@import 'elements/panel-rows'; @import 'components/site_action'; @import 'components/empty_state'; diff --git a/scss/elements/_panel-rows.scss b/scss/elements/_panel-rows.scss deleted file mode 100644 index 064140ee..00000000 --- a/scss/elements/_panel-rows.scss +++ /dev/null @@ -1,19 +0,0 @@ -/* - * Panel Rows/Cols - * An extension of the generic Row/Col system - * for grids of panels with evenly spaced gutters - */ - -.panel-row { - @include grid-row; - @include grid-pad; - - > .col { - @include grid-pad; - margin-bottom: $site-margins-mobile; - - @include media($medium-screen) { - margin-bottom: $site-margins; - } - } -} From 116b731edc245c4b16074d6e464155dbd6ea53be Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 9 Jul 2018 09:24:56 -0400 Subject: [PATCH 17/22] Use .panel-container on base template --- scss/elements/_panels.scss | 24 ++++++++++++++++++++++++ scss/sections/_main.scss | 8 -------- templates/base.html.to | 2 +- 3 files changed, 25 insertions(+), 9 deletions(-) diff --git a/scss/elements/_panels.scss b/scss/elements/_panels.scss index 8498ec25..2ed294d6 100644 --- a/scss/elements/_panels.scss +++ b/scss/elements/_panels.scss @@ -9,6 +9,11 @@ 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 { @@ -20,3 +25,22 @@ @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; + } +} diff --git a/scss/sections/_main.scss b/scss/sections/_main.scss index a4159054..063b70e7 100644 --- a/scss/sections/_main.scss +++ b/scss/sections/_main.scss @@ -1,11 +1,3 @@ -.container { - @include margin(($site-margins-mobile * 2) null); - - @include media($medium-screen) { - @include margin(($site-margins * 2) null); - } -} - section { margin-bottom: 10rem; } diff --git a/templates/base.html.to b/templates/base.html.to index 41d569b6..dca55fe8 100644 --- a/templates/base.html.to +++ b/templates/base.html.to @@ -13,7 +13,7 @@ {% include 'header.html.to' %} -
+
{% block content %} these are not the droids you are looking for {% end %} From 5a2188081f6077664ee60457ff07477dc7df5067 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 9 Jul 2018 09:25:09 -0400 Subject: [PATCH 18/22] give nav a white background so it looks less broken --- scss/sections/_navigation.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/scss/sections/_navigation.scss b/scss/sections/_navigation.scss index 02ed3b22..3de38a0f 100644 --- a/scss/sections/_navigation.scss +++ b/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; } -} \ No newline at end of file +} From 75f7ae6defd824b96fd7b7e033093e6c7008cce9 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 9 Jul 2018 09:25:22 -0400 Subject: [PATCH 19/22] Remove wrapper from styleguide page --- templates/styleguide.html.to | 34 +++++++++++++++++++--------------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/templates/styleguide.html.to b/templates/styleguide.html.to index 12fc3f92..62ff873e 100644 --- a/templates/styleguide.html.to +++ b/templates/styleguide.html.to @@ -2,23 +2,27 @@ {% block content %} -
-
-
-

This is a panel

-
-
-
-
-

This is a panel

- -
-
col 1
-
col 2
-
-
+
+
+

This is a panel

+
+
+

This is a panel

+ +
+
col 1
+
col 2
+
+
+ +
+ Another panel +
+
+ + {% end %} From 0ccbaeb5e80bd10264f397760d46f946aed6dded Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 9 Jul 2018 09:25:31 -0400 Subject: [PATCH 20/22] More documentation --- scss/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/scss/README.md b/scss/README.md index 29f3eec2..0b3eb81e 100644 --- a/scss/README.md +++ b/scss/README.md @@ -78,3 +78,5 @@ Layouts and behaviors for specific row/col use cases should be handled on a case } } ``` + +Page templates that inherit from the `base.html` template should render `.col` elements at their top level, with no other wrapping elements. From ae25c3004948b74ac15b6eb6bc687d57c7c1f723 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 9 Jul 2018 10:20:14 -0400 Subject: [PATCH 21/22] simplified readme description of grid system --- scss/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/README.md b/scss/README.md index 0b3eb81e..2df6de9d 100644 --- a/scss/README.md +++ b/scss/README.md @@ -28,7 +28,7 @@ When making modifications to the default USWDS components, please refer to the o Row/Column System --- -The USWDS current grid system is fairly outdated and does not cleanly meet the needs of the AT-ST UI. A simplified, flexbox-powered row/column system is implemented in its place. +A simple, flexbox-powered row/column system. ```
From bcbec835122da5483c2b81148a88f88c0d11ea3f Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 9 Jul 2018 10:22:28 -0400 Subject: [PATCH 22/22] fix typo --- scss/core/_grid.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/core/_grid.scss b/scss/core/_grid.scss index f45ee8e4..1e00a9b9 100644 --- a/scss/core/_grid.scss +++ b/scss/core/_grid.scss @@ -37,7 +37,7 @@ .col { &.col--pad { - @inclue grid-pad; + @include grid-pad; } &.col--grow {