Ryan Shared Styles

@ryandejaegher/ryan-shared-styles is a public package of reusable CSS stylesheets.

The unscoped ryan-shared-styles package is no longer the supported package. Install the scoped package below.

Installation

Install the package in an application:

npm install @ryandejaegher/ryan-shared-styles

Vite

Import the complete stylesheet once from your Vite application's entry module (usually src/main.js or src/main.ts):

import "@ryandejaegher/ryan-shared-styles";
import "./style.css";

You can also import an individual stylesheet when that is all you need:

import "@ryandejaegher/ryan-shared-styles/debug.css";
import "@ryandejaegher/ryan-shared-styles/grid.css";
import "@ryandejaegher/ryan-shared-styles/visually-hidden.css";

The included .debug utility makes an element easy to spot while developing. .grid enables CSS Grid, and .grid-col-7-5 applies a 7:5 column split. .visually-hidden hides text visually while preserving it for assistive technologies:

<section class="debug">Inspect me</section>
<div class="grid grid-col-7-5">...</div>
<button><span class="visually-hidden">Close</span>×</button>

CDN

Add the compiled stylesheet directly to a page with jsDelivr. Pin the version in production:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@ryandejaegher/[email protected]/dist/index.css"
/>

Then use the classes normally:

<div class="debug">Debug outline enabled</div>

Development

This repository uses Task rather than npm scripts. Install Node.js 22.14+, npm 11.15+, and Task, then run:

task install

Useful commands:

task            # list tasks
task lint       # lint CSS
task build      # create publishable files in dist/
task release    # verify the current vX.Y.Z tag and stage it for npm approval

Git hooks are installed by task install. Commit interactively with Conventional Commits using:

task commit

Releases

Releases use npm staged publishing. The release workflow uses the NPM_TOKEN GitHub repository secret only to stage a version; a maintainer must approve it with npm two-factor authentication before it is public.

Initial release

npm can stage only packages that already exist. Publish the first version directly from a local checkout after logging in to npm:

npm login
git tag v1.0.2
task bootstrap-release

Then push that tag so GitHub records the release:

git push origin v1.0.2

Subsequent releases

1. Update package.json to the new version and commit it.

2. Create and push a matching tag, for example:

   git tag v1.0.3
   git push origin v1.0.3

3. GitHub Actions verifies the tag, builds through the Taskfile, and stages the package on npm.

4. On npmjs.com, open Staged Packages, review the staged version, and select Approve. npm prompts for two-factor authentication before making it public.

Add an npm token with package publish access as the NPM_TOKEN repository secret before staging releases:

gh secret set NPM_TOKEN --repo ryandejaegher/ryan-shared-styles

Adding stylesheets

Place source CSS in src/, import it from src/index.css, and add a matching entry to exports in package.json if it should be individually importable. task build copies the source stylesheets to dist/ for publishing.