mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-04-10 14:01:22 -06:00
Make spacing consistent
This commit is contained in:
parent
b3fb5ebd87
commit
ff49d02f83
@ -9,7 +9,6 @@
|
|||||||
<br><br><br>
|
<br><br><br>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
@ -49,7 +49,6 @@ addEvent(toggleDarkMode, 'click', function(){
|
|||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
## 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 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.
|
_Note:_ Editing the variables directly in `_sass/support/variables.scss` is not recommended and can cause other dependancies to fail.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -29,6 +29,7 @@ To specify a page order, use the `nav_order` variable in your pages' YAML front
|
|||||||
|
|
||||||
#### Example
|
#### Example
|
||||||
{: .no_toc }
|
{: .no_toc }
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
---
|
---
|
||||||
layout: default
|
layout: default
|
||||||
@ -45,6 +46,7 @@ For specific pages that you do not wish to include in the main navigation, e.g.
|
|||||||
|
|
||||||
#### Example
|
#### Example
|
||||||
{: .no_toc }
|
{: .no_toc }
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
---
|
---
|
||||||
layout: default
|
layout: default
|
||||||
@ -92,6 +94,7 @@ On the parent pages, add 2 YAML front matter variables:
|
|||||||
|
|
||||||
#### Example
|
#### Example
|
||||||
{: .no_toc }
|
{: .no_toc }
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
---
|
---
|
||||||
layout: default
|
layout: default
|
||||||
@ -111,6 +114,7 @@ On child pages, simply set the `parent:` YAML front matter to whatever the paren
|
|||||||
|
|
||||||
#### Example
|
#### Example
|
||||||
{: .no_toc }
|
{: .no_toc }
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
---
|
---
|
||||||
layout: default
|
layout: default
|
||||||
@ -126,6 +130,7 @@ By default, all pages with children will automatically append a Table of Content
|
|||||||
|
|
||||||
#### Example
|
#### Example
|
||||||
{: .no_toc }
|
{: .no_toc }
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
---
|
---
|
||||||
layout: default
|
layout: default
|
||||||
|
@ -25,16 +25,13 @@ Just the docs uses [lunr.js](http://lunrjs.com) to add a client-side search inte
|
|||||||
|
|
||||||
### Generate search index
|
### Generate search index
|
||||||
|
|
||||||
Before you can use search, you must initialize the feature by running this
|
Before you can use search, you must initialize the feature by running this `rake` command that comes with `just-the-docs`:
|
||||||
rake command that comes with the `just-the-docs`
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
$ bundle exec just-the-docs rake search:init
|
$ bundle exec just-the-docs rake search:init
|
||||||
```
|
```
|
||||||
|
|
||||||
This command creates the `search-data.json` file that Jekyll uses to create
|
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:
|
||||||
your search index. Alternatively, you can create the file manually in the
|
|
||||||
`assets/js/` of your Jekyll site with this content:
|
|
||||||
|
|
||||||
```{% raw %}
|
```{% raw %}
|
||||||
---
|
---
|
||||||
@ -68,6 +65,7 @@ Sometimes you might have a page that you don't want indexed in the search and yo
|
|||||||
|
|
||||||
#### Example
|
#### Example
|
||||||
{: .no_toc }
|
{: .no_toc }
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
---
|
---
|
||||||
layout: default
|
layout: default
|
||||||
|
@ -28,7 +28,6 @@ nav_order: 2
|
|||||||
[Link button](http://example.com/){: .btn .btn-green }
|
[Link button](http://example.com/){: .btn .btn-green }
|
||||||
|
|
||||||
[Link button](http://example.com/){: .btn .btn-outline }
|
[Link button](http://example.com/){: .btn .btn-outline }
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
```markdown
|
```markdown
|
||||||
[Link button](http://example.com/){: .btn }
|
[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:
|
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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
```html
|
```html
|
||||||
<button type="button" name="button" class="btn">Button element</button>
|
<button type="button" name="button" class="btn">Button element</button>
|
||||||
@ -60,11 +56,9 @@ GitHub flavored markdown does not support the `button` element, so you'll have t
|
|||||||
|
|
||||||
### Button size
|
### Button size
|
||||||
|
|
||||||
Wrap the button in container that uses the [font-size utility classes]({{
|
Wrap the button in a container that uses the [font-size utility classes]({{ site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons:
|
||||||
site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons:
|
|
||||||
|
|
||||||
<div class="code-example" markdown="1">
|
<div class="code-example" markdown="1">
|
||||||
|
|
||||||
<span class="fs-6">
|
<span class="fs-6">
|
||||||
[Big ass button](http://example.com/){: .btn }
|
[Big ass button](http://example.com/){: .btn }
|
||||||
</span>
|
</span>
|
||||||
@ -72,7 +66,6 @@ site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons:
|
|||||||
<span class="fs-3">
|
<span class="fs-3">
|
||||||
[Tiny ass button](http://example.com/){: .btn }
|
[Tiny ass button](http://example.com/){: .btn }
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
```markdown
|
```markdown
|
||||||
<span class="fs-8">
|
<span class="fs-8">
|
||||||
@ -89,7 +82,6 @@ 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.
|
Use the [margin utility classes]({{ site.baseurl }}{% link docs/utilities/utilities.md %}#spacing) to add spacing between two buttons in the same block.
|
||||||
|
|
||||||
<div class="code-example" markdown="1">
|
<div class="code-example" markdown="1">
|
||||||
|
|
||||||
[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 .mr-2 }
|
[Button ](http://example.com/){: .btn .btn-blue .mr-2 }
|
||||||
|
|
||||||
|
@ -21,9 +21,7 @@ nav_order: 6
|
|||||||
Code can be rendered inline using single ticks by wrapping your code in single back ticks.
|
Code can be rendered inline using single ticks by wrapping your code 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.
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
```markdown
|
```markdown
|
||||||
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.
|
||||||
|
@ -10,7 +10,6 @@ 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.
|
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.
|
||||||
|
|
||||||
<div class="code-example" markdown="1">
|
<div class="code-example" markdown="1">
|
||||||
|
|
||||||
Default label
|
Default label
|
||||||
{: .label }
|
{: .label }
|
||||||
|
|
||||||
@ -28,7 +27,6 @@ Coming soon
|
|||||||
|
|
||||||
Deprecated
|
Deprecated
|
||||||
{: .label .label-red }
|
{: .label .label-red }
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
```markdown
|
```markdown
|
||||||
Default label
|
Default label
|
||||||
|
@ -19,6 +19,7 @@ nav_order: 5
|
|||||||
Most lists can be rendered with pure markdown...
|
Most lists can be rendered with pure markdown...
|
||||||
|
|
||||||
## Unordered list
|
## Unordered list
|
||||||
|
|
||||||
<div class="code-example" markdown="1">
|
<div class="code-example" markdown="1">
|
||||||
- Item 1
|
- Item 1
|
||||||
- Item 2
|
- Item 2
|
||||||
@ -42,8 +43,8 @@ _or_
|
|||||||
* Item 3
|
* Item 3
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
## Ordered list
|
## Ordered list
|
||||||
|
|
||||||
<div class="code-example" markdown="1">
|
<div class="code-example" markdown="1">
|
||||||
1. Item 1
|
1. Item 1
|
||||||
1. Item 2
|
1. Item 2
|
||||||
@ -54,6 +55,7 @@ _or_
|
|||||||
1. Item 2
|
1. Item 2
|
||||||
1. Item 3
|
1. Item 3
|
||||||
```
|
```
|
||||||
|
|
||||||
## Task list
|
## Task list
|
||||||
|
|
||||||
<div class="code-example" markdown="1">
|
<div class="code-example" markdown="1">
|
||||||
@ -95,4 +97,3 @@ Definition lists require HTML syntax and aren't supported with the GitHub flavor
|
|||||||
<dd>Green</dd>
|
<dd>Green</dd>
|
||||||
</dl>
|
</dl>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -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.
|
This paragraph will have 2rem/32px of padding on the right and left at all screen sizes.
|
||||||
{: .px-6 }
|
{: .px-6 }
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Vertical Alignment
|
## Vertical Alignment
|
||||||
@ -111,5 +110,4 @@ These headings will be `inline-block`:
|
|||||||
|
|
||||||
### heading 3
|
### heading 3
|
||||||
{ .d-inline-block }
|
{ .d-inline-block }
|
||||||
|
|
||||||
```
|
```
|
||||||
|
@ -117,8 +117,6 @@ Use the `lh-` classes to explicitly apply line height to text.
|
|||||||
| `.lh-tight` | 1.1 | Default for headings |
|
| `.lh-tight` | 1.1 | Default for headings |
|
||||||
| `.lh-default` | 1.4 | Default for body (paragraphs) |
|
| `.lh-default` | 1.4 | Default for body (paragraphs) |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="code-example" markdown="1">
|
<div class="code-example" markdown="1">
|
||||||
No Line height
|
No Line height
|
||||||
No Line height
|
No Line height
|
||||||
|
8
index.md
8
index.md
@ -6,7 +6,6 @@ description: "Just the Docs is a responsive Jekyll theme with built-in search th
|
|||||||
permalink: /
|
permalink: /
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
# Focus on writing good documentation
|
# Focus on writing good documentation
|
||||||
{: .fs-9 }
|
{: .fs-9 }
|
||||||
|
|
||||||
@ -18,10 +17,13 @@ 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
|
||||||
|
|
||||||
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/)
|
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
|
```yaml
|
||||||
remote_theme: pmarsceill/just-the-docs
|
remote_theme: pmarsceill/just-the-docs
|
||||||
@ -29,6 +31,7 @@ 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
|
||||||
|
|
||||||
1. Install the Ruby Gem
|
1. Install the Ruby Gem
|
||||||
```bash
|
```bash
|
||||||
$ gem install just-the-docs
|
$ 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)
|
4. Point your web browser to [http://localhost:4000](http://localhost:4000)
|
||||||
|
|
||||||
### Configure Just the Docs
|
### 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,
|
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).
|
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
|
### Code of Conduct
|
||||||
|
|
||||||
Just the Docs is committed to fostering a welcoming community.
|
Just the Docs is committed to fostering a welcoming community.
|
||||||
|
Loading…
x
Reference in New Issue
Block a user