Details
-
Task
-
Status: Closed (View Workflow)
-
P3
-
Resolution: Done
-
None
-
None
-
None
Description
The base FOLIO/Stripes install will handle styles from a variety of sources:
System Styles for FOLIO header and associated UI Elements.
Styles for Stripes Components
Custom Styles for 3rd Party Modules (locally included stylesheet)
Styles for 3rd Party Components (http://cloud/styles/styles.css)
With the potential number of CSS classes that could be in use within the FOLIO SPA at a given moment, name-collision is a risk.
A plan should be established for how our Stripes components and FOLIO System handle styles so that they are
- Not easily tread upon by css from 3rd parties.
- Easily applied to components within the FOLIO system.
- Easily maintained - eliminating risk of creating naming collisions within the system via local scoping.
- Configurable via a set of variables (something similar to css4 spec custom properties or sass variables....possible javascript if the determined solution allows)
Plan: We will use css modules via webpack/postcss to locally scope css classnames by default - this will help protect core folio styles from class collision from any 3rd party css. Keeping with a modular workflow, each component that requires styling should have its own stylesheet. Global styles should be rare in the system(purely a reset to start(normalize.css) at the top level of the web application) it's possible to promote classes to the global level using the :global keyword as well as importing the styles via a custom loader string. More information can be found here: https://github.com/css-modules/postcss-modules
TestRail: Results
Attachments
Issue Links
- relates to
-
STRIPES-38 Establish boundary between Stripes toolkit and FOLIO base web application
-
- Closed
-