@globus/globus-css

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.

Releasing

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