# `globus-css`

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

- [**Storybook**](https://globus-jb.s3.amazonaws.com/storybook-globus-css/index.html) – 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](https://globusonline.github.io/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](https://storybook.js.org/) 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](https://unpkg.com/) or [JSDelivr](https://www.jsdelivr.com/package/npm/@globus/globus-css).

```html
<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.