@globus/globus-css NPM

`globus-css`

⚠️ This package is experimental and should not be used in production.⚠️

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

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

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.