Implement frontend build using CFPB Design System 2.0.1 #96
Conversation
viewer/static_src/css/crawler.less
Outdated
| .u-crawl_text { | ||
| font-weight: bold; | ||
| padding-right: 5px; | ||
| margin-bottom: 15px; | ||
| } | ||
|
|
||
| .u-crawl_date { | ||
| display: flex; | ||
| } | ||
|
|
||
| .u-help_text { | ||
| margin-top: 15px; | ||
| margin-bottom: 30px; | ||
| } |
There was a problem hiding this comment.
Ideally, these should be updated to u-crawl-text, u-crawl-date, and u-help-text, unless they are elements, in which case they should be separated by a double underscore. E.g. if u-crawl is the block, u-crawl__date would be the element.
There was a problem hiding this comment.
Thanks @anselmbradford! I'm still getting used to the new naming conventions. I took a stab at this in eed3133: I made crawl-date an element (the div showing "Data last updated") and crawl-date__text its child text. The help-text element is distinct from these and is just a way to style the "Check out the Common searches page for examples". Which of these require a u- prefix -- is that only for utility mixins that are used throughout a set of pages?
There was a problem hiding this comment.
Essentially yea… since we divvied a lot up into atoms (a-), molecules (m-), and organisms (o-), u- is a way to have a fourth bucket for things that don't fit as a component and are more of a one-off utility.
This PR adds an esbuild-based frontend build to this project using the CFPB Design System release 2.0.1. The previous frontend "build" downloaded compiled CSS from consumerfinance.gov instead of building CSS itself. This broke recently when the cf.gov codebase was modified and the HTML/CSS in this project wasn't updated. The various Django templates in this project have been updated to work properly with the DS 2.0.1.
To build, you can use
yarn build(oryarn watchto watch). Then run a local server with./manage.py runserver(after creating your virtualenv andpip install -r requirements/base.txt).URLs to check:
Note that one side effect of this change is that this project no longer uses Avenir Next, since that font is not distributed with the CFPB DS and downloading it from cf.gov/GH.com is unreliable. Pending a more formalized way to do this, this project will use Arial going forward.
This PR also adds a VSCode debug configuration for easier debugging using that editor.
Future work will involve migrating this project from Less to Sass and adopting the single CFPB DS package once it is released in cfpb/design-system#2005.