From ff49d02f83d3a07a08d3aa0dc0351f2442f5ac61 Mon Sep 17 00:00:00 2001 From: EricFromCanada Date: Mon, 14 Jan 2019 14:18:09 -0500 Subject: [PATCH 1/3] Make spacing consistent --- README.md | 3 +-- bin/just-the-docs | 2 +- docs/configuration.md | 12 ++++++------ docs/customization.md | 4 +--- docs/navigation-structure.md | 9 +++++++-- docs/search.md | 10 ++++------ docs/ui-components/buttons.md | 22 +++++++--------------- docs/ui-components/code.md | 4 +--- docs/ui-components/labels.md | 22 ++++++++++------------ docs/ui-components/lists.md | 15 ++++++++------- docs/ui-components/typography.md | 8 ++++---- docs/utilities/color.md | 2 +- docs/utilities/layout.md | 4 +--- docs/utilities/typography.md | 16 +++++++--------- docs/utilities/utilities.md | 2 +- index.md | 8 +++++--- 16 files changed, 65 insertions(+), 78 deletions(-) diff --git a/README.md b/README.md index dff46d6..1a372fc 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,6 @@


- ![jtd](https://user-images.githubusercontent.com/896475/47384541-89053c80-d6d5-11e8-98dc-dba16e192de9.gif) ## Installation @@ -60,7 +59,7 @@ Bug reports and pull requests are welcome on GitHub at https://github.com/pmarsc To set up your environment to develop this theme, run `bundle install`. -Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal. +Your theme is set up just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal. When the theme is released, only the files in `_layouts`, `_includes`, and `_sass` tracked with Git will be released. diff --git a/bin/just-the-docs b/bin/just-the-docs index 6404b21..5a62290 100755 --- a/bin/just-the-docs +++ b/bin/just-the-docs @@ -1,7 +1,7 @@ #!/usr/bin/env ruby gem_dir = File.expand_path("..",File.dirname(__FILE__)) -$LOAD_PATH.unshift gem_dir# Look in gem directory for resources first. +$LOAD_PATH.unshift gem_dir # Look in gem directory for resources first. exec_type = ARGV[0] if exec_type == 'rake' then diff --git a/docs/configuration.md b/docs/configuration.md index 5d47bde..fcab495 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -39,12 +39,12 @@ const originalCssRef = cssFile.getAttribute('href') const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css') addEvent(toggleDarkMode, 'click', function(){ -if (cssFile.getAttribute('href') === originalCssRef) { -cssFile.setAttribute('href', darkModeCssRef) -} else { -cssFile.setAttribute('href', originalCssRef) -} + if (cssFile.getAttribute('href') === originalCssRef) { + cssFile.setAttribute('href', darkModeCssRef) + } else { + cssFile.setAttribute('href', originalCssRef) + } }) -See [Customization]({{site.baseurl }}{% link docs/customization.md %}) for more information. +See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information. diff --git a/docs/customization.md b/docs/customization.md index 6f0961b..8c019e0 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -5,7 +5,7 @@ nav_order: 6 --- # Customization -{:.no_toc} +{: .no_toc } ## Table of contents {: .no_toc .text-delta } @@ -49,7 +49,6 @@ addEvent(toggleDarkMode, 'click', function(){ }) - ## Specific visual customization To customize your site’s aesthetic, open `_sass/custom/custom.scss` in your editor to see if there is a variable that you can override. Most styles like fonts, colors, spacing, etc.. are derived from these variables. To override a specific variable, uncomment out it’s line and change it’s value. @@ -72,4 +71,3 @@ $link-color: $blue-000; _Note:_ Editing the variables directly in `_sass/support/variables.scss` is not recommended and can cause other dependancies to fail. --- - diff --git a/docs/navigation-structure.md b/docs/navigation-structure.md index 839a552..d85c7f0 100644 --- a/docs/navigation-structure.md +++ b/docs/navigation-structure.md @@ -29,6 +29,7 @@ To specify a page order, use the `nav_order` variable in your pages' YAML front #### Example {: .no_toc } + ```yaml --- layout: default @@ -45,6 +46,7 @@ For specific pages that you do not wish to include in the main navigation, e.g. #### Example {: .no_toc } + ```yaml --- layout: default @@ -92,6 +94,7 @@ On the parent pages, add 2 YAML front matter variables: #### Example {: .no_toc } + ```yaml --- layout: default @@ -111,6 +114,7 @@ On child pages, simply set the `parent:` YAML front matter to whatever the paren #### Example {: .no_toc } + ```yaml --- layout: default @@ -126,6 +130,7 @@ By default, all pages with children will automatically append a Table of Content #### Example {: .no_toc } + ```yaml --- layout: default @@ -142,7 +147,7 @@ The Buttons page appears a child of UI Components and appears second in the UI C ### Children with children {: .text-gamma } -Child pages can also have children (grand children). This is achieved by using a similar pattern on the child and grand child pages. +Child pages can also have children (grandchildren). This is achieved by using a similar pattern on the child and grandchild pages. 1. Add the `has_children` attribute to the child 1. Add the `parent` and `grand_parent` attribute to the grandchild @@ -198,7 +203,7 @@ To add a auxiliary navigation item to your site (in the upper right on all pages ```yml # Aux links for the upper right navigation aux_links: -"Just the Docs on GitHub": + "Just the Docs on GitHub": - "//github.com/pmarsceill/just-the-docs" ``` diff --git a/docs/search.md b/docs/search.md index e1b18a4..7827eff 100644 --- a/docs/search.md +++ b/docs/search.md @@ -5,7 +5,7 @@ nav_order: 7 --- # Search -{:.no_toc} +{: .no_toc } ## Table of contents {: .no_toc .text-delta } @@ -25,16 +25,13 @@ Just the docs uses [lunr.js](http://lunrjs.com) to add a client-side search inte ### Generate search index -Before you can use search, you must initialize the feature by running this -rake command that comes with the `just-the-docs` +Before you can use search, you must initialize the feature by running this `rake` command that comes with `just-the-docs`: ```bash $ bundle exec just-the-docs rake search:init ``` -This command creates the `search-data.json` file that Jekyll uses to create -your search index. Alternatively, you can create the file manually in the -`assets/js/` of your Jekyll site with this content: +This command creates the `search-data.json` file that Jekyll uses to create your search index. Alternatively, you can create the file manually in the `assets/js/` directory of your Jekyll site with this content: ```{% raw %} --- @@ -68,6 +65,7 @@ Sometimes you might have a page that you don't want indexed in the search and yo #### Example {: .no_toc } + ```yaml --- layout: default diff --git a/docs/ui-components/buttons.md b/docs/ui-components/buttons.md index 8da7729..1b43174 100644 --- a/docs/ui-components/buttons.md +++ b/docs/ui-components/buttons.md @@ -6,7 +6,7 @@ nav_order: 2 --- # Buttons -{:.no_toc} +{: .no_toc } ## Table of contents {: .no_toc .text-delta } @@ -28,7 +28,6 @@ nav_order: 2 [Link button](http://example.com/){: .btn .btn-green } [Link button](http://example.com/){: .btn .btn-outline } - ```markdown [Link button](http://example.com/){: .btn } @@ -44,11 +43,8 @@ nav_order: 2 GitHub flavored markdown does not support the `button` element, so you'll have to use inline HTML for this: -
- -
```html @@ -60,11 +56,9 @@ GitHub flavored markdown does not support the `button` element, so you'll have t ### Button size -Wrap the button in container that uses the [font-size utility classes]({{ -site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons: +Wrap the button in a container that uses the [font-size utility classes]({{ site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons:
- [Big ass button](http://example.com/){: .btn } @@ -72,7 +66,6 @@ site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons: [Tiny ass button](http://example.com/){: .btn } -
```markdown @@ -89,17 +82,16 @@ site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons: Use the [margin utility classes]({{ site.baseurl }}{% link docs/utilities/utilities.md %}#spacing) to add spacing between two buttons in the same block.
+[Button with space](http://example.com/){: .btn .btn-purple .mr-2 } +[Button ](http://example.com/){: .btn .btn-blue .mr-2 } -[Button with space](http://example.com/){: .btn .btn-purple .mr-2} -[Button ](http://example.com/){: .btn .btn-blue .mr-2} - -[Button with more space](http://example.com/){: .btn .btn-green .mr-4} +[Button with more space](http://example.com/){: .btn .btn-green .mr-4 } [Button ](http://example.com/){: .btn .btn-blue }
```markdown -[Button with space](http://example.com/){: .btn .btn-purple .mr-2} +[Button with space](http://example.com/){: .btn .btn-purple .mr-2 } [Button ](http://example.com/){: .btn .btn-blue } -[Button with more space](http://example.com/){: .btn .btn-green .mr-4} +[Button with more space](http://example.com/){: .btn .btn-green .mr-4 } [Button ](http://example.com/){: .btn .btn-blue } ``` diff --git a/docs/ui-components/code.md b/docs/ui-components/code.md index 40faf41..bac5e2f 100644 --- a/docs/ui-components/code.md +++ b/docs/ui-components/code.md @@ -6,7 +6,7 @@ nav_order: 6 --- # Code -{:.no_toc} +{: .no_toc } ## Table of contents {: .no_toc .text-delta } @@ -21,9 +21,7 @@ nav_order: 6 Code can be rendered inline using single ticks by wrapping your code in single back ticks.
- Lorem ipsum dolor sit amet, `` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -
```markdown Lorem ipsum dolor sit amet, `` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. diff --git a/docs/ui-components/labels.md b/docs/ui-components/labels.md index f374246..05f02d4 100644 --- a/docs/ui-components/labels.md +++ b/docs/ui-components/labels.md @@ -10,42 +10,40 @@ nav_order: 3 Use labels as a way to add an additional mark to a section of your docs. Labels come in a few colors. By default, labels will be blue.
- Default label {: .label } Blue label -{: .label .label-blue} +{: .label .label-blue } Stable -{: .label .label-green} +{: .label .label-green } New release -{: .label .label-purple} +{: .label .label-purple } Coming soon -{: .label .label-yellow} +{: .label .label-yellow } Deprecated -{: .label .label-red} - +{: .label .label-red }
```markdown Default label {: .label } Blue label -{: .label .label-blue} +{: .label .label-blue } Stable -{: .label .label-green} +{: .label .label-green } New release -{: .label .label-purple} +{: .label .label-purple } Coming soon -{: .label .label-yellow} +{: .label .label-yellow } Deprecated -{: .label .label-red} +{: .label .label-red } ``` diff --git a/docs/ui-components/lists.md b/docs/ui-components/lists.md index 364316e..630e8ad 100644 --- a/docs/ui-components/lists.md +++ b/docs/ui-components/lists.md @@ -6,7 +6,7 @@ nav_order: 5 --- # Lists -{:.no_toc} +{: .no_toc } ## Table of contents {: .no_toc .text-delta } @@ -19,6 +19,7 @@ nav_order: 5 Most lists can be rendered with pure markdown... ## Unordered list +
- Item 1 - Item 2 @@ -42,18 +43,19 @@ _or_ * Item 3 ``` - ## Ordered list +
1. Item 1 1. Item 2 1. Item 3
- ```markdown +```markdown 1. Item 1 1. Item 2 1. Item 3 - ``` +``` + ## Task list
@@ -61,11 +63,11 @@ _or_ - [ ] hello, this is another todo item - [x] goodbye, this item is done
- ```markdown +```markdown - [ ] hello, this is a todo item - [ ] hello, this is another todo item - [x] goodbye, this item is done - ``` +``` ## Definition list @@ -95,4 +97,3 @@ Definition lists require HTML syntax and aren't supported with the GitHub flavor
Green
``` - diff --git a/docs/ui-components/typography.md b/docs/ui-components/typography.md index 6cb1df5..b35a1a3 100644 --- a/docs/ui-components/typography.md +++ b/docs/ui-components/typography.md @@ -6,7 +6,7 @@ nav_order: 1 --- # Typography -{:.no_toc} +{: .no_toc } ## Table of contents {: .no_toc .text-delta } @@ -24,7 +24,7 @@ By default, Just the Docs uses a native system font stack for sans-serif fonts: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif ``` -ABCDEFGHIJKLMNOPQRSTUVWXYZ +ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz {: .fs-5 .ls-10 .code-example } @@ -34,7 +34,7 @@ For monospace type, like code snippets or the pre `
` element, Just the Docs
 "SFMono-Regular", Menlo, Consolas, Monospace
 ```
 
-ABCDEFGHIJKLMNOPQRSTUVWXYZ  
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
 abcdefghijklmnopqrstuvwxyz
 {: .fs-5 .ls-10 .text-mono .code-example }
 
@@ -51,7 +51,7 @@ Just the docs uses a responsive type scale that shifts depending on the viewport
 | `h3`, `.text-gamma`   | 16px                             | 18px                          |
 | `h4`, `.text-delta`   | 14px                             | 16px                          |
 | `h5`, `.text-epsilon` | 16px                             | 18px                          |
-| `h6`, `.text-zeta  `   | 18px                             | 24px                          |
+| `h6`, `.text-zeta`    | 18px                             | 24px                          |
 | `body`                | 14px                             | 16px                          |
 
 ---
diff --git a/docs/utilities/color.md b/docs/utilities/color.md
index f025f91..79b3529 100644
--- a/docs/utilities/color.md
+++ b/docs/utilities/color.md
@@ -6,7 +6,7 @@ parent: Utilities
 ---
 
 # Color Utilities
-{:.no_toc}
+{: .no_toc }
 
 ## Table of contents
 {: .no_toc .text-delta }
diff --git a/docs/utilities/layout.md b/docs/utilities/layout.md
index a1b564e..ac03f7e 100644
--- a/docs/utilities/layout.md
+++ b/docs/utilities/layout.md
@@ -7,7 +7,7 @@ has_children: true
 ---
 
 # Layout Utilities
-{:.no_toc}
+{: .no_toc }
 
 ## Table of contents
 {: .no_toc .text-delta }
@@ -65,7 +65,6 @@ This paragraph will have a margin bottom of 1rem/16px at large screens.
 
 This paragraph will have 2rem/32px of padding on the right and left at all screen sizes.
 {: .px-6 }
-
 ```
 
 ## Vertical Alignment
@@ -111,5 +110,4 @@ These headings will be `inline-block`:
 
 ### heading 3
 { .d-inline-block }
-
 ```
diff --git a/docs/utilities/typography.md b/docs/utilities/typography.md
index a517384..7d7a86d 100644
--- a/docs/utilities/typography.md
+++ b/docs/utilities/typography.md
@@ -6,7 +6,7 @@ parent: Utilities
 ---
 
 # Typography Utilities
-{:.no_toc}
+{: .no_toc }
 
 ## Table of contents
 {: .no_toc .text-delta }
@@ -117,33 +117,31 @@ Use the `lh-` classes to explicitly apply line height to text.
 | `.lh-tight`   | 1.1                  | Default for headings          |
 | `.lh-default` | 1.4                  | Default for body (paragraphs) |
 
-
-
 
-No Line height +No Line height No Line height {: .lh-0 } -Tight line height +Tight line height Tight line height {: .lh-tight } -Default line height +Default line height Default line height {: .fh-default }
```markdown In Markdown, use the `{: }` wrapper to apply custom classes: -No Line height +No Line height No Line height {: .lh-0 } -Tight line height +Tight line height Tight line height {: .lh-tight } -Default line height +Default line height Default line height {: .fh-default } ``` diff --git a/docs/utilities/utilities.md b/docs/utilities/utilities.md index b368337..a0d2541 100644 --- a/docs/utilities/utilities.md +++ b/docs/utilities/utilities.md @@ -7,7 +7,7 @@ permalink: docs/utilities --- # Utilities -{:.no_toc} +{: .no_toc } CSS utility classes come in handy when you to want to override default styles to give create additional whitespace (margins/padding), unexpected shifts in font-size or weight, add color, or to hide (or show) something a specific screen size. {: .fs-6 .fw-300 } diff --git a/index.md b/index.md index 95ccd65..67635b0 100644 --- a/index.md +++ b/index.md @@ -6,7 +6,6 @@ description: "Just the Docs is a responsive Jekyll theme with built-in search th permalink: / --- - # Focus on writing good documentation {: .fs-9 } @@ -18,10 +17,13 @@ Just the Docs gives your documentation a jumpstart with a responsive Jekyll them --- ## Getting started + ### Dependencies Just the Docs is built for [Jekyll](https://jekyllrb.com), a static site generator. View the [quick start guide](https://jekyllrb.com/docs/quickstart/) for more information. Just the Docs requires no special Jekyll plugins and can run on GitHub Pages standard Jekyll compiler. + ### Quick start: Use as a GitHub Pages remote theme + 1. Add Just the Docs to your Jekyll site's `_config.yml` as a [remote theme](https://blog.github.com/2017-11-29-use-any-theme-with-github-pages/) ```yaml remote_theme: pmarsceill/just-the-docs @@ -29,6 +31,7 @@ remote_theme: pmarsceill/just-the-docs You must have GitHub pages enabled on your repo, one or more markdown files, and a `_config.yml` file. [See an example repository](https://github.com/pmarsceill/jtd-remote) ### Local installation: Use the gem-based theme + 1. Install the Ruby Gem ```bash $ gem install just-the-docs @@ -56,8 +59,8 @@ $ bundle exec jekyll serve 4. Point your web browser to [http://localhost:4000](http://localhost:4000) ### Configure Just the Docs -- [See configuration options]({{ site.baseurl }}{% link docs/configuration.md %}) +- [See configuration options]({{ site.baseurl }}{% link docs/configuration.md %}) --- @@ -74,7 +77,6 @@ Just the Docs is distributed by an [MIT license](https://github.com/pmarsceill/j When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change. Read more about becoming a contributor in [our GitHub repo](https://github.com/pmarsceill/just-the-docs#contributing). - ### Code of Conduct Just the Docs is committed to fostering a welcoming community. From ae5bcfe361054e53d21a44d7c0965640a821cf74 Mon Sep 17 00:00:00 2001 From: EricFromCanada Date: Mon, 14 Jan 2019 14:32:41 -0500 Subject: [PATCH 2/3] Fix grammar and capitalization --- assets/css/dark-mode-preview.scss | 2 +- assets/css/just-the-docs.scss | 2 +- docs/customization.md | 4 ++-- docs/navigation-structure.md | 24 ++++++++++++------------ docs/search.md | 6 +++--- docs/ui-components/buttons.md | 2 +- docs/ui-components/code.md | 6 +++--- docs/ui-components/lists.md | 4 ++-- docs/ui-components/typography.md | 6 +++--- docs/utilities/color.md | 2 +- docs/utilities/layout.md | 4 ++-- docs/utilities/utilities.md | 2 +- index.md | 8 ++++---- 13 files changed, 36 insertions(+), 36 deletions(-) diff --git a/assets/css/dark-mode-preview.scss b/assets/css/dark-mode-preview.scss index f30f9e0..8b77da6 100644 --- a/assets/css/dark-mode-preview.scss +++ b/assets/css/dark-mode-preview.scss @@ -10,7 +10,7 @@ @import "./vendor/normalize.scss/normalize.scss"; // -// Import Just the docs scss +// Import Just the Docs scss // // Support diff --git a/assets/css/just-the-docs.scss b/assets/css/just-the-docs.scss index 601cdaa..3431ae8 100644 --- a/assets/css/just-the-docs.scss +++ b/assets/css/just-the-docs.scss @@ -10,7 +10,7 @@ @import "./vendor/normalize.scss/normalize.scss"; // -// Import Just the docs scss +// Import Just the Docs scss // // Support diff --git a/docs/customization.md b/docs/customization.md index 8c019e0..0ed6c2e 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -51,9 +51,9 @@ addEvent(toggleDarkMode, 'click', function(){ ## Specific visual customization -To customize your site’s aesthetic, open `_sass/custom/custom.scss` in your editor to see if there is a variable that you can override. Most styles like fonts, colors, spacing, etc.. are derived from these variables. To override a specific variable, uncomment out it’s line and change it’s value. +To customize your site’s aesthetic, open `_sass/custom/custom.scss` in your editor to see if there is a variable that you can override. Most styles like fonts, colors, spacing, etc. are derived from these variables. To override a specific variable, uncomment its line and change its value. -For example, to change the link color from the purple default to blue, open `_sass/custom/custom.css` and find the `$link-color` variable on line `50`. Uncomment it out, and change it's value to our `$blue-000` variable, or another shade of your choosing. +For example, to change the link color from the purple default to blue, open `_sass/custom/custom.css` and find the `$link-color` variable on line `50`. Uncomment it, and change its value to our `$blue-000` variable, or another shade of your choosing. #### Example {: no_toc } diff --git a/docs/navigation-structure.md b/docs/navigation-structure.md index d85c7f0..8a72e5b 100644 --- a/docs/navigation-structure.md +++ b/docs/navigation-structure.md @@ -25,7 +25,7 @@ By default, all pages will appear as top level pages in the main nav unless a pa ## Ordering pages -To specify a page order, use the `nav_order` variable in your pages' YAML front matter. +To specify a page order, use the `nav_order` parameter in your pages' YAML front matter. #### Example {: .no_toc } @@ -42,7 +42,7 @@ nav_order: 4 ## Excluding pages -For specific pages that you do not wish to include in the main navigation, e.g. a 404 page or a landing page. Use the `nav_exclude: true` parameter in the YAML front matter for that page. +For specific pages that you do not wish to include in the main navigation, e.g. a 404 page or a landing page, use the `nav_exclude: true` parameter in the YAML front matter for that page. #### Example {: .no_toc } @@ -59,7 +59,7 @@ nav_exclude: true ## Pages with children -Sometimes you will want to create a page with many children (a section). First, it is recommended that you keep pages that are related in a directory together... For example, in these docs, we keep all of the written documentation in the `./docs` directory and each of the sections in subdirectories like `./docs/ui-components` and `./docs/utilities`. This gives is an organization like: +Sometimes you will want to create a page with many children (a section). First, it is recommended that you keep pages that are related in a directory together... For example, in these docs, we keep all of the written documentation in the `./docs` directory and each of the sections in subdirectories like `./docs/ui-components` and `./docs/utilities`. This gives us an organization like: ``` +-- .. @@ -88,9 +88,9 @@ Sometimes you will want to create a page with many children (a section). First, +-- .. ``` -On the parent pages, add 2 YAML front matter variables: -- `has_children: true` (tells us that this a parent page) -- `permalink:` set this to the site directories that the contains the pages +On the parent pages, add 2 YAML front matter parameters: +- `has_children: true` (tells us that this is a parent page) +- `permalink:` set this to the site directory that contains the child pages #### Example {: .no_toc } @@ -105,7 +105,7 @@ permalink: /docs/ui-components --- ``` -Here we're setting up the UI Components landing page that is available at `/docs/ui-components`, it has children and is ordered second in the main nav. +Here we're setting up the UI Components landing page that is available at `/docs/ui-components`, which has children and is ordered second in the main nav. ### Child pages {: .text-gamma } @@ -124,9 +124,11 @@ nav_order: 2 --- ``` +The Buttons page appears as a child of UI Components and appears second in the UI Components section. + ### Auto-generating Table of Contents -By default, all pages with children will automatically append a Table of Contents which lists the child pages after the parent page's content. To disable this auto Table of Contents, set `has_toc: false` on the parent page's YAML front matter. +By default, all pages with children will automatically append a Table of Contents which lists the child pages after the parent page's content. To disable this auto Table of Contents, set `has_toc: false` in the parent page's YAML front matter. #### Example {: .no_toc } @@ -142,8 +144,6 @@ permalink: /docs/ui-components --- ``` -The Buttons page appears a child of UI Components and appears second in the UI Components section. - ### Children with children {: .text-gamma } @@ -175,7 +175,7 @@ nav_order: 1 --- ``` -Would create the following navigation structure: +This would create the following navigation structure: ``` +-- .. @@ -211,7 +211,7 @@ aux_links: ## In-page navigation with Table of Contents -To generate a Table of Contents on your docs pages, you can use the `{:toc}` method from Kramdown, immediately after an `
    ` in markdown. This will automatically generate an ordered list of anchor links to various sections of page based on headings and heading levels. There may be occasions where you're using a heading and you don't want it to show up in the TOC, to skip a particular heading use the `{: .no_toc }` CSS class. +To generate a Table of Contents on your docs pages, you can use the `{:toc}` method from Kramdown, immediately after an `
      ` in Markdown. This will automatically generate an ordered list of anchor links to various sections of the page based on headings and heading levels. There may be occasions where you're using a heading and you don't want it to show up in the TOC, so to skip a particular heading use the `{: .no_toc }` CSS class. #### Example {: .no_toc } diff --git a/docs/search.md b/docs/search.md index 7827eff..24afcd1 100644 --- a/docs/search.md +++ b/docs/search.md @@ -15,7 +15,7 @@ nav_order: 7 --- -Just the docs uses [lunr.js](http://lunrjs.com) to add a client-side search interface powered by a JSON index that Jekyll generates. All search results are shown in an auto-complete style interface (there is no search results page). By default, all generated html pages are indexed using the following data points: +Just the Docs uses [lunr.js](http://lunrjs.com) to add a client-side search interface powered by a JSON index that Jekyll generates. All search results are shown in an auto-complete style interface (there is no search results page). By default, all generated HTML pages are indexed using the following data points: - Page title - Page content @@ -52,7 +52,7 @@ _Note: If you don't run this rake command or create this file manually, search w ### Enable search in configuration -In your site's `_config.yml` enable search: +In your site's `_config.yml`, enable search: ```yml # Enable or disable the site search @@ -61,7 +61,7 @@ search_enabled: true ## Hiding pages from search -Sometimes you might have a page that you don't want indexed in the search and you don't want it to show up in search results, e.g, a 404 page. To exclude a page from search, add the `search_exclude: true` parameter to the page's YAML front matter: +Sometimes you might have a page that you don't want to be indexed for the search nor to show up in search results, e.g, a 404 page. To exclude a page from search, add the `search_exclude: true` parameter to the page's YAML front matter: #### Example {: .no_toc } diff --git a/docs/ui-components/buttons.md b/docs/ui-components/buttons.md index 1b43174..320e5ce 100644 --- a/docs/ui-components/buttons.md +++ b/docs/ui-components/buttons.md @@ -41,7 +41,7 @@ nav_order: 2 ### Button element -GitHub flavored markdown does not support the `button` element, so you'll have to use inline HTML for this: +GitHub Flavored Markdown does not support the `button` element, so you'll have to use inline HTML for this:
      diff --git a/docs/ui-components/code.md b/docs/ui-components/code.md index bac5e2f..74fbdf9 100644 --- a/docs/ui-components/code.md +++ b/docs/ui-components/code.md @@ -18,7 +18,7 @@ nav_order: 6 ## Inline code -Code can be rendered inline using single ticks by wrapping your code in single back ticks. +Code can be rendered inline by wrapping it in single back ticks.
      Lorem ipsum dolor sit amet, `` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. @@ -31,7 +31,7 @@ Lorem ipsum dolor sit amet, `` adipisicing elit, sed do eiu ## Syntax highlighted code blocks -Use Jekyll's built in syntax highlighting with Rouge for code blocks by using three backticks, followed by the language name: +Use Jekyll's built-in syntax highlighting with Rouge for code blocks by using three backticks, followed by the language name:
      ```js @@ -56,7 +56,7 @@ var fun = function lang(l) { ## Code blocks with rendered examples -To demonstrate front end code, sometimes it useful to show a rendered example of that code. After including the styles from your project that you'll need to show the rendering, you can use a div with the `code-example` class, followed by the code block syntax. If you want to render your output with Markdown instead of HTML, use the `markdown="1"` attribute to tell Jekyll that the code you are rendering will be in Markdown format... This is about to get meta... +To demonstrate front end code, sometimes it's useful to show a rendered example of that code. After including the styles from your project that you'll need to show the rendering, you can use a `
      ` with the `code-example` class, followed by the code block syntax. If you want to render your output with Markdown instead of HTML, use the `markdown="1"` attribute to tell Jekyll that the code you are rendering will be in Markdown format... This is about to get meta...
      diff --git a/docs/ui-components/lists.md b/docs/ui-components/lists.md index 630e8ad..12492c8 100644 --- a/docs/ui-components/lists.md +++ b/docs/ui-components/lists.md @@ -16,7 +16,7 @@ nav_order: 5 --- -Most lists can be rendered with pure markdown... +Most lists can be rendered with pure Markdown. ## Unordered list @@ -71,7 +71,7 @@ _or_ ## Definition list -Definition lists require HTML syntax and aren't supported with the GitHub flavored markdown compiler. +Definition lists require HTML syntax and aren't supported with the GitHub Flavored Markdown compiler.
      diff --git a/docs/ui-components/typography.md b/docs/ui-components/typography.md index b35a1a3..2838a79 100644 --- a/docs/ui-components/typography.md +++ b/docs/ui-components/typography.md @@ -28,7 +28,7 @@ ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz {: .fs-5 .ls-10 .code-example } -For monospace type, like code snippets or the pre `
      ` element, Just the Docs uses a native system font stack for monospace fonts:
      +For monospace type, like code snippets or the `
      ` element, Just the Docs uses a native system font stack for monospace fonts:
       
       ```scss
       "SFMono-Regular", Menlo, Consolas, Monospace
      @@ -42,7 +42,7 @@ abcdefghijklmnopqrstuvwxyz
       
       ## Responsive type scale
       
      -Just the docs uses a responsive type scale that shifts depending on the viewport size. Common elements text elements rendered from markdown use a
      +Just the Docs uses a responsive type scale that shifts depending on the viewport size.
       
       | Selector              | Small screen size `font-size`    | Large screen size `font-size` |
       |:----------------------|:---------------------------------|:------------------------------|
      @@ -109,6 +109,6 @@ Text can be **bold**, _italic_, or ~~strikethrough~~.
       
       ## Typographic Utilities
       
      -There are a number of specific typographic CSS classes that allow you to do override default styling for font size, font-weight, line height, and capitalization.
      +There are a number of specific typographic CSS classes that allow you to override default styling for font size, font weight, line height, and capitalization.
       
       [View typography utilities]({{ site.baseurl }}{% link docs/utilities/utilities.md %}#typography){: .btn .btn-outline }
      diff --git a/docs/utilities/color.md b/docs/utilities/color.md
      index 79b3529..7b2aa65 100644
      --- a/docs/utilities/color.md
      +++ b/docs/utilities/color.md
      @@ -16,7 +16,7 @@ parent: Utilities
       
       ---
       
      -All the colors used in Just the Docs have been systemsized into a series of variables that have been extended to both font color and background color utility classes.
      +All the colors used in Just the Docs have been systematized into a series of variables that have been extended to both font color and background color utility classes.
       
       ## Light Greys
       
      diff --git a/docs/utilities/layout.md b/docs/utilities/layout.md
      index ac03f7e..92d1234 100644
      --- a/docs/utilities/layout.md
      +++ b/docs/utilities/layout.md
      @@ -57,9 +57,9 @@ Spacing values are based on a `1rem = 16px` spacing scale, broken down into thes
       #### Examples
       {: .no_toc }
       
      -```markdown
       In Markdown, use the `{: }` wrapper to apply custom classes:
       
      +```markdown
       This paragraph will have a margin bottom of 1rem/16px at large screens.
       {: .mb-lg-4 }
       
      @@ -95,9 +95,9 @@ Use these classes in conjunction with the responsive modifiers.
       #### Examples
       {: .no_toc }
       
      -```markdown
       In Markdown, use the `{: }` wrapper to apply custom classes:
       
      +```markdown
       This button will be hidden until medium screen sizes:
       
       [ A button ](#url)
      diff --git a/docs/utilities/utilities.md b/docs/utilities/utilities.md
      index a0d2541..fe4f780 100644
      --- a/docs/utilities/utilities.md
      +++ b/docs/utilities/utilities.md
      @@ -9,5 +9,5 @@ permalink: docs/utilities
       # Utilities
       {: .no_toc }
       
      -CSS utility classes come in handy when you to want to override default styles to give create additional whitespace (margins/padding), unexpected shifts in font-size or weight, add color, or to hide (or show) something a specific screen size.
      +CSS utility classes come in handy when you to want to override default styles to create additional whitespace (margins/padding), correct unexpected shifts in font size or weight, add color, or hide (or show) something at a specific screen size.
       {: .fs-6 .fw-300 }
      diff --git a/index.md b/index.md
      index 67635b0..1576d6e 100644
      --- a/index.md
      +++ b/index.md
      @@ -2,14 +2,14 @@
       layout: default
       title: Home
       nav_order: 1
      -description: "Just the Docs is a responsive Jekyll theme with built-in search that is easily customizable and hosted on GitHub pages."
      +description: "Just the Docs is a responsive Jekyll theme with built-in search that is easily customizable and hosted on GitHub Pages."
       permalink: /
       ---
       
       # Focus on writing good documentation
       {: .fs-9 }
       
      -Just the Docs gives your documentation a jumpstart with a responsive Jekyll theme that is easily customizable and hosted on GitHub pages.
      +Just the Docs gives your documentation a jumpstart with a responsive Jekyll theme that is easily customizable and hosted on GitHub Pages.
       {: .fs-6 .fw-300 }
       
       [Get started now](#getting-started){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 } [View it on GitHub](https://github.com/pmarsceill/just-the-docs){: .btn .fs-5 .mb-4 .mb-md-0 }
      @@ -19,8 +19,8 @@ Just the Docs gives your documentation a jumpstart with a responsive Jekyll them
       ## Getting started
       
       ### Dependencies
      -Just the Docs is built for [Jekyll](https://jekyllrb.com), a static site generator. View the [quick start guide](https://jekyllrb.com/docs/quickstart/) for more information. Just the Docs requires no special Jekyll plugins and can run on GitHub Pages standard Jekyll compiler.
       
      +Just the Docs is built for [Jekyll](https://jekyllrb.com), a static site generator. View the [quick start guide](https://jekyllrb.com/docs/quickstart/) for more information. Just the Docs requires no special Jekyll plugins and can run on GitHub Pages' standard Jekyll compiler.
       
       ### Quick start: Use as a GitHub Pages remote theme
       
      @@ -28,7 +28,7 @@ Just the Docs is built for [Jekyll](https://jekyllrb.com), a static site generat
       ```yaml
       remote_theme: pmarsceill/just-the-docs
       ```
      -You must have GitHub pages enabled on your repo, one or more markdown files, and a `_config.yml` file. [See an example repository](https://github.com/pmarsceill/jtd-remote)
      +You must have GitHub Pages enabled on your repo, one or more Markdown files, and a `_config.yml` file. [See an example repository](https://github.com/pmarsceill/jtd-remote)
       
       ### Local installation: Use the gem-based theme
       
      
      From 2218e6e56582427a28dcf9dc21f44cd429a3796e Mon Sep 17 00:00:00 2001
      From: EricFromCanada 
      Date: Mon, 14 Jan 2019 14:39:40 -0500
      Subject: [PATCH 3/3] Fix links and syntax
      
      For pages in utilities/, reorder `nav_order` to follow `parent`.
      ---
       README.md                              | 4 ++--
       docs/customization.md                  | 8 ++++----
       docs/ui-components/buttons.md          | 2 +-
       docs/utilities/color.md                | 2 +-
       docs/utilities/layout.md               | 3 +--
       docs/utilities/responsive-modifiers.md | 2 +-
       docs/utilities/typography.md           | 2 +-
       index.md                               | 2 +-
       8 files changed, 12 insertions(+), 13 deletions(-)
      
      diff --git a/README.md b/README.md
      index 1a372fc..c78280a 100644
      --- a/README.md
      +++ b/README.md
      @@ -4,8 +4,8 @@
       

      Just the Docs

      -

      A modern, high customizable, responsive Jekyll theme for documentation with built-in search.
      Easily hosted on GitHub pages with few dependencies.

      -

      See it in action!

      +

      A modern, high customizable, responsive Jekyll theme for documentation with built-in search.
      Easily hosted on GitHub Pages with few dependencies.

      +

      See it in action!




      diff --git a/docs/customization.md b/docs/customization.md index 0ed6c2e..74c153c 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -16,17 +16,17 @@ nav_order: 6 --- ## Color schemes -{: .d-inline-block :} +{: .d-inline-block } New -{: .label .label-green :} +{: .label .label-green } Just the Docs supports two color schemes: light (default), and dark. To enable a color scheme, set the `color_scheme` parameter in your site's `_config.yml` file: #### Example -{: no_toc } +{: .no_toc } ```yml # Color scheme currently only supports "dark" or nil (default) @@ -56,7 +56,7 @@ To customize your site’s aesthetic, open `_sass/custom/custom.scss` in your ed For example, to change the link color from the purple default to blue, open `_sass/custom/custom.css` and find the `$link-color` variable on line `50`. Uncomment it, and change its value to our `$blue-000` variable, or another shade of your choosing. #### Example -{: no_toc } +{: .no_toc } ```scss // ... diff --git a/docs/ui-components/buttons.md b/docs/ui-components/buttons.md index 320e5ce..3297f29 100644 --- a/docs/ui-components/buttons.md +++ b/docs/ui-components/buttons.md @@ -79,7 +79,7 @@ Wrap the button in a container that uses the [font-size utility classes]({{ site ### Spacing between buttons -Use the [margin utility classes]({{ site.baseurl }}{% link docs/utilities/utilities.md %}#spacing) to add spacing between two buttons in the same block. +Use the [margin utility classes]({{ site.baseurl }}{% link docs/utilities/layout.md %}#spacing) to add spacing between two buttons in the same block.
      [Button with space](http://example.com/){: .btn .btn-purple .mr-2 } diff --git a/docs/utilities/color.md b/docs/utilities/color.md index 7b2aa65..ba90b3b 100644 --- a/docs/utilities/color.md +++ b/docs/utilities/color.md @@ -1,8 +1,8 @@ --- layout: default title: Color -nav_order: 3 parent: Utilities +nav_order: 3 --- # Color Utilities diff --git a/docs/utilities/layout.md b/docs/utilities/layout.md index 92d1234..ff248b3 100644 --- a/docs/utilities/layout.md +++ b/docs/utilities/layout.md @@ -1,9 +1,8 @@ --- layout: default title: Layout -nav_order: 2 parent: Utilities -has_children: true +nav_order: 2 --- # Layout Utilities diff --git a/docs/utilities/responsive-modifiers.md b/docs/utilities/responsive-modifiers.md index 235a1a8..bc5e2cb 100644 --- a/docs/utilities/responsive-modifiers.md +++ b/docs/utilities/responsive-modifiers.md @@ -1,8 +1,8 @@ --- layout: default title: Responsive Modifiers -nav_order: 1 parent: Utilities +nav_order: 1 --- # Responsive modifiers diff --git a/docs/utilities/typography.md b/docs/utilities/typography.md index 7d7a86d..786b65a 100644 --- a/docs/utilities/typography.md +++ b/docs/utilities/typography.md @@ -1,8 +1,8 @@ --- layout: default title: Typography -nav_order: 3 parent: Utilities +nav_order: 4 --- # Typography Utilities diff --git a/index.md b/index.md index 1576d6e..aef0e2d 100644 --- a/index.md +++ b/index.md @@ -20,7 +20,7 @@ Just the Docs gives your documentation a jumpstart with a responsive Jekyll them ### Dependencies -Just the Docs is built for [Jekyll](https://jekyllrb.com), a static site generator. View the [quick start guide](https://jekyllrb.com/docs/quickstart/) for more information. Just the Docs requires no special Jekyll plugins and can run on GitHub Pages' standard Jekyll compiler. +Just the Docs is built for [Jekyll](https://jekyllrb.com), a static site generator. View the [quick start guide](https://jekyllrb.com/docs/) for more information. Just the Docs requires no special Jekyll plugins and can run on GitHub Pages' standard Jekyll compiler. ### Quick start: Use as a GitHub Pages remote theme