mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-02-22 09:41:26 -08:00

* Revert "dockerize front end (#558)"

This reverts commit 89c23faf7a.

* cleans up global.scss file

* removes all unused styles

* adds h1 and h2 via tokens

* adds design to developer pipeline

* adds headers to about page

* removes heading from logo

* adds headings to HowYouHelp and MapLegend

* adds headers to explore tool page

* updates about page with p tags

* add margin-bottom spacers

* updates areaDetail with p and h tags

* update p.secondary margin-top

* sticky footer on contact page

* fixes spacing in footer

* update designer process

2021-09-09 10:02:56 -07:00

2.6 KiB

Raw Blame History

Design to developer pipeline

This document tries to capture the process for designers and developers

Designer process
Developer process

Designer process

Designers are using a Sketch library from USWDS to ensure elements brought into the design are using USWDS components and tokens.
and
tags were defined using USWDS spacing, color, and typography tokens.
Designs show and
tags in context using realistic content (though content is subject to change).
Designs also show additional spacing tokens used for containers.
Designs show the various breakpoints (using USWDS tokens as guidance) to indicate how elements shift between narrow and wide screen widths.
If there is not a USWDS component available to fulfill an interaction need, a custom design is created, keeping in mind scalability, the larger design system, and responsiveness.

Developer process

There are a number of ways that the app is styled.

global.scss
trusswork styling
sass modules (component level)
map styling

global.scss

This file is meant to be central location to capture all global styles that appear on all pages for reusables HTML elements. This global sass file is in the styles folder. The theme folder in the styles folder houses all the styles from USWDS.

The structure of the global.scss file is in accordance to the fundamental usage of USWDS: https://designsystem.digital.gov/documentation/fundamentals/

There are 3 things that should be included in this file:

Include or point to a USWDS settings file:

@import "./uswds-settings.scss"

Point to the USWDS source code:

@import "../../node_modules/uswds"

Include or point to your project's custom Sass. This is the bulk of the file and may be separated out in the future.

Adding the following to the uswds-settings.scss file allows us to use the grid-prefixes and utilty mixins:

$theme-namespace: (
  "grid": (
    namespace: "grid-",
    output: true,
  ),
  "utility": (
    namespace: "u-",
    output: true,
  ),
);

With these available to the global.scss file, developers can implement designs that refer to tokens identified in the designs.

Trusswork styling

When importing a component from Trussworks, their components can be styled directly in-line with classes. A good example of this is the Grid component.

SASS modules

Each component has its own styling. This offers a way to keep the global.scss minimal with global styles only. It's still TBD on how to get the USWDS styles to apply directly to components.

Map styling

The map's styling is largely outside of SASS. It controlled via data/mapStyle.tsx

2.6 KiB Raw Blame History