Merge pull request #55 from dod-ccpo/ui/panels-and-layout
Ui/panels and layout
This commit is contained in:
andrewdds
GitHub
commit
775e162a8c
@ -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,
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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';
|
||||
|
||||
8
scss/core/_base.scss
Normal file
8
scss/core/_base.scss
Normal file
@ -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;
|
||||
}
|
||||
46
scss/core/_grid.scss
Normal file
46
scss/core/_grid.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
@ -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);
|
||||
$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: '../';
|
||||
@ -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
|
||||
|
||||
46
scss/elements/_panels.scss
Normal file
46
scss/elements/_panels.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,3 @@
|
||||
section {
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
|
||||
|
||||
28
templates/styleguide.html.to
Normal file
28
templates/styleguide.html.to
Normal file
@ -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 %}
|
||||
Loading…
x
Reference in New Issue
Block a user