make sure style guide docs make sense whether we are on documentjs.com or documentcss.com

ramblinjan · ramblinjan · commit bce56465e0ed · 2015-05-03T16:58:22.000-07:00
diff --git a/docs/livestyleguide/guides/adding.md b/docs/livestyleguide/guides/adding.md
@@ -9,12 +9,12 @@ This guide will:
 * Give a designer-friendly explanation of what DocumentJS does
 * Make sure you have everything you need installed
 * Help you configure DocumentJS to add a Live Style Guide
-* Explain how to use [tags](/docs/documentjs.tags.html) to write your Live Style Guide
+* Explain how to use [tags](http://documentjs.com/docs/documentjs.tags.html) to write your Live Style Guide
 
 You should start elsewhere if:
 
 * You want to [create a Live Style Guide on a project that doesn't already use DocumentJS](/docs/lsg-quickstart.html)
-* You still need to set up DocumentJS for [API documentation](/docs/index.html)
+* You still need to set up DocumentJS for [API documentation](http://documentjs.com/docs/index.html)
 * You're just [trying to kill time](https://www.youtube.com/watch?v=6EneCIPJsog)
 
 First, [a brief disclaimer](/docs/lsg-adding-disclaimer.html)
diff --git a/docs/livestyleguide/guides/adding/disclaimer.md b/docs/livestyleguide/guides/adding/disclaimer.md
@@ -10,7 +10,7 @@ The [Standalone Guide](/docs/lsg-quickstart.html) is likely more precise when it
 There are a few ways to compensate for the ways this guide may differ from your specific project setup:
 
 * Go through this guide with a developer who understands how the API Documentation is set up in your project
-* Ask questions on [Gitter](https://gitter.im/bitovi/documentjs)
-* Open [an issue](https://github.com/bitovi/documentjs/issues/new) to let us know when something isn't clear
+* Ask questions on [Gitter](https://gitter.im/bitovi/documentcss)
+* Open [an issue](https://github.com/bitovi/documentcss/issues/new) to let us know when something isn't clear
 
 [Next Page](/docs/lsg-adding-designers.html)
diff --git a/docs/livestyleguide/guides/adding/fileorganization.md b/docs/livestyleguide/guides/adding/fileorganization.md
@@ -37,4 +37,4 @@ project/
         <!-- Automatically generated directory -->
 ```
 
-[Next Page](/docs/lsg-adding-writing.html)
+[Next Page](/docs/lsg-adding-next-steps.html)
diff --git a/docs/livestyleguide/guides/adding/fordesigners.md b/docs/livestyleguide/guides/adding/fordesigners.md
@@ -8,10 +8,10 @@ If you're working on a project that is already using DocumentJS, it is being use
 * Include demos to display examples alongside sample markup
 * Organize pages into navigation groups like "Elements," "Themes," and "Components"
 
-To see an example of this in action, check out the DocumentJS.com [Live Style Guide](/examples/styles/index.html).
+To see an example of this in action, check out the [example Live Style Guide](/examples/styles/index.html).
 
 ### What DocumentJS Does
-<sup>*[Skip this section](/docs/lsg-quickstart-installation.html) if you're comfortable with magic and don't care how DocumentJS works.*</sup>
+<sup>*[Skip this section](/docs/lsg-adding-installation.html) if you're comfortable with magic and don't care how DocumentJS works.*</sup>
 
 DocumentJS is a [*static site generator*](https://staticsitegenerators.net/). This means it scans specially formatted input files and creates a website that remains unchanged until the generator runs again. Whereas in a content management system changes happen somewhat automatically, a static site generator usually needs to be **run manually** and then the generated files must be **uploaded**.
 
@@ -26,4 +26,4 @@ To build your Live Style Guide, DocumentJS does the following:
 
 
 
-[Next Page](/docs/lsg-quickstart-installation.html)
+[Next Page](/docs/lsg-adding-installation.html)
diff --git a/docs/livestyleguide/guides/adding/next-steps.md b/docs/livestyleguide/guides/adding/next-steps.md
@@ -1,7 +1,7 @@
 @page lsg-adding-next-steps Writing and Customizing
 @parent lsg-adding-group-next-steps 0
 
-Now that you've finished with installation and configuration, creating pages, documenting, and customizing your site follows the same steps as the [Standalone Style Guide](/docs/lsg-quickstart.html):
+Now that you've finished with installation and configuration, the rest of the the process (creating pages, documenting, and customizing your site) will follow the same steps as the [Standalone Style Guide](/docs/lsg-quickstart.html):
 
 * [Creating a Page](/docs/lsg-quickstart-creating-page.html)
 * [Generating the Site](/docs/lsg-quickstart-generate.html)
diff --git a/docs/livestyleguide/guides/quickstart.md b/docs/livestyleguide/guides/quickstart.md
@@ -11,13 +11,13 @@ This guide will:
 * Give a [designer-friendly explanation](/docs/lsg-quickstart-designers.html) of what DocumentJS does
 * Help you [install DocumentJS](/docs/lsg-quickstart-installation.html)
 * Help you configure a Live Style Guide site
-* Explain how to use [tags](/docs/documentjs.tags.html) to write your Live Style Guide
+* Explain how to use [tags](http://documentjs.com/docs/documentjs.tags.html) to write your Live Style Guide
 
 You should start elsewhere if:
 
-* You [only care about JavaScript documentation](/docs/index.html)
+* You [only care about JavaScript documentation](http://documentjs.com/docs/index.html)
 * You already use DocumentJS and want to [add a Live Style Guide](/docs/lsg-adding.html)
-* You want to set up DocumentJS for [API documentation](/docs/index.html), then [add a Live Style Guide](/docs/lsg-adding.html)
+* You want to set up DocumentJS for [API documentation](http://documentjs.com/docs/index.html), then [add a Live Style Guide](/docs/lsg-adding.html)
 * You [are totally lost](https://www.youtube.com/watch?v=I0Pow7Gi7Xw)
 
 [Next Page](/docs/lsg-quickstart-designers.html)
diff --git a/docs/livestyleguide/guides/quickstart/custom-styles.md b/docs/livestyleguide/guides/quickstart/custom-styles.md
@@ -41,6 +41,6 @@ Updated `documentjs.json`:
 
 ### Changing the Styles
 
-To see DocumentJS default styles, look in `node_modules/documentjs/site/default/static/styles`. See the documentation for these styles in the [DocumentJS.com Live Style Guide](/styles/variables.less.html). To change any of these styles for your style guide, simply copy one of the files over to `style-guide-theme/styles` and make your changes.
+To see DocumentJS default styles, look in `node_modules/documentjs/site/default/static/styles`. See the documentation for these styles in the [example Live Style Guide](/examples/styles/variables.less.html). To change any of these styles for your style guide, simply copy one of the files over to `style-guide-theme/styles` and make your changes.
 
 If you'd like to add a new LESS file, simply copy over `styles.less` (which imports all the stylesheets) and `@@import` your new file. DocumentJS will automatically resolve default file imports for any files you don't copy over so don't worry about fixing the file paths for the `@@import` statement.
diff --git a/docs/livestyleguide/guides/quickstart/demos.md b/docs/livestyleguide/guides/quickstart/demos.md
@@ -34,9 +34,9 @@ In `base.less`:
  */
 ```
 
-On the "Base Styles" stylesheet page generated from `base.less`, there will now be a demo showing whatever page is at `demos/forms.html`. In the [Example Style Guide](/styles/base.less.html), that looks like this:
+On the "Base Styles" stylesheet page generated from `base.less`, there will now be a demo showing whatever page is at `demos/forms.html`. In the [Example Style Guide](/examples/styles/base.less.html), that looks like this:
 
-@demo demos/base/forms/demo.html
+@demo examples/demos/forms.html
 
 
 ### Arguments
@@ -69,9 +69,9 @@ In `typography.less`:
  */
 ```
 
-Similar to above, but without the "HTML" tab, there will be a demo. In the [Example Style Guide](/styles/typography.less.html), that looks like this:
+Similar to above, but without the "HTML" tab, there will be a demo. In the [Example Style Guide](/examples/styles/typography.less.html), that looks like this:
 
-@iframe demos/typography/headings/demo.html
+@iframe examples/demos/headings.html
 
 
 ### Arguments
@@ -80,4 +80,6 @@ Similar to above, but without the "HTML" tab, there will be a demo. In the [Exam
 @@iframe FILEPATH
 ```
 
-Just like with the `@@demo` tag, the `FILEPATH` argument is a link to the location of the demo page.
+Just like with the `@@demo` tag, the `FILEPATH` argument is a link to the location of the demo page.
+
+[Next Page](/docs/lsg-custom-styles.html)
diff --git a/docs/livestyleguide/guides/quickstart/fileorganization.md b/docs/livestyleguide/guides/quickstart/fileorganization.md
@@ -29,4 +29,4 @@ project/
         <!-- Automatically generated directory -->
 ```
 
-[Next Page](/docs/lsg-quickstart-writing.html)
+[Next Page](/docs/lsg-quickstart-creating-page.html)
diff --git a/docs/livestyleguide/guides/quickstart/fordesigners.md b/docs/livestyleguide/guides/quickstart/fordesigners.md
@@ -1,14 +1,14 @@
 @page lsg-quickstart-designers DocumentJS for Designers
 @parent lsg-quickstart-group-intro 0
 
-DocumentJS isn't just for JavaScript API Docs. As long as your project is using [npm](http://npmjs.org), you will be able to:
+Though you're documenting your styles, the tool you'll be using is DocumentJS. As long as your project is using [npm](http://npmjs.org), you will be able to:
 
 * Generate a living site that automatically updates as your project's design evolves
 * Write a style guide with inline comments in stylesheets or with individual markdown files
 * Include demos to display examples alongside sample markup
 * Organize pages into navigation groups like "Elements," "Themes," and "Components"
 
-To see an example of this, check out the DocumentJS.com [Live Style Guide](/examples/styles/index.html).
+To see an example of this, check out this site's example [Live Style Guide](/examples/styles/index.html).
 
 
 ### What DocumentJS Does
diff --git a/docs/livestyleguide/guides/quickstart/generate.md b/docs/livestyleguide/guides/quickstart/generate.md
@@ -43,4 +43,6 @@ If you'd like DocumentJS to rebuild the site every time you make changes, you ca
 
 ```
 > documentjs -w
-```
+```
+
+[Next Page](/docs/lsg-quickstart-stylesheet.html)
diff --git a/docs/livestyleguide/guides/quickstart/organizing.md b/docs/livestyleguide/guides/quickstart/organizing.md
@@ -1,7 +1,7 @@
 @page lsg-quickstart-organizing Organizing your Style Guide
 @parent lsg-quickstart-group-writing 1
 
-After you've documented your first stylesheet, if you [generate the site](docs/lsg-quickstart-generate.html) you won't see your stylesheet page anywhere in the sidebar. Even though the page has been generated, it isn't linked up to the rest of the site because you need to tell DocumentJS where to put it.
+After you've documented your first stylesheet, if you [generate the site](/docs/lsg-quickstart-generate.html) you won't see your stylesheet page anywhere in the sidebar. Even though the page has been generated, it isn't linked up to the rest of the site because you need to tell DocumentJS where to put it.
 
 We have two more tags so you can organize your style guide:
 
@@ -73,4 +73,6 @@ Once you've specified groups in `stylesheet.md`, you just need to make those gro
  **/
 ```
 
-Notice that we are using the name we declared as a `@@group` as the parent.
+Notice that we are using the name we declared as a `@@group` as the parent.
+
+[Next Page](/docs/lsg-quickstart-demos.html)
diff --git a/docs/livestyleguide/guides/quickstart/stylesheet.md b/docs/livestyleguide/guides/quickstart/stylesheet.md
@@ -29,7 +29,7 @@ h1,h2,h3,h4,h5,h6{
 
 ```
 
-As a result our styleguide will start to look like [this page](/styles/typography.less.html). Don't worry about the live demos just yet--we'll get to that soon.
+As a result our styleguide will start to look like [this page](/examples/styles/typography.less.html). Don't worry about the live demos just yet--we'll get to that soon.
 
 ## New Tag: `@@stylesheet`
 
@@ -58,7 +58,7 @@ The @@stylesheet tag behaves similarly to the @@page tag, so it has the same arg
 @@stylesheet NAME TITLE
 ```
 
-`NAME` is the unique name of the page for reference purposes (and will determine the name of the `html` file). It is often going to make sense to just make `NAME` the name of the file (on the [example Live Style Guide](/styles/typography.less.html) you will see file names listed under the titles for this reason).
+`NAME` is the unique name of the page for reference purposes (and will determine the name of the `html` file). It is often going to make sense to just make `NAME` the name of the file (on the [example Live Style Guide](/examples/styles/typography.less.html) you will see file names listed under the titles for this reason).
 
 `TITLE` is the title that will be displayed on the page.
 
@@ -92,4 +92,6 @@ h1,h2,h3,h4,h5,h6{
 @@styles NAME TITLE
 ```
 
-`NAME` is the unique name of the page for reference purposes (but is less important in this case). `TITLE` is the title of the heading that will be displayed on the generated stylesheet page.
+`NAME` is the unique name of the page for reference purposes (but is less important in this case). `TITLE` is the title of the heading that will be displayed on the generated stylesheet page.
+
+[Next Page](/docs/lsg-quickstart-organizing.html)
diff --git a/docs/livestyleguide/livestyleguide.md b/docs/livestyleguide/livestyleguide.md
@@ -2,14 +2,18 @@
 @parent DocumentJS.guides 99
 @group lsg.guides 0 How-to Guides
 
-DocumentJS can also be used to generate a Live Style Guide. With the style documentation features of DocumentJS, you can:
+@body
 
-* Document your project's styles inline in `.css`, `.less`, or `.scss` files
-* Write documentation in markdown files
-* Create a standalone style guide page (even if you're not using DocumentJS for JavaScript documentation)
-* Include demos and examples
+Depending on what you're trying to do, you may or may not be on the right page:
+
+* If you're a designer or only care about creating a Live Style Guide, you will probably prefer reading this at [DocumentCSS.com](http://documentcss.com/docs/index.html)
+* If you're a developer or you're also interested in API documentation, you may want to use [DocumentJS.com](http://documentjs.com/docs/live-style-guide.html) so you have quick access to other information
 
+[DocumentCSS.com](http://documentcss.com) was created as a simple reference for the Live Style Guide **feature** of DocumentJS. The *name of the tool you'll be downloading* is DocumentJS even if you're using it for style documentation.
 
-If you're only using DocumentJS to create a Live Style guide, see [Standalone Live Style Guide]({{urlTo lsg-quickstart}}).
+While DocumentJS was originally built to create API documentation, it can also be used to generate a Live Style Guide. With the style documentation features of DocumentJS, you can:
 
-A guide on adding a Live Style Guide to an existing DocumentJS project is coming soon.
+* Document your project's styles inline in `.css`, `.less`, or `.scss` files
+* Write documentation in markdown files
+* Create a standalone style guide page (even if you're not using DocumentJS for JavaScript documentation)
+* Include demos and examples
diff --git a/documentjs.json b/documentjs.json
@@ -2,7 +2,7 @@
 	"sites": {
 		"docs": {
 			"parent": "DocumentJS",
-			"pageConfig": {"page":"docs"},
+			"pageConfig": {"page":"docs", "site": "documentjs"},
 			"glob": {
 				"pattern": "{docs,tags,lib,tasks}/**/*.{js,md}",
 				"ignore": "lib/{configured,process,generate,find,generators/html}/test/**/*"
