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
Copy file name to clipboardExpand all lines: site/README.md
+7-10Lines changed: 7 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,6 +12,7 @@ site/
12
12
│ ├── dependencies.pug - dependencies common to all pages
13
13
│ ├── nav.pug - the navigation (within the sidebar)
14
14
│ └── sidebar.pug - the left sidebar
15
+
| └── siteComponent.pug - template to build docs for components
15
16
├── resources
16
17
│ ├── css
17
18
│ │ ├── docs.css - CSS related specifically to markup examples and component documentation
@@ -20,12 +21,8 @@ site/
20
21
│ └── js
21
22
│ ├── SpectrumSwitcher.js - A class that supports switching colorstops
22
23
│ ├── enhancement.js - Enhancements that make examples interactive
23
-
│ ├── polyfills.js - Polyfills for old browsers
24
24
│ ├── site.js - The actual site navigation code
25
25
│ └── typekit.js - Typekit that knows how to choose large/small kits based on the language attribute
26
-
└── templates
27
-
├── individualComponent.pug - template to build individual component packages
28
-
└── siteComponent.pug - template to build docs for components
29
26
```
30
27
31
28
## Architecture
@@ -38,27 +35,27 @@ Because the dependencies included in the component example pages are sorted in t
38
35
39
36
## Viewing the site
40
37
41
-
1. Run `gulp dev` at the top level of the project and the site will build and open up in your browser.
38
+
1. Run `yarn dev` at the top level of the project and the site will build and open up in your browser.
42
39
43
40
## Editing content
44
41
45
-
1. Run `gulp dev` at the top level of the project.
42
+
1. Run `yarn dev` at the top level of the project.
46
43
2. Edit the `*.pug` files in this folder as well as `includes/*.pug` and the site will live reload with your changes.
47
44
48
45
## Adding a new page
49
46
50
-
1. Run `gulp dev` at the top level of the project.
47
+
1. Run `yarn dev` at the top level of the project.
51
48
2. Create the Pug template file for the page in this folder by copying an existing page:
52
49
53
50
```shell
54
51
cp getting-started.pug new-page.pug
55
52
```
56
53
57
-
3. Manually add the new page to the navigation in `includes/nav.pug`, including the `.js-fastLoad` class on the link and the `is-selected` switch on the list item:
54
+
3. Manually add the new page to the navigation in `includes/nav.pug`, including the `is-selected` switch on the list item:
a.spectrum-SideNav-itemLink.js-fastLoad(href='new-page.html') New Page
58
+
a.spectrum-SideNav-itemLink(href='new-page.html') New Page
62
59
```
63
60
64
61
4. Your new page will appear in the navigation. You can continue to edit it and it will live reload.
@@ -79,4 +76,4 @@ See the [internationalized typography example page](typography-i18n.html) for Ja
79
76
80
77
## Adding and editing resources
81
78
82
-
You can add and edit site resources to the `resources/` folder. These are copied directly into the root of the site and can be included as necessary. Editing existing resources while `gulp dev` is running will inject the new resources.
79
+
You can add and edit site resources to the `resources/` folder. These are copied directly into the root of the site and can be included as necessary. Editing existing resources while `yarn dev` is running will inject the new resources.
p.spectrum-Body.spectrum-Body--sizeL Installed components will be available in the node_modules/@spectrum-css/ folder or on the Spectrum CSS NPM page.
59
59
60
60
h3.spectrum-Heading.spectrum-Heading--sizeS Setting up global variables
61
-
p.spectrum-Body.spectrum-Body--sizeL Create a new HTML file (e.g., #[code.spectrum-Code.spectrum-Code--sizeS button.html]) in your project’s root folder.
61
+
p.spectrum-Body.spectrum-Body--sizeL Create a new HTML file (e.g., #[code.spectrum-Code.spectrum-Code--sizeS button.html]) in your project's root folder.
62
62
63
-
p.spectrum-Body.spectrum-Body--sizeL or displaying a button in Spectrum’s light color theme and medium scale, a couple of classes need to be added to the document’s #[code.spectrum-Code.spectrum-Code--sizeS<html>] tag:
63
+
p.spectrum-Body.spectrum-Body--sizeL or displaying a button in Spectrum's light color theme and medium scale, a couple of classes need to be added to the document's #[code.spectrum-Code.spectrum-Code--sizeS<html>] tag:
p.spectrum-Body.spectrum-Body--sizeL Inside the #[code.spectrum-Code.spectrum-Code--sizeS<head>] tag, include the stylesheets that contain the design system tokens for global variables, scales, and color themes, as well as the stylesheets for the components themselves:
a(href="#contribute").spectrum-BigSubtleLink Contribute to Spectrum CSS
116
112
hr.spectrum-Divider.spectrum-Divider--large
117
113
118
-
p.spectrum-Body.spectrum-Body--sizeL We’d love for you to contribute to the Spectrum CSS project. Review the <ahref="https://github.com/adobe/spectrum-css/blob/main/.github/CONTRIBUTING.md"class="spectrum-Link spectrum-Link--quiet"target="_blank">contribution guidelines on our GitHub</a> to get started.
114
+
p.spectrum-Body.spectrum-Body--sizeL We'd love for you to contribute to the Spectrum CSS project. Review the <ahref="https://github.com/adobe/spectrum-css/blob/main/.github/CONTRIBUTING.md"class="spectrum-Link spectrum-Link--quiet"target="_blank">contribution guidelines on our GitHub</a> to get started.
0 commit comments