@krudi/shared-styles

Shared CSS foundations, utilities, and components extracted for reuse across personal projects. Includes design tokens, reset styles, layout primitives, and early components/utilities.

Packages

Package	Description	Version	Additional Information
@krudi/styles	Shared CSS foundations, tokens, reset, layout, components, utilities
@krudi/icons	Standalone SVG assets (external link, phone, envelope)
@krudi/storybook	HTML Storybook workspace for visual checks and Vitest Storybook runner		Live preview

Warning

@krudi/styles is built for personal use and is still in active development. Expect breaking changes and limited support while it evolves.

Quick start

Note

You need to have Node.js installed on your computer before running this project.

1. First clone this repository and navigate into your project directory
2. Install the dependencies: npm run install
3. Run the development server: npm run dev

Workspaces

• packages/styles – CSS package (@krudi/styles) with tokens, reset, layout, components, utilities
• packages/icons – SVG assets package (@krudi/icons) with common link/contact icons
• apps/storybook – HTML Storybook (@krudi/storybook) for visual checks and tests |

Using @krudi/styles

Install the package (published build lives in packages/styles):

npm install @krudi/styles

Import everything:

@import '@krudi/styles/ui';

Or compose layers:

/* Required core */
@import '@krudi/styles/variables' layer(variables);
@import '@krudi/styles/theme' layer(theme);

/* Recommended reset + layout */
@import '@krudi/styles/base' layer(base);
@import '@krudi/styles/layout' layer(layout);

/* Optional pieces */
@import '@krudi/styles/components' layer(components);
@import '@krudi/styles/utilities' layer(utilities);

/* Additional layers if needed */
@import '@krudi/styles/html' layer(html);
@import '@krudi/styles/elements' layer(elements);

See packages/styles/README.md for override guidance and entrypoints.

Commands for linting/fixing files

Navigate into your project directory and start linting your files.

• npm run lint:eslint: lints JavaScript files
  • npm run lint:eslint:fix: to eliminate all possible errors
• npm run lint:stylelint: lints Cascading Style Sheets files
  • npm run lint:stylelint:fix: to eliminate all possible errors