mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-02-23 01:54:18 -08:00
1b707cbc5c
* 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
68 lines
No EOL
2.6 KiB
Markdown
68 lines
No EOL
2.6 KiB
Markdown
# 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.
|
|
- <h> and <p> tags were defined using USWDS spacing, color, and typography tokens.
|
|
- Designs show <h> and <p> 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:
|
|
1. Include or point to a USWDS settings file:
|
|
- `@import "./uswds-settings.scss"`
|
|
|
|
2. Point to the USWDS source code:
|
|
- `@import "../../node_modules/uswds"`
|
|
|
|
3. 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 |