Make spacing consistent

This commit is contained in:
EricFromCanada 2019-01-14 14:18:09 -05:00
parent b3fb5ebd87
commit ff49d02f83
16 changed files with 65 additions and 78 deletions

View File

@ -9,7 +9,6 @@
<br><br><br> <br><br><br>
</p> </p>
![jtd](https://user-images.githubusercontent.com/896475/47384541-89053c80-d6d5-11e8-98dc-dba16e192de9.gif) ![jtd](https://user-images.githubusercontent.com/896475/47384541-89053c80-d6d5-11e8-98dc-dba16e192de9.gif)
## Installation ## 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`. 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. When the theme is released, only the files in `_layouts`, `_includes`, and `_sass` tracked with Git will be released.

View File

@ -1,7 +1,7 @@
#!/usr/bin/env ruby #!/usr/bin/env ruby
gem_dir = File.expand_path("..",File.dirname(__FILE__)) 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] exec_type = ARGV[0]
if exec_type == 'rake' then if exec_type == 'rake' then

View File

@ -39,12 +39,12 @@ const originalCssRef = cssFile.getAttribute('href')
const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css') const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css')
addEvent(toggleDarkMode, 'click', function(){ addEvent(toggleDarkMode, 'click', function(){
if (cssFile.getAttribute('href') === originalCssRef) { if (cssFile.getAttribute('href') === originalCssRef) {
cssFile.setAttribute('href', darkModeCssRef) cssFile.setAttribute('href', darkModeCssRef)
} else { } else {
cssFile.setAttribute('href', originalCssRef) cssFile.setAttribute('href', originalCssRef)
} }
}) })
</script> </script>
See [Customization]({{site.baseurl }}{% link docs/customization.md %}) for more information. See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information.

View File

@ -5,7 +5,7 @@ nav_order: 6
--- ---
# Customization # Customization
{:.no_toc} {: .no_toc }
## Table of contents ## Table of contents
{: .no_toc .text-delta } {: .no_toc .text-delta }
@ -49,7 +49,6 @@ addEvent(toggleDarkMode, 'click', function(){
}) })
</script> </script>
## Specific visual customization ## Specific visual customization
To customize your sites 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 its line and change its value. To customize your sites 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 its line and change its 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.
--- ---

View File

@ -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
@ -142,7 +147,7 @@ The Buttons page appears a child of UI Components and appears second in the UI C
### Children with children ### Children with children
{: .text-gamma } {: .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 `has_children` attribute to the child
1. Add the `parent` and `grand_parent` attribute to the grandchild 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 ```yml
# Aux links for the upper right navigation # Aux links for the upper right navigation
aux_links: aux_links:
"Just the Docs on GitHub": "Just the Docs on GitHub":
- "//github.com/pmarsceill/just-the-docs" - "//github.com/pmarsceill/just-the-docs"
``` ```

View File

@ -5,7 +5,7 @@ nav_order: 7
--- ---
# Search # Search
{:.no_toc} {: .no_toc }
## Table of contents ## Table of contents
{: .no_toc .text-delta } {: .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 ### 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

View File

@ -6,7 +6,7 @@ nav_order: 2
--- ---
# Buttons # Buttons
{:.no_toc} {: .no_toc }
## Table of contents ## Table of contents
{: .no_toc .text-delta } {: .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-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,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. 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 ](http://example.com/){: .btn .btn-blue .mr-2 }
[Button with space](http://example.com/){: .btn .btn-purple .mr-2} [Button with more space](http://example.com/){: .btn .btn-green .mr-4 }
[Button ](http://example.com/){: .btn .btn-blue .mr-2}
[Button with more space](http://example.com/){: .btn .btn-green .mr-4}
[Button ](http://example.com/){: .btn .btn-blue } [Button ](http://example.com/){: .btn .btn-blue }
</div> </div>
```markdown ```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 ](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 } [Button ](http://example.com/){: .btn .btn-blue }
``` ```

View File

@ -6,7 +6,7 @@ nav_order: 6
--- ---
# Code # Code
{:.no_toc} {: .no_toc }
## Table of contents ## Table of contents
{: .no_toc .text-delta } {: .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. 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.

View File

@ -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. 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 }
Blue label Blue label
{: .label .label-blue} {: .label .label-blue }
Stable Stable
{: .label .label-green} {: .label .label-green }
New release New release
{: .label .label-purple} {: .label .label-purple }
Coming soon Coming soon
{: .label .label-yellow} {: .label .label-yellow }
Deprecated Deprecated
{: .label .label-red} {: .label .label-red }
</div> </div>
```markdown ```markdown
Default label Default label
{: .label } {: .label }
Blue label Blue label
{: .label .label-blue} {: .label .label-blue }
Stable Stable
{: .label .label-green} {: .label .label-green }
New release New release
{: .label .label-purple} {: .label .label-purple }
Coming soon Coming soon
{: .label .label-yellow} {: .label .label-yellow }
Deprecated Deprecated
{: .label .label-red} {: .label .label-red }
``` ```

View File

@ -6,7 +6,7 @@ nav_order: 5
--- ---
# Lists # Lists
{:.no_toc} {: .no_toc }
## Table of contents ## Table of contents
{: .no_toc .text-delta } {: .no_toc .text-delta }
@ -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,18 +43,19 @@ _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
1. Item 3 1. Item 3
</div> </div>
```markdown ```markdown
1. Item 1 1. Item 1
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">
@ -61,11 +63,11 @@ _or_
- [ ] hello, this is another todo item - [ ] hello, this is another todo item
- [x] goodbye, this item is done - [x] goodbye, this item is done
</div> </div>
```markdown ```markdown
- [ ] hello, this is a todo item - [ ] hello, this is a todo item
- [ ] hello, this is another todo item - [ ] hello, this is another todo item
- [x] goodbye, this item is done - [x] goodbye, this item is done
``` ```
## Definition list ## Definition list
@ -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>
``` ```

View File

@ -6,7 +6,7 @@ nav_order: 1
--- ---
# Typography # Typography
{:.no_toc} {: .no_toc }
## Table of contents ## Table of contents
{: .no_toc .text-delta } {: .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 -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif
``` ```
ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
{: .fs-5 .ls-10 .code-example } {: .fs-5 .ls-10 .code-example }
@ -34,7 +34,7 @@ For monospace type, like code snippets or the pre `<pre>` element, Just the Docs
"SFMono-Regular", Menlo, Consolas, Monospace "SFMono-Regular", Menlo, Consolas, Monospace
``` ```
ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
{: .fs-5 .ls-10 .text-mono .code-example } {: .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 | | `h3`, `.text-gamma` | 16px | 18px |
| `h4`, `.text-delta` | 14px | 16px | | `h4`, `.text-delta` | 14px | 16px |
| `h5`, `.text-epsilon` | 16px | 18px | | `h5`, `.text-epsilon` | 16px | 18px |
| `h6`, `.text-zeta ` | 18px | 24px | | `h6`, `.text-zeta` | 18px | 24px |
| `body` | 14px | 16px | | `body` | 14px | 16px |
--- ---

View File

@ -6,7 +6,7 @@ parent: Utilities
--- ---
# Color Utilities # Color Utilities
{:.no_toc} {: .no_toc }
## Table of contents ## Table of contents
{: .no_toc .text-delta } {: .no_toc .text-delta }

View File

@ -7,7 +7,7 @@ has_children: true
--- ---
# Layout Utilities # Layout Utilities
{:.no_toc} {: .no_toc }
## Table of contents ## Table of contents
{: .no_toc .text-delta } {: .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. 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 }
``` ```

View File

@ -6,7 +6,7 @@ parent: Utilities
--- ---
# Typography Utilities # Typography Utilities
{:.no_toc} {: .no_toc }
## Table of contents ## Table of contents
{: .no_toc .text-delta } {: .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-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
{: .lh-0 } {: .lh-0 }
Tight line height Tight line height
Tight line height Tight line height
{: .lh-tight } {: .lh-tight }
Default line height Default line height
Default line height Default line height
{: .fh-default } {: .fh-default }
</div> </div>
```markdown ```markdown
In Markdown, use the `{: }` wrapper to apply custom classes: In Markdown, use the `{: }` wrapper to apply custom classes:
No Line height No Line height
No Line height No Line height
{: .lh-0 } {: .lh-0 }
Tight line height Tight line height
Tight line height Tight line height
{: .lh-tight } {: .lh-tight }
Default line height Default line height
Default line height Default line height
{: .fh-default } {: .fh-default }
``` ```

View File

@ -7,7 +7,7 @@ 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 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 } {: .fs-6 .fw-300 }

View File

@ -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.