baseline-kit 3.0.0 → 3.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -84
- package/dist/README.md +42 -84
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,11 +1,44 @@
|
|
|
1
1
|
# Baseline Kit
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
Baseline Kit is a lightweight development tool for visualizing and debugging grid systems and spacing in React applications. It provides configurable overlays for both column-based and baseline grids, flexible layout components, and theme-aware configuration—all optimized for performance and built with TypeScript. The library is based on the "Padded Grid" concept, originally explored in [this article](http://medium.com/design-bootcamp/the-padded-grid-a-designers-hack-to-achieve-baseline-fit-fc40d022bc84) on achieving perfect baseline alignment in digital layouts.
|
|
6
8
|
|
|
7
9
|
|
|
8
10
|
|
|
11
|
+
## Table of Contents
|
|
12
|
+
- [Features](#features)
|
|
13
|
+
- [Requirements](#requirements)
|
|
14
|
+
- [Installation](#installation)
|
|
15
|
+
- [Quick Start](#quick-start)
|
|
16
|
+
- [Core Concepts](#core-concepts)
|
|
17
|
+
- [Base Unit](#base-unit)
|
|
18
|
+
- [Spacing Values](#spacing-values)
|
|
19
|
+
- [Grid Snapping](#grid-snapping)
|
|
20
|
+
- [Debugging Modes](#debugging-modes)
|
|
21
|
+
- [Components](#components)
|
|
22
|
+
- [Component Hierarchy](#component-hierarchy)
|
|
23
|
+
- [Key Components](#key-components)
|
|
24
|
+
- [Config](#config)
|
|
25
|
+
- [Baseline](#baseline)
|
|
26
|
+
- [Guide](#guide)
|
|
27
|
+
- [Box](#box)
|
|
28
|
+
- [Theme System](#theme-system)
|
|
29
|
+
- [CSS Import Options](#css-import-options)
|
|
30
|
+
- [Theme Options](#theme-options)
|
|
31
|
+
- [Theme Variables Reference](#theme-variables-reference)
|
|
32
|
+
- [Browser Support](#browser-support)
|
|
33
|
+
- [React 19 Features](#react-19-features)
|
|
34
|
+
- [Server-Side Rendering (SSR)](#server-side-rendering-ssr)
|
|
35
|
+
- [SSR-Friendly Design](#ssr-friendly-design)
|
|
36
|
+
- [SSR Mode Prop](#ssr-mode-prop)
|
|
37
|
+
- [Development](#development)
|
|
38
|
+
- [Performance Features](#performance-features)
|
|
39
|
+
- [Contributing](#contributing)
|
|
40
|
+
- [License](#license)
|
|
41
|
+
|
|
9
42
|
## Features
|
|
10
43
|
|
|
11
44
|
- 📏 **Baseline Grid:** Core system for maintaining vertical rhythm and consistent spacing across your layouts
|
|
@@ -119,7 +152,7 @@ The base unit is the foundation of Baseline Kit's spacing system. All measuremen
|
|
|
119
152
|
unit:
|
|
120
153
|
|
|
121
154
|
```tsx
|
|
122
|
-
<Config base={8}>
|
|
155
|
+
<Config base={8}> // Sets 8px as the base unit
|
|
123
156
|
<Layout
|
|
124
157
|
block={17} // Will be rounded to 16px (2 * base)
|
|
125
158
|
inline={22} // Will be rounded to 24px (3 * base)
|
|
@@ -305,7 +338,7 @@ Then create your own custom theme file:
|
|
|
305
338
|
Then import your custom theme:
|
|
306
339
|
|
|
307
340
|
```tsx
|
|
308
|
-
import 'baseline-kit/styles';
|
|
341
|
+
import 'baseline-kit/styles'; // Required core styles
|
|
309
342
|
import './path/to/yourCustomTheme.css'; // Your custom theme
|
|
310
343
|
```
|
|
311
344
|
|
|
@@ -337,7 +370,7 @@ For minor adjustments, use the Config component:
|
|
|
337
370
|
| Layout | `--bk-layout-color-[line/flat/text]-theme` | Colors for borders, backgrounds and text |
|
|
338
371
|
| Spacer | `--bk-spacer-color-[line/flat/text]-theme` | Colors for borders, backgrounds and text |
|
|
339
372
|
|
|
340
|
-
See the [
|
|
373
|
+
See the [tokens file](https://github.com/dnvt/baseline-kit/blob/main/dist/theme/tokens.css) for a complete list of available variables.
|
|
341
374
|
|
|
342
375
|
## Browser Support
|
|
343
376
|
|
|
@@ -348,7 +381,6 @@ See the [default theme file](https://github.com/dnvt/baseline-kit/blob/main/dist
|
|
|
348
381
|
## React 19 Features
|
|
349
382
|
|
|
350
383
|
Baseline Kit leverages React 19's latest features:
|
|
351
|
-
|
|
352
384
|
- **`use` Hook**: Replaces `useContext` for better performance and cleaner code
|
|
353
385
|
- **Streamlined Context API**: Uses the simplified Context Provider syntax
|
|
354
386
|
- **JSX Transform**: Takes advantage of the mandatory JSX transform in React 19
|
|
@@ -400,7 +432,9 @@ bun run test
|
|
|
400
432
|
## Performance Features
|
|
401
433
|
|
|
402
434
|
- Virtualizes large grid overlays
|
|
403
|
-
-
|
|
435
|
+
- Client-side only rendering for dynamic components
|
|
436
|
+
- Optimized resize event handling
|
|
437
|
+
- Optimizes re-renders using React.memo and useMemo
|
|
404
438
|
- Supports tree-shaking for minimal bundle size
|
|
405
439
|
|
|
406
440
|
## Contributing
|
|
@@ -410,79 +444,3 @@ Please see [CONTRIBUTING.md](./CONTRIBUTING.md) for detailed guidelines.
|
|
|
410
444
|
## License
|
|
411
445
|
|
|
412
446
|
MIT © [François Denavaut](https://github.com/dnvt)
|
|
413
|
-
|
|
414
|
-
## Integration with Remix
|
|
415
|
-
|
|
416
|
-
Baseline Kit is fully compatible with Remix. Follow these steps to integrate it into your Remix application:
|
|
417
|
-
|
|
418
|
-
### Standard Integration
|
|
419
|
-
|
|
420
|
-
In your Remix application, create a `root.tsx` file with proper links to the CSS:
|
|
421
|
-
|
|
422
|
-
```tsx
|
|
423
|
-
// app/root.tsx
|
|
424
|
-
import type { LinksFunction } from '@remix-run/node';
|
|
425
|
-
|
|
426
|
-
export const links: LinksFunction = () => [
|
|
427
|
-
// Option 1: Use the combined CSS file (simplest approach)
|
|
428
|
-
{ rel: 'stylesheet', href: 'npm:baseline-kit/dist/baseline-kit.css' },
|
|
429
|
-
|
|
430
|
-
// Option 2: Or use core styles and theme separately
|
|
431
|
-
// { rel: 'stylesheet', href: 'npm:baseline-kit/dist/styles.css' },
|
|
432
|
-
// { rel: 'stylesheet', href: 'npm:baseline-kit/dist/theme.css' },
|
|
433
|
-
];
|
|
434
|
-
|
|
435
|
-
export default function App() {
|
|
436
|
-
return (
|
|
437
|
-
<html lang="en">
|
|
438
|
-
<head>
|
|
439
|
-
<meta charSet="utf-8" />
|
|
440
|
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
441
|
-
<Links />
|
|
442
|
-
</head>
|
|
443
|
-
<body>
|
|
444
|
-
<Outlet />
|
|
445
|
-
<ScrollRestoration />
|
|
446
|
-
<Scripts />
|
|
447
|
-
<LiveReload />
|
|
448
|
-
</body>
|
|
449
|
-
</html>
|
|
450
|
-
);
|
|
451
|
-
}
|
|
452
|
-
```
|
|
453
|
-
|
|
454
|
-
Note the use of `npm:` prefix which is the recommended way to reference CSS from node_modules in Remix.
|
|
455
|
-
|
|
456
|
-
### Troubleshooting CSS in Remix
|
|
457
|
-
|
|
458
|
-
If you're experiencing styling issues with components not showing properly:
|
|
459
|
-
|
|
460
|
-
1. **Copy to public directory**: For a completely reliable solution, copy the CSS files to your public directory:
|
|
461
|
-
```shell
|
|
462
|
-
mkdir -p public/css
|
|
463
|
-
cp node_modules/baseline-kit/dist/*.css public/css/
|
|
464
|
-
```
|
|
465
|
-
|
|
466
|
-
Then reference these local files:
|
|
467
|
-
```tsx
|
|
468
|
-
export const links: LinksFunction = () => [
|
|
469
|
-
{ rel: 'stylesheet', href: '/css/baseline-kit.css' }
|
|
470
|
-
];
|
|
471
|
-
```
|
|
472
|
-
|
|
473
|
-
2. **Check CSS specificity**: Make sure your application's CSS isn't overriding Baseline Kit styles. You may need to adjust specificity or load order of your stylesheets.
|
|
474
|
-
|
|
475
|
-
### Custom Theme Integration
|
|
476
|
-
|
|
477
|
-
For custom theming:
|
|
478
|
-
|
|
479
|
-
```tsx
|
|
480
|
-
export const links: LinksFunction = () => [
|
|
481
|
-
// Core styles (required)
|
|
482
|
-
{ rel: 'stylesheet', href: 'npm:baseline-kit/dist/styles.css' },
|
|
483
|
-
// Choose one of these theme options:
|
|
484
|
-
{ rel: 'stylesheet', href: 'npm:baseline-kit/dist/theme/default.css' }, // Light theme only
|
|
485
|
-
{ rel: 'stylesheet', href: 'npm:baseline-kit/dist/theme/dark.css' }, // Dark theme only
|
|
486
|
-
{ rel: 'stylesheet', href: '/css/custom-theme.css' }, // Your custom theme
|
|
487
|
-
];
|
|
488
|
-
```
|
package/dist/README.md
CHANGED
|
@@ -1,11 +1,44 @@
|
|
|
1
1
|
# Baseline Kit
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
Baseline Kit is a lightweight development tool for visualizing and debugging grid systems and spacing in React applications. It provides configurable overlays for both column-based and baseline grids, flexible layout components, and theme-aware configuration—all optimized for performance and built with TypeScript. The library is based on the "Padded Grid" concept, originally explored in [this article](http://medium.com/design-bootcamp/the-padded-grid-a-designers-hack-to-achieve-baseline-fit-fc40d022bc84) on achieving perfect baseline alignment in digital layouts.
|
|
6
8
|
|
|
7
9
|
|
|
8
10
|
|
|
11
|
+
## Table of Contents
|
|
12
|
+
- [Features](#features)
|
|
13
|
+
- [Requirements](#requirements)
|
|
14
|
+
- [Installation](#installation)
|
|
15
|
+
- [Quick Start](#quick-start)
|
|
16
|
+
- [Core Concepts](#core-concepts)
|
|
17
|
+
- [Base Unit](#base-unit)
|
|
18
|
+
- [Spacing Values](#spacing-values)
|
|
19
|
+
- [Grid Snapping](#grid-snapping)
|
|
20
|
+
- [Debugging Modes](#debugging-modes)
|
|
21
|
+
- [Components](#components)
|
|
22
|
+
- [Component Hierarchy](#component-hierarchy)
|
|
23
|
+
- [Key Components](#key-components)
|
|
24
|
+
- [Config](#config)
|
|
25
|
+
- [Baseline](#baseline)
|
|
26
|
+
- [Guide](#guide)
|
|
27
|
+
- [Box](#box)
|
|
28
|
+
- [Theme System](#theme-system)
|
|
29
|
+
- [CSS Import Options](#css-import-options)
|
|
30
|
+
- [Theme Options](#theme-options)
|
|
31
|
+
- [Theme Variables Reference](#theme-variables-reference)
|
|
32
|
+
- [Browser Support](#browser-support)
|
|
33
|
+
- [React 19 Features](#react-19-features)
|
|
34
|
+
- [Server-Side Rendering (SSR)](#server-side-rendering-ssr)
|
|
35
|
+
- [SSR-Friendly Design](#ssr-friendly-design)
|
|
36
|
+
- [SSR Mode Prop](#ssr-mode-prop)
|
|
37
|
+
- [Development](#development)
|
|
38
|
+
- [Performance Features](#performance-features)
|
|
39
|
+
- [Contributing](#contributing)
|
|
40
|
+
- [License](#license)
|
|
41
|
+
|
|
9
42
|
## Features
|
|
10
43
|
|
|
11
44
|
- 📏 **Baseline Grid:** Core system for maintaining vertical rhythm and consistent spacing across your layouts
|
|
@@ -119,7 +152,7 @@ The base unit is the foundation of Baseline Kit's spacing system. All measuremen
|
|
|
119
152
|
unit:
|
|
120
153
|
|
|
121
154
|
```tsx
|
|
122
|
-
<Config base={8}>
|
|
155
|
+
<Config base={8}> // Sets 8px as the base unit
|
|
123
156
|
<Layout
|
|
124
157
|
block={17} // Will be rounded to 16px (2 * base)
|
|
125
158
|
inline={22} // Will be rounded to 24px (3 * base)
|
|
@@ -305,7 +338,7 @@ Then create your own custom theme file:
|
|
|
305
338
|
Then import your custom theme:
|
|
306
339
|
|
|
307
340
|
```tsx
|
|
308
|
-
import 'baseline-kit/styles';
|
|
341
|
+
import 'baseline-kit/styles'; // Required core styles
|
|
309
342
|
import './path/to/yourCustomTheme.css'; // Your custom theme
|
|
310
343
|
```
|
|
311
344
|
|
|
@@ -337,7 +370,7 @@ For minor adjustments, use the Config component:
|
|
|
337
370
|
| Layout | `--bk-layout-color-[line/flat/text]-theme` | Colors for borders, backgrounds and text |
|
|
338
371
|
| Spacer | `--bk-spacer-color-[line/flat/text]-theme` | Colors for borders, backgrounds and text |
|
|
339
372
|
|
|
340
|
-
See the [
|
|
373
|
+
See the [tokens file](https://github.com/dnvt/baseline-kit/blob/main/dist/theme/tokens.css) for a complete list of available variables.
|
|
341
374
|
|
|
342
375
|
## Browser Support
|
|
343
376
|
|
|
@@ -348,7 +381,6 @@ See the [default theme file](https://github.com/dnvt/baseline-kit/blob/main/dist
|
|
|
348
381
|
## React 19 Features
|
|
349
382
|
|
|
350
383
|
Baseline Kit leverages React 19's latest features:
|
|
351
|
-
|
|
352
384
|
- **`use` Hook**: Replaces `useContext` for better performance and cleaner code
|
|
353
385
|
- **Streamlined Context API**: Uses the simplified Context Provider syntax
|
|
354
386
|
- **JSX Transform**: Takes advantage of the mandatory JSX transform in React 19
|
|
@@ -400,7 +432,9 @@ bun run test
|
|
|
400
432
|
## Performance Features
|
|
401
433
|
|
|
402
434
|
- Virtualizes large grid overlays
|
|
403
|
-
-
|
|
435
|
+
- Client-side only rendering for dynamic components
|
|
436
|
+
- Optimized resize event handling
|
|
437
|
+
- Optimizes re-renders using React.memo and useMemo
|
|
404
438
|
- Supports tree-shaking for minimal bundle size
|
|
405
439
|
|
|
406
440
|
## Contributing
|
|
@@ -410,79 +444,3 @@ Please see [CONTRIBUTING.md](./CONTRIBUTING.md) for detailed guidelines.
|
|
|
410
444
|
## License
|
|
411
445
|
|
|
412
446
|
MIT © [François Denavaut](https://github.com/dnvt)
|
|
413
|
-
|
|
414
|
-
## Integration with Remix
|
|
415
|
-
|
|
416
|
-
Baseline Kit is fully compatible with Remix. Follow these steps to integrate it into your Remix application:
|
|
417
|
-
|
|
418
|
-
### Standard Integration
|
|
419
|
-
|
|
420
|
-
In your Remix application, create a `root.tsx` file with proper links to the CSS:
|
|
421
|
-
|
|
422
|
-
```tsx
|
|
423
|
-
// app/root.tsx
|
|
424
|
-
import type { LinksFunction } from '@remix-run/node';
|
|
425
|
-
|
|
426
|
-
export const links: LinksFunction = () => [
|
|
427
|
-
// Option 1: Use the combined CSS file (simplest approach)
|
|
428
|
-
{ rel: 'stylesheet', href: 'npm:baseline-kit/dist/baseline-kit.css' },
|
|
429
|
-
|
|
430
|
-
// Option 2: Or use core styles and theme separately
|
|
431
|
-
// { rel: 'stylesheet', href: 'npm:baseline-kit/dist/styles.css' },
|
|
432
|
-
// { rel: 'stylesheet', href: 'npm:baseline-kit/dist/theme.css' },
|
|
433
|
-
];
|
|
434
|
-
|
|
435
|
-
export default function App() {
|
|
436
|
-
return (
|
|
437
|
-
<html lang="en">
|
|
438
|
-
<head>
|
|
439
|
-
<meta charSet="utf-8" />
|
|
440
|
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
441
|
-
<Links />
|
|
442
|
-
</head>
|
|
443
|
-
<body>
|
|
444
|
-
<Outlet />
|
|
445
|
-
<ScrollRestoration />
|
|
446
|
-
<Scripts />
|
|
447
|
-
<LiveReload />
|
|
448
|
-
</body>
|
|
449
|
-
</html>
|
|
450
|
-
);
|
|
451
|
-
}
|
|
452
|
-
```
|
|
453
|
-
|
|
454
|
-
Note the use of `npm:` prefix which is the recommended way to reference CSS from node_modules in Remix.
|
|
455
|
-
|
|
456
|
-
### Troubleshooting CSS in Remix
|
|
457
|
-
|
|
458
|
-
If you're experiencing styling issues with components not showing properly:
|
|
459
|
-
|
|
460
|
-
1. **Copy to public directory**: For a completely reliable solution, copy the CSS files to your public directory:
|
|
461
|
-
```shell
|
|
462
|
-
mkdir -p public/css
|
|
463
|
-
cp node_modules/baseline-kit/dist/*.css public/css/
|
|
464
|
-
```
|
|
465
|
-
|
|
466
|
-
Then reference these local files:
|
|
467
|
-
```tsx
|
|
468
|
-
export const links: LinksFunction = () => [
|
|
469
|
-
{ rel: 'stylesheet', href: '/css/baseline-kit.css' }
|
|
470
|
-
];
|
|
471
|
-
```
|
|
472
|
-
|
|
473
|
-
2. **Check CSS specificity**: Make sure your application's CSS isn't overriding Baseline Kit styles. You may need to adjust specificity or load order of your stylesheets.
|
|
474
|
-
|
|
475
|
-
### Custom Theme Integration
|
|
476
|
-
|
|
477
|
-
For custom theming:
|
|
478
|
-
|
|
479
|
-
```tsx
|
|
480
|
-
export const links: LinksFunction = () => [
|
|
481
|
-
// Core styles (required)
|
|
482
|
-
{ rel: 'stylesheet', href: 'npm:baseline-kit/dist/styles.css' },
|
|
483
|
-
// Choose one of these theme options:
|
|
484
|
-
{ rel: 'stylesheet', href: 'npm:baseline-kit/dist/theme/default.css' }, // Light theme only
|
|
485
|
-
{ rel: 'stylesheet', href: 'npm:baseline-kit/dist/theme/dark.css' }, // Dark theme only
|
|
486
|
-
{ rel: 'stylesheet', href: '/css/custom-theme.css' }, // Your custom theme
|
|
487
|
-
];
|
|
488
|
-
```
|