Uploaded image for project: 'Stripes'
  1. Stripes
  2. STRIPES-29

Establish Method(s) for handling CSS

    XMLWordPrintable

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

            Activity

              People

                JohnC John Coburn
                JohnC John Coburn
                Votes:
                0 Vote for this issue
                Watchers:
                3 Start watching this issue

                Dates

                  Created:
                  Updated:
                  Resolved:

                  Time Tracking

                    Estimated:
                    Original Estimate - Not Specified
                    Not Specified
                    Remaining:
                    Remaining Estimate - 0 minutes
                    0m
                    Logged:
                    Time Spent - 2 days, 15 minutes
                    2d 15m

                    TestRail: Runs

                      TestRail: Cases