https://github.com/bitovi/storybook-github-pages-demo

Repo for deploying storybook to Github pages for video demonstration purpose.
https://github.com/bitovi/storybook-github-pages-demo

Last synced: about 7 hours ago
JSON representation

Repo for deploying storybook to Github pages for video demonstration purpose.

• Host: GitHub
• URL: https://github.com/bitovi/storybook-github-pages-demo
• Owner: bitovi
• Created: 2023-11-28T14:15:43.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-03-06T12:45:10.000Z (8 months ago)
• Last Synced: 2024-04-14T22:37:35.768Z (7 months ago)
• Language: CSS
• Size: 797 KB
• Stars: 0
• Watchers: 11
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Example Storybook Project for video demonstration

To run the project. 

```bash

docker-compose up

```

To build the project

```

npm run build-storybook

```

### Organization

There are two places to put CSS.  Global styles go in the public/styles folder. Module styles stay in the individual `.astro` file for their module.

#### Global Styles

Global styles go in the `public` folder and are organized into the following files:

- `main.css`

- `text.css` includes headings, body, labels, etc.

  - `heading-1` through `heading-6` all includes styles for the three breakpoints.

- `font-faces.css` has `@font-face` rules for using Poppins. Currently we directly use scripts from Google Fonts in Layout.astro.

#### Module Styles

Module styles go into a `` block at the bottom of the `.astro` file that contains the corresponding component.

An `.astro` file looks like this:

```astro

---

// TypeScript/JavaScript code goes here.  Use JavaScript for Hubspot compatibility.

---

<!-- HTML markup goes here -->

<style>

/* Styles for this component go here */

```