[STRIPES-29] Establish Method(s) for handling CSS Created: 29/Sep/16  Updated: 31/Oct/16  Resolved: 14/Oct/16

Status: Closed
Project: Stripes
Components: None
Affects versions: None
Fix versions: None

Type: Task Priority: P3
Reporter: John Coburn Assignee: John Coburn
Resolution: Done Votes: 0
Labels: spike, sprint0
Remaining Estimate: Not Specified
Time Spent: 1 day, 4 hours, 15 minutes
Original estimate: Not Specified

Issue links:
Relates
relates to STRIPES-38 Establish boundary between Stripes to... Closed
Sprint:

 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



 Comments   
Comment by Jakub Skoczen [ 14/Oct/16 ]

John, I thin we have decided that we have enough for now. Can you put some (even if partial) conclusions in here and close this. We will re-open when this becomes active again.

Comment by John Coburn [ 14/Oct/16 ]

We have enough to begin work on the application - nuances of the proposed plan may change as we move forward. Will re-open if there's a need to revisit.

Generated at Thu Feb 08 23:05:03 UTC 2024 using Jira 1001.0.0-SNAPSHOT#100246-sha1:7a5c50119eb0633d306e14180817ddef5e80c75d.