-
Notifications
You must be signed in to change notification settings - Fork 3
Home
FrontPage and PlanScore are two interwoven repos, FrontPage has the bulk of the front end code, like the styles, as well as the state historical, state library, and other static pages (about, indexes, metrics).
Commits to the development branch automatically run through circle and deploy to dev.planscore, which is a combination of both repos (the spncr/development branch currently has the same behavior, from the PlanScore repo, but that may change).
Here you'll find all styles, divided into modules. The bulk of the sitewide CSS is in style/general.scss with variables in defines.scss and fonts loaded in fonts.scss.
jslibs currently only has the leaflet library, which is used for the zoned maps in the historical state pages.
The remainder are styles that only a few pages load and you can see which modules are loaded into which page by looking at the index.scss for a specific page.
Sass is used for nesting, with media queries generally inside of the components they affect (opposite of regular CSS where the media queries are the parent).
The selectors start with general, sitewide tags.
Then proceed with custom classes, generally top to bottom of the page (so announcements, nav, content, footer).
Properties are generally in this order:
- Positioning
- Display & Box Model
- Color
- Text
- Animation/Behavior/Other
If fewer than ~5 properties, they're usually clumped together. With more than 5, they're generally separated by an extra line break between sections. This is the general logic today, but up to future maintainers how that might shift.
This is documented in the README, you don't want to update state pages directly, they're generated from the _statetemplate folder when you run npm run states (or during deployment via circle)
How to create a new page is also documented in the README
about is what you get when you follow What is PlanScore? in the menu and can be updated directly.
metrics pages are educational pages to explain the different metrics and how they're measured. The metrics page itself is a duplicate of the metrics/efficiencygap page, to prevent a dead end. Any changes made to one should be copy/pasted into the other.
patternlibrary is a demo page to test and maintain the variety of styles and elements across the site, in one place. It might make sense to add the cards styles and markup to this page! This feature was built as part of the library, but hasn't been scoped to the patternlibrary.
The head, navbar, footer are generated from the code in htmlpartials and are documented in the README.
Basically, you need to run npm run build anytime you change these, before the local site will show those changes.
It was unclear the best place to put sitewide JavaScript, even though sitewide.js6 seemed like the most obvious spot, I wasn't confident in how that file is being used currently.
global.js was created to be extra sure. Currently, it only serves two purposes: the announcement banner and window resize handler which closes the mobile menu when resizing from mobile to desktop. This code can be moved to sitewide.js or another more appropriate place within _common if there is a better place for it.
This particular page is fairly dynamic and relies on a lot of the plan scoring backend, which is why it still lives fully in the PlanScore repository, not this one.
While it does have the same head/nav/footer as the FrontPage content, it doesn't actually load from the partials. Changes need to be made again, in the PlanScore repo, in the planscore/website/template/patternlibrary.html file
Note that the styles from FrontPage do cross repositories, but the markup does not.