@andrewxhill/graphics-press-css 4.2.1
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/LICENSE +21 -0
- package/README.md +117 -0
- package/css/graphics-press.css +1149 -0
- package/css/graphics-press.min.css +1 -0
- package/package.json +51 -0
- package/tailwind/index.js +1739 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 Graphics Press CSS Contributors
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
# Graphics Press CSS
|
|
2
|
+
|
|
3
|
+
A typographic and data-visualization CSS library derived from the books of Edward Tufte, the cartographic color principles of Eduard Imhof, and the typographic standards of Robert Bringhurst.
|
|
4
|
+
|
|
5
|
+
**[Live Demo & Documentation](https://andrewxhill.github.io/tufte2)**
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
- **ET Book typeface** -- Tufte's open-source Bembo digitisation
|
|
10
|
+
- **Sidenotes & margin notes** -- CSS-only, no JavaScript required
|
|
11
|
+
- **Data visualization components** -- dot charts, dumbbell charts, sparklines, bullet graphs, heat tables, slopegraphs, parallel coordinates, and more
|
|
12
|
+
- **Narrative map framing** -- reusable slippy-map container, inset legend panel, and map annotation chrome for MapLibre/Leaflet examples
|
|
13
|
+
- **Analytical briefing blocks** -- strategy headers, metric strips, tab rows, analytic cards, timelines, and algorithm panels for research apps
|
|
14
|
+
- **Dark mode** -- automatic via `prefers-color-scheme`, manual via `.dark` class
|
|
15
|
+
- **Responsive** -- fluid typography, mobile sidenote toggles, adaptive chart layouts
|
|
16
|
+
- **Print styles** -- optimized for paper output
|
|
17
|
+
- **CSS layers** -- `@layer` for specificity-safe cascade; override without `!important`
|
|
18
|
+
- **oklch() colors** -- perceptually uniform categorical palette per Imhof's equal-weight principle
|
|
19
|
+
|
|
20
|
+
## Install
|
|
21
|
+
|
|
22
|
+
### CDN
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<link rel="stylesheet" href="https://unpkg.com/@andrewxhill/graphics-press-css@4.2.1/css/graphics-press.css">
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### npm
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
npm install @andrewxhill/graphics-press-css
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
```css
|
|
35
|
+
@import '@andrewxhill/graphics-press-css';
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Tailwind CSS
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
npm install @andrewxhill/graphics-press-css tailwindcss
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
```js
|
|
45
|
+
// tailwind.config.js
|
|
46
|
+
module.exports = {
|
|
47
|
+
plugins: [
|
|
48
|
+
require('@andrewxhill/graphics-press-css/tailwind'),
|
|
49
|
+
],
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## Quick Start
|
|
54
|
+
|
|
55
|
+
```html
|
|
56
|
+
<!DOCTYPE html>
|
|
57
|
+
<html lang="en" class="light">
|
|
58
|
+
<head>
|
|
59
|
+
<meta charset="UTF-8">
|
|
60
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
61
|
+
<link rel="stylesheet" href="https://unpkg.com/@andrewxhill/graphics-press-css@4.2.1/css/graphics-press.css">
|
|
62
|
+
</head>
|
|
63
|
+
<body>
|
|
64
|
+
<article>
|
|
65
|
+
<h1>Your Title</h1>
|
|
66
|
+
<p class="subtitle">Your subtitle here</p>
|
|
67
|
+
<section>
|
|
68
|
+
<h2>Section heading</h2>
|
|
69
|
+
<p>Your content with a sidenote.<label for="sn-1" class="sidenote-toggle sidenote-number"></label>
|
|
70
|
+
<input type="checkbox" id="sn-1" class="sidenote-toggle">
|
|
71
|
+
<span class="sidenote">This appears in the margin on wide screens.</span>
|
|
72
|
+
</p>
|
|
73
|
+
</section>
|
|
74
|
+
</article>
|
|
75
|
+
</body>
|
|
76
|
+
</html>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## Components
|
|
80
|
+
|
|
81
|
+
| Component | Class | Description |
|
|
82
|
+
|-----------|-------|-------------|
|
|
83
|
+
| Sidenotes | `.sidenote` | Numbered margin notes |
|
|
84
|
+
| Margin notes | `.marginnote` | Unnumbered margin content |
|
|
85
|
+
| Figures | `.figure-full`, `.figure-margin` | Column, full-width, or margin figures |
|
|
86
|
+
| Tables | booktabs default | Three-rule tables in Gill Sans |
|
|
87
|
+
| Sparklines | `.sparkline` | Word-sized inline charts |
|
|
88
|
+
| Dot chart | `.dot-chart` | Tufte's bar chart replacement |
|
|
89
|
+
| Dumbbell | `.dumbbell` | Before/after connected dots |
|
|
90
|
+
| Strip plot | `.strip-plot` | One-way scatter |
|
|
91
|
+
| Bullet graph | `.bullet-graphs` | Gauge replacement |
|
|
92
|
+
| Heat table | `.heat-table` | Color-encoded cell values |
|
|
93
|
+
| Ranked table | `.ranked-table` | Dotted leaders, recessive ranks |
|
|
94
|
+
| Small multiples | `.small-multiples` | Grid of comparable charts |
|
|
95
|
+
| Timeline | `.timeline` | Events and periods |
|
|
96
|
+
| Slopegraph | `.slopegraph-wrap` | Two-point comparison |
|
|
97
|
+
| Parallel coords | `.parallel-coords` | Multi-variable SVG |
|
|
98
|
+
| Slippy map | `.gp-map-block`, `.gp-map-frame`, `.gp-map-panel` | Narrative map embed with overlay panel and key |
|
|
99
|
+
| Strategy brief | `.brief-backlink`, `.brief-header`, `.metric-strip`, `.tab-nav--filled`, `.analytic-grid`, `.activity-timeline` | Analytical dashboard framing for research and trading apps |
|
|
100
|
+
| Bar chart | `.bar-chart` | Minimal tick or filled bars |
|
|
101
|
+
| Pull stat | `.pull-stat` | Large featured numbers |
|
|
102
|
+
| Stat grid | `.stat-grid` | Multiple metrics under one rule |
|
|
103
|
+
| Evidence | `.evidence` | Image + analysis layout |
|
|
104
|
+
|
|
105
|
+
## Dark Mode
|
|
106
|
+
|
|
107
|
+
Automatic via system preference, or manual:
|
|
108
|
+
|
|
109
|
+
```js
|
|
110
|
+
// Toggle
|
|
111
|
+
document.documentElement.classList.toggle('dark');
|
|
112
|
+
document.documentElement.classList.toggle('light');
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
## License
|
|
116
|
+
|
|
117
|
+
MIT
|