mirror of
https://github.com/thangisme/notes.git
synced 2024-11-19 21:56:00 -05:00
Fix grammar and capitalization
This commit is contained in:
parent
ff49d02f83
commit
ae5bcfe361
@ -10,7 +10,7 @@
|
|||||||
@import "./vendor/normalize.scss/normalize.scss";
|
@import "./vendor/normalize.scss/normalize.scss";
|
||||||
|
|
||||||
//
|
//
|
||||||
// Import Just the docs scss
|
// Import Just the Docs scss
|
||||||
//
|
//
|
||||||
|
|
||||||
// Support
|
// Support
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
@import "./vendor/normalize.scss/normalize.scss";
|
@import "./vendor/normalize.scss/normalize.scss";
|
||||||
|
|
||||||
//
|
//
|
||||||
// Import Just the docs scss
|
// Import Just the Docs scss
|
||||||
//
|
//
|
||||||
|
|
||||||
// Support
|
// Support
|
||||||
|
@ -51,9 +51,9 @@ addEvent(toggleDarkMode, 'click', function(){
|
|||||||
|
|
||||||
## Specific visual customization
|
## 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
|
#### Example
|
||||||
{: no_toc }
|
{: no_toc }
|
||||||
|
@ -25,7 +25,7 @@ By default, all pages will appear as top level pages in the main nav unless a pa
|
|||||||
|
|
||||||
## Ordering pages
|
## 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
|
#### Example
|
||||||
{: .no_toc }
|
{: .no_toc }
|
||||||
@ -42,7 +42,7 @@ nav_order: 4
|
|||||||
|
|
||||||
## Excluding pages
|
## 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
|
#### Example
|
||||||
{: .no_toc }
|
{: .no_toc }
|
||||||
@ -59,7 +59,7 @@ nav_exclude: true
|
|||||||
|
|
||||||
## Pages with children
|
## 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:
|
On the parent pages, add 2 YAML front matter parameters:
|
||||||
- `has_children: true` (tells us that this a parent page)
|
- `has_children: true` (tells us that this is a parent page)
|
||||||
- `permalink:` set this to the site directories that the contains the pages
|
- `permalink:` set this to the site directory that contains the child pages
|
||||||
|
|
||||||
#### Example
|
#### Example
|
||||||
{: .no_toc }
|
{: .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
|
### Child pages
|
||||||
{: .text-gamma }
|
{: .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
|
### 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
|
#### Example
|
||||||
{: .no_toc }
|
{: .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
|
### Children with children
|
||||||
{: .text-gamma }
|
{: .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
|
## 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 `<ol>` 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 `<ol>` 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
|
#### Example
|
||||||
{: .no_toc }
|
{: .no_toc }
|
||||||
|
@ -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 title
|
||||||
- Page content
|
- 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
|
### Enable search in configuration
|
||||||
|
|
||||||
In your site's `_config.yml` enable search:
|
In your site's `_config.yml`, enable search:
|
||||||
|
|
||||||
```yml
|
```yml
|
||||||
# Enable or disable the site search
|
# Enable or disable the site search
|
||||||
@ -61,7 +61,7 @@ search_enabled: true
|
|||||||
|
|
||||||
## Hiding pages from search
|
## 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
|
#### Example
|
||||||
{: .no_toc }
|
{: .no_toc }
|
||||||
|
@ -41,7 +41,7 @@ nav_order: 2
|
|||||||
|
|
||||||
### Button element
|
### 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:
|
||||||
|
|
||||||
<div class="code-example">
|
<div class="code-example">
|
||||||
<button type="button" name="button" class="btn">Button element</button>
|
<button type="button" name="button" class="btn">Button element</button>
|
||||||
|
@ -18,7 +18,7 @@ nav_order: 6
|
|||||||
|
|
||||||
## Inline code
|
## 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.
|
||||||
|
|
||||||
<div class="code-example" markdown="1">
|
<div class="code-example" markdown="1">
|
||||||
Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
@ -31,7 +31,7 @@ Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiu
|
|||||||
|
|
||||||
## Syntax highlighted code blocks
|
## 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:
|
||||||
|
|
||||||
<div class="code-example" markdown="1">
|
<div class="code-example" markdown="1">
|
||||||
```js
|
```js
|
||||||
@ -56,7 +56,7 @@ var fun = function lang(l) {
|
|||||||
|
|
||||||
## Code blocks with rendered examples
|
## 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 `<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...
|
||||||
|
|
||||||
<div class="code-example" markdown="1">
|
<div class="code-example" markdown="1">
|
||||||
|
|
||||||
|
@ -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
|
## Unordered list
|
||||||
|
|
||||||
@ -71,7 +71,7 @@ _or_
|
|||||||
|
|
||||||
## Definition list
|
## 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.
|
||||||
|
|
||||||
<div class="code-example" markdown="1">
|
<div class="code-example" markdown="1">
|
||||||
<dl>
|
<dl>
|
||||||
|
@ -28,7 +28,7 @@ ABCDEFGHIJKLMNOPQRSTUVWXYZ
|
|||||||
abcdefghijklmnopqrstuvwxyz
|
abcdefghijklmnopqrstuvwxyz
|
||||||
{: .fs-5 .ls-10 .code-example }
|
{: .fs-5 .ls-10 .code-example }
|
||||||
|
|
||||||
For monospace type, like code snippets or the pre `<pre>` element, Just the Docs uses a native system font stack for monospace fonts:
|
For monospace type, like code snippets or the `<pre>` element, Just the Docs uses a native system font stack for monospace fonts:
|
||||||
|
|
||||||
```scss
|
```scss
|
||||||
"SFMono-Regular", Menlo, Consolas, Monospace
|
"SFMono-Regular", Menlo, Consolas, Monospace
|
||||||
@ -42,7 +42,7 @@ abcdefghijklmnopqrstuvwxyz
|
|||||||
|
|
||||||
## Responsive type scale
|
## 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` |
|
| Selector | Small screen size `font-size` | Large screen size `font-size` |
|
||||||
|:----------------------|:---------------------------------|:------------------------------|
|
|:----------------------|:---------------------------------|:------------------------------|
|
||||||
@ -109,6 +109,6 @@ Text can be **bold**, _italic_, or ~~strikethrough~~.
|
|||||||
|
|
||||||
## Typographic Utilities
|
## 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 }
|
[View typography utilities]({{ site.baseurl }}{% link docs/utilities/utilities.md %}#typography){: .btn .btn-outline }
|
||||||
|
@ -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
|
## Light Greys
|
||||||
|
|
||||||
|
@ -57,9 +57,9 @@ Spacing values are based on a `1rem = 16px` spacing scale, broken down into thes
|
|||||||
#### Examples
|
#### Examples
|
||||||
{: .no_toc }
|
{: .no_toc }
|
||||||
|
|
||||||
```markdown
|
|
||||||
In Markdown, use the `{: }` wrapper to apply custom classes:
|
In Markdown, use the `{: }` wrapper to apply custom classes:
|
||||||
|
|
||||||
|
```markdown
|
||||||
This paragraph will have a margin bottom of 1rem/16px at large screens.
|
This paragraph will have a margin bottom of 1rem/16px at large screens.
|
||||||
{: .mb-lg-4 }
|
{: .mb-lg-4 }
|
||||||
|
|
||||||
@ -95,9 +95,9 @@ Use these classes in conjunction with the responsive modifiers.
|
|||||||
#### Examples
|
#### Examples
|
||||||
{: .no_toc }
|
{: .no_toc }
|
||||||
|
|
||||||
```markdown
|
|
||||||
In Markdown, use the `{: }` wrapper to apply custom classes:
|
In Markdown, use the `{: }` wrapper to apply custom classes:
|
||||||
|
|
||||||
|
```markdown
|
||||||
This button will be hidden until medium screen sizes:
|
This button will be hidden until medium screen sizes:
|
||||||
|
|
||||||
[ A button ](#url)
|
[ A button ](#url)
|
||||||
|
@ -9,5 +9,5 @@ permalink: docs/utilities
|
|||||||
# 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.
|
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 }
|
{: .fs-6 .fw-300 }
|
||||||
|
8
index.md
8
index.md
@ -2,14 +2,14 @@
|
|||||||
layout: default
|
layout: default
|
||||||
title: Home
|
title: Home
|
||||||
nav_order: 1
|
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: /
|
permalink: /
|
||||||
---
|
---
|
||||||
|
|
||||||
# Focus on writing good documentation
|
# Focus on writing good documentation
|
||||||
{: .fs-9 }
|
{: .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 }
|
{: .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 }
|
[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
|
## Getting started
|
||||||
|
|
||||||
### Dependencies
|
### 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
|
### 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
|
```yaml
|
||||||
remote_theme: pmarsceill/just-the-docs
|
remote_theme: pmarsceill/just-the-docs
|
||||||
```
|
```
|
||||||
<small>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)</small>
|
<small>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)</small>
|
||||||
|
|
||||||
### Local installation: Use the gem-based theme
|
### Local installation: Use the gem-based theme
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user