You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Oct 1, 2024. It is now read-only.
Copy file name to clipboardExpand all lines: app/docs/download.md
+19-22Lines changed: 19 additions & 22 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,9 +4,9 @@ See related documentation to learn the patterns and API in the framework's [CSS]
4
4
5
5
## CDN (easiest)
6
6
7
-
The quickest way to use Undernet is to link the bundled js and minified css using a CDN, such as [jsdelivr](https://jsdelivr.com). Note that this route doesn't allow you to customize the style. For that, refer to the
7
+
The quickest way to use Undernet is to link the bundled js and minified css using a CDN, such as [jsdelivr](https://jsdelivr.com). Note that this route doesn't allow you to customize the style. For that, refer to the NPM or source code options further below.
8
8
9
-
Include the link tag before your custom CSS, and the script tag at the end of your `<body>` content.
9
+
Include the link tag before your custom CSS to get styles, and the script tag at the end of your `<body>` content.
10
10
11
11
```html
12
12
<html>
@@ -17,10 +17,10 @@ Include the link tag before your custom CSS, and the script tag at the end of yo
@@ -34,14 +34,9 @@ Include the link tag before your custom CSS, and the script tag at the end of yo
34
34
</html>
35
35
```
36
36
37
-
Note that if you plan to link to and start Undernet via `<script>` tag, it's recommended to add an event listener for `DOMContentLoaded`to ensure the page is ready. Head over to the [JavaScript](/docs/overview/javascript) page to see more examples, including in UI frameworks like React.
37
+
Note that if you plan to link to and start Undernet via `<script>` tag, it's recommended to add an event listener for `DOMContentLoaded`, as shown above, to ensure the page is ready.
38
38
39
-
```html
40
-
<script>
41
-
// Undernet is now attached to the `window`
42
-
if (document) document.addEventListener("DOMContentLoaded", Undernet.start)
43
-
</script>
44
-
```
39
+
Head over to the [JavaScript](/docs/overview/javascript) page to see more examples, including in UI frameworks like React.
45
40
46
41
## NPM or Yarn
47
42
@@ -55,17 +50,19 @@ $ npm install -D undernet
55
50
$ yarn add -D undernet
56
51
```
57
52
58
-
Unlike if you use the CDN, the module _does not_ attach Undernet to the `window`.
53
+
Unlike if you use the CDN, the default export of the module _does not_ attach Undernet to the `window`.
59
54
60
-
Also, note that Undernet uses global DOM variables like `window` and `document`, which can break server-side rendering. To avoid conflicts, component scripts internally check before execution. This should not affect SEO in any meaningful way as content isn't generated dynamically with Undernet's component scripts.
55
+
Also, note that Undernet uses global DOM variables like `window` and `document`, which would normally break server-side rendering. To avoid conflicts, module scripts internally check against these globals before execution.
61
56
62
-
### Sass
57
+
### Getting Sass from the NPM module
63
58
64
-
With NPM, you need to set up two files which import Undernet's Sass partials. In these examples, the Webpack shorthand `~` is used to access `node_modules` (it doesn't matter how you get the files, as long as they come from that folder).
59
+
With NPM, you need to set up two files which import Undernet's Sass partials. In these examples, the Webpack shorthand `~` is used to access `node_modules`, however any alternative will do fine.
60
+
61
+
---
65
62
66
63
The first file is your config, which will have Sass helpers like variables, functions, and mixins. This can be imported wherever you want, as many times as you need, to get access to those utilities.
67
64
68
-
In your app, create a file called `_custom-config.scss` like so:
65
+
In your app, create a file called `_config.scss` like so:
69
66
70
67
```scss
71
68
@import"~undernet/src/scss/utilities/functions";
@@ -78,10 +75,10 @@ Note the comment; you can insert or import your variable overrides before the or
78
75
79
76
The next file should import the core framework, including all elements, components, and class utilities (you can forego any components/elements that aren't relevant to you). **Only import this file once at the global level**, otherwise you'll duplicate the selectors for each redundant import. Your application's Sass entry file is a good place to import it.
80
77
81
-
Create a file called `_custom-undernet.scss` like so:
78
+
Create a file called `_undernet.scss` like so:
82
79
83
80
```scss
84
-
@import"path/to/custom-config";
81
+
@import"path/to/config";
85
82
// .#{$style-scope} {
86
83
@import"~undernet/src/scss/utilities/reset";
87
84
@import"~undernet/src/scss/layout/grid";
@@ -97,25 +94,25 @@ Create a file called `_custom-undernet.scss` like so:
97
94
@import"~undernet/src/scss/utilities/globals";
98
95
```
99
96
100
-
Finally, import `custom-undernet.scss` to your app's Sass entry file, wherever that might be:
97
+
Finally, import `_undernet.scss` to your app's Sass entry file, wherever that might be:
101
98
102
99
```css
103
100
@import"path/to/custom-undernet";
104
101
// all your other styles after
105
102
```
106
103
107
-
... or link to the compiled CSS in your layout, before custom stylesheet links or style tags..
104
+
... or link to the compiled CSS in your layout, before your app-specific styles..
0 commit comments