@phun-ky/speccer 10.0.3 → 10.0.5
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 +4 -4
- package/dist/speccer.esm.js +1 -1
- package/dist/speccer.esm.js.map +1 -1
- package/dist/speccer.js +1 -1
- package/dist/speccer.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -77,7 +77,7 @@ speccer();
|
|
|
77
77
|
|
|
78
78
|
#### Lazy loading
|
|
79
79
|
|
|
80
|
-
If you're importing
|
|
80
|
+
If you're importing **SPECCER** instead of with a script tag, [you can use the following approach](https://codepen.io/phun-ky/pen/VwRRLyY) to apply lazy loading:
|
|
81
81
|
|
|
82
82
|
```javascript
|
|
83
83
|
import { pin } from "https://esm.sh/@phun-ky/speccer";
|
|
@@ -139,7 +139,7 @@ And then follow the steps below to display the specifications you want :)
|
|
|
139
139
|
|
|
140
140
|
#### Advanced usage
|
|
141
141
|
|
|
142
|
-
If you want to control
|
|
142
|
+
If you want to control **SPECCER** a bit more, you have some options. Apply one of these attributes to the script element for different types of initialization:
|
|
143
143
|
|
|
144
144
|
```html
|
|
145
145
|
<script src="../speccer.js" data-<manual|instant|dom|lazy></script>
|
|
@@ -245,7 +245,7 @@ In your component examples, use the following attribute. Remember to use the `da
|
|
|
245
245
|
```html
|
|
246
246
|
<div data-speccer="pin-area">
|
|
247
247
|
<div
|
|
248
|
-
data-speccer="pin [bracket
|
|
248
|
+
data-speccer="pin [bracket [curly] |enclose] [left|right|top|bottom]"
|
|
249
249
|
class="..."
|
|
250
250
|
></div>
|
|
251
251
|
</div>
|
|
@@ -440,7 +440,7 @@ In your component examples, use the following attribute.
|
|
|
440
440
|
|
|
441
441
|
### A11y notation
|
|
442
442
|
|
|
443
|
-
With
|
|
443
|
+
With **SPECCER**, you can also display accessibility notation, like [Accessibility Bluelines](https://dribbble.com/shots/6269661-Accessibility-Bluelines?utm_source=Clipboard_Shot&utm_campaign=jeremyelder&utm_content=Accessibility%20Bluelines&utm_medium=Social_Share&utm_source=Clipboard_Shot&utm_campaign=jeremyelder&utm_content=Accessibility%20Bluelines&utm_medium=Social_Share):
|
|
444
444
|
|
|
445
445
|
Prior art: [Jeremy Elder](https://twitter.com/JeremyElder)
|
|
446
446
|
|
package/dist/speccer.esm.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @phun-ky/speccer
|
|
3
3
|
* A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements
|
|
4
4
|
* @author Alexander Vassbotn Røyne-Helgesen <alexander@phun-ky.net>
|
|
5
|
-
* @version 10.0.
|
|
5
|
+
* @version 10.0.5
|
|
6
6
|
* @license
|
|
7
7
|
* Copyright (c) 2018 Alexander Vassbotn Røyne-Helgesen
|
|
8
8
|
*
|