@globus/globus-css

globus-css

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

• Storybook – updated and deployed on merges to main.

Principles + Guidelines

• Based on bootstrap@5.x
  • SCSS (variable) overrides and theming should be used in favor of overriding selectors.
• 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

As of v0.5.0 the dist folder only contains the most recently tagged release's built files.

The package is available on npm - npm i @globus/globus-css

As of v0.5.0, bundled assets can be referenced using unpkg.com or JSDelivr.

<link rel="stylesheet" href="https://unpkg.com/@globus/globus-css/dist/globus-css.css" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@globus/globus-css/dist/globus-css.css" crossorigin="anonymous">

NOTE: Asset paths (ie. fonts, icons) in generated CSS files are currently relative – you will need to make sure these assets are locally available in your application.

Releasing

npm run release will bump the package using Conventional Commits (via standard-version) and update the dist folder.