globus-css

globus-css

Utility-centric CSS and styled components to give you the building blocks for any Globus web project.

Principles + Guidelines

• Follow most of the principles defined in GitHub’s Primer CSS implementation.

• In most cases, we will not be using BEM. Instead, we will be following Bootstrap's block-modifier scheme.

• Based on bootstrap@4.x

  • SCSS (variable) overrides and theming should be used in favor of overriding selectors.
  • A path to upgrading to bootstrap@5 and/or moving off of Bootstrap should be considered, a few notable mentions:
    • We should be planning/expecting to move to only importing the parts of Bootstrap we need, rather than the whole library.

• Consumable as CSS

  • We should work toward consumption via Sass using the SCSS files directly to allow more control over end-usage bundle size.
  • The versioned CSS assets can/should be centrally hosted (CDN).

• Consumable as an NPM package

• Follow Semantic Versioning

  • With the project being consumed via NPM package, by many implementations, we should ensure changes are applied in an expected way.

• Accessible via Storybook

  • This repository will essentially be a code-consumable version of globusonline/globus-webapp, limited to base utilities, objects, and components. There should be a place to easily reference and explore the contents.
  • Documentation in the Storybook can provide guidance on implementation requirements around common usage and accessibility.

Developing (Storybook)

This project contains a Storybook of available UI components. It is intended to be both an area to develop UI components in isolation and used as a documentation resource for consumers (when published).

To start Storybook, run: npm run storybook

Usage

Currently, the most reliable way to utilize this repository is via the generated dist folder.

The assets in this folder can be hosted locally to your application or web property.

Eventually, these files will be consumable via a CDN, in addition to direct access to SASS via an NPM package.

Releasing

npm run release will bump the package using Conventional Commits (via standard-version) and create a dist/v{VERSION} directory.