npm package: @ryandejaegher/shared-styles
Description: Shared CSS library for reusable styles across the monorepo
Latest version: 0.0.1

# @ryandejaegher/shared-css

A shared CSS library for reusable styles across the monorepo.

## Description

This package provides common CSS utilities, resets, and typography styles that can be reused across different projects in the monorepo. Instead of duplicating CSS code across multiple sites, you can import these shared styles.

## Installation

Since this is an internal monorepo package, add it to your project's `package.json`:

```json
{
  "dependencies": {
    "@ryandejaegher/shared-css": "workspace:*"
  }
}
```

Then run:

```bash
pnpm install
```

## Usage

### Import All Styles

To import all shared CSS (reset, utilities, and typography):

```css
@import '@ryandejaegher/shared-css/index.css';
```

Or in JavaScript/TypeScript:

```javascript
import '@ryandejaegher/shared-css/index.css';
```

### Import Individual Files

You can also import specific CSS files as needed:

```css
/* Import only the reset */
@import '@ryandejaegher/shared-css/reset.css';

/* Import only utilities */
@import '@ryandejaegher/shared-css/utilities.css';

/* Import only typography */
@import '@ryandejaegher/shared-css/typography.css';
```

## What's Included

### reset.css

A modern CSS reset that:

- Normalizes box-sizing
- Removes default margins and padding
- Improves typography rendering
- Makes images responsive by default
- Normalizes form inputs

### utilities.css

Common utility classes for:

- Display properties (`.flex`, `.grid`, `.block`, etc.)
- Flexbox utilities (`.flex-row`, `.justify-center`, `.items-center`, etc.)
- Spacing (`.m-1`, `.p-2`, etc.)
- Text alignment (`.text-center`, `.text-left`, etc.)
- Font sizes (`.text-sm`, `.text-lg`, etc.)
- Width and height (`.w-full`, `.h-screen`, etc.)
- Visibility (`.hidden`, `.sr-only`, etc.)

### typography.css

Typography system with:

- CSS custom properties for fonts and sizes
- Heading classes (`.heading-1` through `.heading-6`)
- Font family utilities (`.font-sans`, `.font-serif`, `.font-mono`)
- Prose styling (`.prose` for formatted text content)

## Examples

### Using Utility Classes

```html
<div class="flex justify-center items-center gap-4 p-4">
  <h1 class="heading-1 text-center">Welcome</h1>
  <p class="text-lg">This is a paragraph with larger text.</p>
</div>
```

### Using Typography

```html
<article class="prose">
  <h1>Article Title</h1>
  <p>This content will have nice prose styling applied.</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
</article>
```

### Using CSS Variables

```css
.my-custom-heading {
  font-size: var(--text-3xl);
  font-family: var(--font-serif);
  line-height: var(--leading-tight);
}
```

## Customization

You can override the CSS custom properties in your own stylesheets:

```css
:root {
  --text-base: 1.125rem; /* Override base font size */
  --font-sans: 'Your Custom Font', system-ui, sans-serif;
}
```

## Contributing

When adding new shared styles:

1. Keep styles generic and reusable
2. Use CSS custom properties for values that might be customized
3. Follow the existing naming conventions
4. Document any new utilities in this README

## License

MIT