Start tutorials

lilyMrt · Jul 13, 2019 · b92391e · b92391e
1 parent 8237860
commit b92391e
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 75 deletions.
diff --git a/.jsdoc.js b/.jsdoc.js
@@ -34,6 +34,7 @@ module.exports = {
     // Do not include functions marked `@private`
     private: false,
     recurse: true,
-    template: './node_modules/jsdoc-template-ship-shape'
+    template: './node_modules/jsdoc-template-ship-shape',
+    tutorials: './docs/tutorials'
   }
 };
diff --git a/docs/tutorials/Theming and Styling.md b/docs/tutorials/Theming and Styling.md
@@ -0,0 +1,60 @@
+We deliver some [predefined themes](/docs/themes.md) (e.g., `shepherd-theme-default` or `shepherd-theme-square`). You are welcome to use one of them by embedding its stylesheet into your app.
+
+```html
+<head>
+  <link rel="stylesheet" href="shepherd-theme-default.css">
+</head>
+```
+
+If you'd like to extend a theme within your own CSS, you can pass custom class names to the tour instance &mdash; or, as part of the options for each step &mdash; and use them as hooks for your own styling rules.
+
+```javascript
+let tour = new Shepherd.Tour({
+  defaultStepOptions: {
+    classes: 'shepherd-theme-custom'
+  }
+});
+```
+
+### Leveraging Sass Variables
+
+We use [SASS](https://sass-lang.com/) as pre-processor for CSS. This allows us to extend the CSS language with various syntax techniques &mdash; including variables and color functions that can be used to control theming.
+
+These values and variables can be found in [**_variables.scss**](/src/scss/_variables.scss), and the ones that can be adjusted for theming are listed below.
+
+**🎨 Color Settings**
+
+| Variable | Purpose | Default
+|---|---|---
+| $shepherd-theme-primary | Primary or brand color. The primary button gets this color. | #3288e6
+| $shepherd-theme-secondary | Secondary color. If it is not set explicitly, it is calculated using the primary color. | desaturate(lighten($shepherd-theme-primary, 40), 70)
+| $shepherd-text-background | Background color of the text area. | #ffffff
+| $shepherd-header-background | Background color of the header element. If it is not set explicitly, it is calculated using the text background color. | darken($shepherd-text-background, 10)
+
+**⚙️ Options**
+
+| Variable | Purpose | Default
+|---|---|---
+| $shepherd-element-width | Width of the step element | 400px
+| $shepherd-element-border-radius | Set radius of rounded corners. 0 means (sharp) pointed corners. | 5px
+| $shepherd-element-max-height | Maximum height of the element | 100%
+| $shepherd-element-max-width | Maximum width of the element | 100%
+| $shepherd-element-z-index | Move the element forward or backward | 9999
+| $shepherd-text-line-height | Determine the line height of the body text | 1.3em
+| $shepherd-button-border-radius | Decide whether the buttons should have rounded or pointed corners. 0 means (sharp) pointed corners. | 3px
+| $use-drop-shadow | The element casts a shadow | true
+
+The example below is intended to illustrate the individual customizations. Please make sure that the values are set before the import of the _base-theme_.
+
+```scss
+$shepherd-theme-primary: #9b59b6 !default;
+$shepherd-theme-secondary: desaturate(lighten($shepherd-theme-primary, 30), 70) !default;
+$shepherd-header-background: #eeeeee !default;
+$shepherd-element-border-radius: 0 !default;
+$shepherd-button-border-radius: 0 !default;
+$use-drop-shadow: true !default;
+
+@import 'base';
+```
+
+As a result you get a squared theme with a purple primary button. The individual steps cast a shadow on the underlying elements. The header is colored in a light gray tone.
diff --git a/index.md b/index.md
@@ -318,74 +318,6 @@ By default, tour steps will append their elements to the `body` element of the D
 `tippyOptions` hash inside of each Step's options hash.
 
 
-### Browser Support
-
-IE9+ and all modern browsers
-
-
-## Theming and Styling
-
-We deliver some [predefined themes](/docs/themes.md) (e.g., `shepherd-theme-default` or `shepherd-theme-square`). You are welcome to use one of them by embedding its stylesheet into your app.
-
-```html
-<head>
-  <link rel="stylesheet" href="shepherd-theme-default.css">
-</head>
-```
-
-If you'd like to extend a theme within your own CSS, you can pass custom class names to the tour instance &mdash; or, as part of the options for each step &mdash; and use them as hooks for your own styling rules.
-
-```javascript
-let tour = new Shepherd.Tour({
-  defaultStepOptions: {
-    classes: 'shepherd-theme-custom'
-  }
-});
-```
-
-### Leveraging Sass Variables
-
-We use [SASS](https://sass-lang.com/) as pre-processor for CSS. This allows us to extend the CSS language with various syntax techniques &mdash; including variables and color functions that can be used to control theming.
-
-These values and variables can be found in [**_variables.scss**](/src/scss/_variables.scss), and the ones that can be adjusted for theming are listed below.
-
-**🎨 Color Settings**
-
-| Variable | Purpose | Default
-|---|---|---
-| $shepherd-theme-primary | Primary or brand color. The primary button gets this color. | #3288e6
-| $shepherd-theme-secondary | Secondary color. If it is not set explicitly, it is calculated using the primary color. | desaturate(lighten($shepherd-theme-primary, 40), 70)
-| $shepherd-text-background | Background color of the text area. | #ffffff
-| $shepherd-header-background | Background color of the header element. If it is not set explicitly, it is calculated using the text background color. | darken($shepherd-text-background, 10)
-
-**⚙️ Options**
-
-| Variable | Purpose | Default
-|---|---|---
-| $shepherd-element-width | Width of the step element | 400px
-| $shepherd-element-border-radius | Set radius of rounded corners. 0 means (sharp) pointed corners. | 5px
-| $shepherd-element-max-height | Maximum height of the element | 100%
-| $shepherd-element-max-width | Maximum width of the element | 100%
-| $shepherd-element-z-index | Move the element forward or backward | 9999
-| $shepherd-text-line-height | Determine the line height of the body text | 1.3em
-| $shepherd-button-border-radius | Decide whether the buttons should have rounded or pointed corners. 0 means (sharp) pointed corners. | 3px
-| $use-drop-shadow | The element casts a shadow | true
-
-The example below is intended to illustrate the individual customizations. Please make sure that the values are set before the import of the _base-theme_.
-
-```scss
-$shepherd-theme-primary: #9b59b6 !default;
-$shepherd-theme-secondary: desaturate(lighten($shepherd-theme-primary, 30), 70) !default;
-$shepherd-header-background: #eeeeee !default;
-$shepherd-element-border-radius: 0 !default;
-$shepherd-button-border-radius: 0 !default;
-$use-drop-shadow: true !default;
-
-@import 'base';
-```
-
-As a result you get a squared theme with a purple primary button. The individual steps cast a shadow on the underlying elements. The header is colored in a light gray tone.
-
 ### 🔼 Displaying Arrows
 
 By default, Shepherd will generate and position an "arrow" element that points to the target

diff --git a/package.json b/package.json
@@ -83,7 +83,7 @@
     "jest-expect-message": "^1.0.2",
     "jest-transform-css": "^2.0.0",
     "jsdoc-mermaid": "^1.0.0",
-    "jsdoc-template-ship-shape": "^0.0.1",
+    "jsdoc-template-ship-shape": "^0.0.2",
     "mutationobserver-shim": "^0.3.3",
     "postcss": "^7.0.14",
     "replace": "^1.1.0",

diff --git a/yarn.lock b/yarn.lock
@@ -5573,10 +5573,12 @@ jsdoc-mermaid@^1.0.0:
   dependencies:
     doctrine "^2.0.0"
 
-jsdoc-template-ship-shape@^0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/jsdoc-template-ship-shape/-/jsdoc-template-ship-shape-0.0.1.tgz#d8591d5a2371fc589f094f68bc209d4a2aeb70e2"
-  integrity sha512-01cG2VbBUdhqerDwk2gLBrQEMxQROkZ1NNicz/r7YeAi5wve79gGkRaVsVMPi06y64YnrnytrvJ8HG5+A7YADw==
+jsdoc-template-ship-shape@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/jsdoc-template-ship-shape/-/jsdoc-template-ship-shape-0.0.2.tgz#118083fb81e9a0f0c19b108c5300f01fa1c85840"
+  integrity sha512-ZHwVyWUbT7KCQTH4oCIkplTpeJxcn8U6kJvCgQKU0UAXPrpiQmVJ5l1Z+9XsElQjRRWHnX6P4nFWu120ocnIag==
+  dependencies:
+    taffydb "^2.7.3"
 
 jsdoc@^3.6.2:
   version "3.6.2"
@@ -9354,7 +9356,7 @@ taffydb@2.7.2:
   resolved "https://registry.yarnpkg.com/taffydb/-/taffydb-2.7.2.tgz#7bf8106a5c1a48251b3e3bc0a0e1732489fd0dc8"
   integrity sha1-e/gQalwaSCUbPjvAoOFzJIn9Dcg=
 
-taffydb@2.7.3:
+taffydb@2.7.3, taffydb@^2.7.3:
   version "2.7.3"
   resolved "https://registry.yarnpkg.com/taffydb/-/taffydb-2.7.3.tgz#2ad37169629498fca5bc84243096d3cde0ec3a34"
   integrity sha1-KtNxaWKUmPylvIQkMJbTzeDsOjQ=