diff --git a/Readme.md b/Readme.md
index 57f40fd..2f0f514 100644
--- a/Readme.md
+++ b/Readme.md
@@ -3,7 +3,7 @@
## Requirements
The requirements for ds2-core are pretty light. You'll want to be able to process [PugJS](https://pugjs.org/api/getting-started.html) (formerly Jade) and [SCSS](https://sass-lang.com/documentation/) -- and that's about it.
-For our own design system, we use ds2-core with [Prepros](https://prepros.io) (which you can use the Free Unlimited Trial for, but why not splurge and spend the $30USD to support the developer). On MacOS, you could also use [CodeKit](https://codekitapp.com/).
+For our own design system, we use ds2-core with [Prepros](https://prepros.io) (which you can use the Free Unlimited Trial for, but why not splurge and spend the $30USD to support the developer and skip the nags). On MacOS, you could also use [CodeKit](https://codekitapp.com/).
Alternatively, if you have pre-processor pipelines for Pug and SCSS, which you can install using npm, or any other language you decide to pull in, you can use those to compile if that ends up being easier for you. The framework isn't too picky, so long as things go into the right place.
@@ -62,6 +62,37 @@ This will ensure that the .pug file will get processed and the .pp file will be
## Using core code with your own pattern documentation.
Using
+---
+Creating a new pattern
+Begin by creating a folder within your strucutre to hold the pattern. Add the folder to your config file.
+
+
+Generating css
+You've likely created your component's css as an include file beginning with an underscore. create a second file named the same that includes any dependencies (such as breakpoints) that are required to generate your valid css.
+
+You can now include the css in your pattern's index file.
+
+Generating pug
+Create a custom tool in prepros, give it a name such as "PP to Pug" set the input extension to .pp and the output extension to .pug and check Process Automatically . The command should be
+Mac / Linux
+ cp {{input}} {{output}}
+
+Windows
+ copy {{input}} {{output}}
+
+Once you've added the tool, set the output to "relative path" and set the output extension to pug. For each .pp file you may have to check process automatically as it doesn't always identify the new extension.
+
+You will now be able to include the .pp file in your pattern's index file while including the .pug file which will give a compiled version of your component's html.
+
+
+---
+
+
+
+
+
+
+
## Troubleshooting
diff --git a/public/assets/scaffolding-min.js b/public/assets/scaffolding-min.js
index 7e64c61..075e2ad 100644
--- a/public/assets/scaffolding-min.js
+++ b/public/assets/scaffolding-min.js
@@ -3245,6 +3245,9 @@ function init() {
});
});
}
+ if (document.location.hash != "" && document.location.hash.substring(0, 5) == "#tab-") {
+ document.querySelector(document.location.hash).dispatchEvent(click);
+ }
});
}
diff --git a/public/patterns/core/tabs/index.html b/public/patterns/core/tabs/index.html
index d12530c..d09d9a9 100644
--- a/public/patterns/core/tabs/index.html
+++ b/public/patterns/core/tabs/index.html
@@ -2,6 +2,13 @@
Pattern
+
What is it
@@ -170,6 +177,7 @@ const click = new MouseEvent('click', {
});
export function init(p = document, s = true) {
+
p.querySelectorAll(".tab-group, tabset").forEach(tabGroup => {
if (tabGroup.querySelector("[role=tablist]") === null) {
@@ -222,6 +230,10 @@ export function init(p = document, s = true) {
})
});
}
+
+ if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") {
+ document.querySelector(document.location.hash).dispatchEvent(click);
+ }
});
}
diff --git a/src/pg/patterns/core/tabs/_tabs.js b/src/pg/patterns/core/tabs/_tabs.js
index d8027ba..7086231 100644
--- a/src/pg/patterns/core/tabs/_tabs.js
+++ b/src/pg/patterns/core/tabs/_tabs.js
@@ -10,6 +10,7 @@ const click = new MouseEvent('click', {
});
export function init(p = document, s = true) {
+
p.querySelectorAll(".tab-group, tabset").forEach(tabGroup => {
if (tabGroup.querySelector("[role=tablist]") === null) {
@@ -62,5 +63,9 @@ export function init(p = document, s = true) {
})
});
}
+
+ if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") {
+ document.querySelector(document.location.hash).dispatchEvent(click);
+ }
});
}