Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Document user custom element hooks #2815

Merged
merged 6 commits into from
Apr 13, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions docs/_docs/02-structure.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ last_modified_at: 2018-03-20T15:19:22-04:00

Nothing clever here :wink:. Layouts, data files, and includes are all placed in their default locations. Stylesheets and scripts in `assets`, and a few development related files in the project's root directory.

**Please note:** If you installed Minimal Mistakes via the Ruby Gem method, theme files like `_layouts`, `_includes`, `_sass`, and `/assets/` will be missing. This is normal as they are bundled with the [`minimal-mistakes-jekyll`](https://rubygems.org/gems/minimal-mistakes-jekyll) Ruby gem.
**Please note:** If you installed Minimal Mistakes via the Ruby Gem method, theme files like `_layouts`, `_includes`, `_sass`, and `/assets/` will be missing. This is normal as they are bundled with the [`minimal-mistakes-jekyll`](https://rubygems.org/gems/minimal-mistakes-jekyll) Ruby gem. If you would like to make changes, create the files and Jekyll will prefer your local copy.
{: .notice--info}

```bash
Expand All @@ -18,8 +18,10 @@ minimal-mistakes
├── _includes
| ├── analytics-providers # snippets for analytics (Google and custom)
| ├── comments-providers # snippets for comments
| ├── footer # custom snippets to add to site footer
| ├── head # custom snippets to add to site head
| ├── footer
| | └── custom.html # custom snippets to add to site footer
| ├── head
| | └── custom.html # custom snippets to add to site head
| ├── feature_row # feature row helper
| ├── gallery # image gallery helper
| ├── group-by-array # group by array helper for archives
Expand Down
54 changes: 50 additions & 4 deletions docs/_docs/10-layouts.md
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ Auto-generated table of contents list for your posts and pages can be enabled by
| **toc** | Optional | Show table of contents. (boolean) | `false` |
| **toc_label** | Optional | Table of contents title. (string) | `toc_label` in UI Text data file. |
| **toc_icon** | Optional | Table of contents icon, displays before the title. (string) | [Font Awesome](https://fontawesome.com/icons?d=gallery&s=solid&m=free) <i class="fas fa-file-alt"></i> **file-alt** icon. Other FA icons can be used instead. |
| **toc_sticky** | Optional | Stick table of contents to top of screen. | `false` |
| **toc_sticky** | Optional | Stick table of contents to top of screen. | `false` |

**TOC example with custom title and icon**

Expand Down Expand Up @@ -338,7 +338,7 @@ Then adjust the `paginate_path` in **_config.yml** to match.

```yaml
paginate_path: /blog/page:num
```
```

**Note:** Jekyll can only paginate a single `index.html` file. If you'd like to paginate more pages (e.g. category indexes) you'll need the help of a custom plugin. For more pagination related settings check the [**Configuration**]({{ "/docs/configuration/#paginate" | relative_url }}) section.
{: .notice--info}
Expand Down Expand Up @@ -602,7 +602,7 @@ For example, to color a Reddit icon, simply add a `color` declaration and the co
color: #ff4500;
}
}
```
```

![Reddit link in author profile with color]({{ "/assets/images/mm-author-profile-reddit-color.png" | relative_url }})

Expand Down Expand Up @@ -652,7 +652,7 @@ To start, add a new key to `_data/navigation.yml`. This will be referenced later

**Sample sidebar menu links:**

```yaml
```yaml
docs:
- title: Getting Started
children:
Expand Down Expand Up @@ -773,3 +773,49 @@ Add the new `.btn--reddit` class to the `<a>` element from earlier, [compile `ma
```

![Reddit social share link button]({{ "/assets/images/mm-social-share-links-reddit-color.png" | relative_url }})

---

## Custom head and footer

The `default` layout includes a number of custom templates, which provide ways for you to directly add content to all your pages.

### Head

`_includes/head/custom.html` is included at the end of the `<head>` tag. An example use of this include is to add custom CSS per page:

Add some Liquid tags for the new configuration to `_includes/head/custom.html`.
{% raw %}```html
{% if page.page_css %}
{% for stylesheet in page.page_css %}
<link rel="stylesheet" href="{{ stylesheet | relative_url }}">
{% endfor %}
{% endif %}
```{% endraw %}

Next, add `page_css` to any page's YAML Front Matter to have your CSS loaded for that page.
```yaml
page_css:
- /path/to/your/custom.css
```

### Footer

`_includes/footer/custom.html` is included at the beginning of the `<footer>` tag. An example use of this include is to add custom JavaScript per page:

Add some Liquid tags for the new configuration to `_includes/footer/custom.html`.
{% raw %}```html
{% if page.page_js %}
{% for script in page.page_js %}
<script src="{{ script | relative_url }}"></script>
{% endfor %}
{% endif %}
```{% endraw %}

Next, add `page_js` to any page's YAML Front Matter to have your CSS loaded for that page.
```yaml
page_js:
- /path/to/your/custom.css
```

---
22 changes: 11 additions & 11 deletions docs/_docs/16-stylesheets.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,29 +40,29 @@ minimal-mistakes

## Customizing

To override the default [Sass](http://sass-lang.com/guide) (located in theme's
To override the default [Sass](http://sass-lang.com/guide) (located in theme's
`_sass` directory), do one of the following:

1. Copy directly from the Minimal Mistakes theme gem

- Go to your local Minimal Mistakes gem installation directory (run
- Go to your local Minimal Mistakes gem installation directory (run
`bundle show minimal-mistakes-jekyll` to get the path to it).
- Copy the contents of `/assets/css/main.scss` from there to
- Copy the contents of `/assets/css/main.scss` from there to
`<your_project>`.
- Customize what you want inside `<your_project>/assets/css/main.scss`.

2. Copy from this repo.

- Copy the contents of [assets/css/main.scss](https://github.com/mmistakes/minimal-mistakes/blob/master/assets/css/main.scss)
- Copy the contents of [assets/css/main.scss](https://github.com/mmistakes/minimal-mistakes/blob/master/assets/css/main.scss)
to `<your_project>`.
- Customize what you want inside `<your_project/assets/css/main.scss`.

**Note:** To make more extensive changes and customize the Sass partials bundled
in the gem. You will need to copy the complete contents of the `_sass` directory
**Note:** To make more extensive changes and customize the Sass partials bundled
in the gem. You will need to copy the complete contents of the `_sass` directory
to `<your_project>` due to the way Jekyll currently reads those files.

To make basic tweaks to theme's style Sass variables can be overridden by adding
to `<your_project>/assets/css/main.scss`. For instance, to change the
To make basic tweaks to theme's style Sass variables can be overridden by adding
to `<your_project>/assets/css/main.scss`. For instance, to change the
link color used throughout the theme add:

```scss
Expand All @@ -71,7 +71,7 @@ $link-color: red;

Before any `@import` lines.

### Paragraph indention
### Paragraph indention

To mimic the look of type set in a printed book or manuscript you may want to enable paragraph indention. When `$paragraph-indent` is set to `true` indents are added to each sibling and the margin below each paragraph is removed.

Expand Down Expand Up @@ -120,7 +120,7 @@ $header-font-family : $sans-serif-narrow;

### Type scale

Wherever possible type scale variables have been used instead of writing out fixed sizes. This makes updating much easier by changing values in one file.
Wherever possible type scale variables have been used instead of writing out fixed sizes. This makes updating much easier by changing values in one file.

Example:

Expand Down Expand Up @@ -370,7 +370,7 @@ $base0c: #8abeb7;
$base0d: #81a2be;
$base0e: #b294bb;
$base0f: #a3685a;
```
```

### Breakpoints and grid stuff

Expand Down