The bread and butter of any theme. Below you'll find the layouts included with Minimal Mistakes, what they look like and the type of content they've been built for.
## Default Layout
The base layout all other layouts inherit from. There's not much to this layout apart from pulling in several `_includes`:
*`<head>` elements
* masthead navigation links
* {% raw %}`{{ content }}`{% endraw %}
* page footer
* scripts
**Note:** You won't ever assign this layout directly to a post or page. Instead all other layouts will build off of it by setting `layout: default` in their YAML Front Matter.
{: .notice--warning}
### Layout Based and User-Defined Classes
Class names corresponding to each layout are automatically added to the `<body>` element eg. `<body class="layout--single">`.
Using YAML Front Matter you can also assign custom classes to target with CSS or JavaScript. Perfect for "art directed" posts or adding custom styles to specific pages.
Example:
```yaml
---
layout: splash
classes:
- landing
- dark-theme
---
```
Outputs:
```html
<bodyclass="layout--splash landing dark-theme">
```
## Compress Layout
A Jekyll layout that compresses HTML in pure Liquid. To enable add `layout: compress` to `_layouts/default.html`.
**Note:** Has been known to mangle markup and break JavaScript... especially if inline `// comments` are present. For this reason it has been disabled by default.
{: .notice--danger}
* [Documentation](http://jch.penibelst.de/)
## Single Layout
The layout you'll likely use the most --- sidebar and main content combo.
**Includes:**
* Optional header image with caption
* Optional header overlay (solid color/image) + text and optional "call to action" button
Assign with `layout: single` , or better yet apply as a [Front Matter default]({{ "/docs/configuration/#front-matter-defaults" | relative_url }}) in `_config.yml`.
To expand the main content to the right, filling the space of what is normally occupied by the table of contents. Add the following to a post or page's YAML Front Matter:
```yaml
classes: wide
```
**Note:** If the page contains a table of contents, it will no longer appear to the right. Instead it will be forced into the main content container directly following the page's title.
| **toc_icon** | Optional | Table of contents icon, displays before the title. (string) | [Font Awesome](https://fontawesome.com/icons?d=gallery&s=solid&m=free) <iclass="fas fa-file-alt"></i>**file-alt** icon. Other FA icons can be used instead. |
Below are sample archive pages you can easily drop into your project, taking care to rename `permalink`, `title`, or the filename to fit your site. Each is 100% compatible with GitHub Pages.
* [All Posts Grouped by Category -- List View][posts-categories]
Post and page excerpts are auto-generated by Jekyll which grabs the first paragraph of text. To override this text with something more specific use the following YAML Front Matter:
```yaml
excerpt: "A unique line of text to describe this post that will display in an archive listing and meta description with SEO benefits."
To expand the main content to the right, filling the space of what is normally occupied by the table of contents. Add the following to a post or page's YAML Front Matter:
Adding `type=grid` to the `archive-single` helper will display archive posts in a 4 column grid. For example to create an archive displaying all documents in the portfolio collection:
If you have the luxury of using Jekyll plugins, the creation of category and tag archives is greatly simplified. Simply enable support for the [`jekyll-archives`](https://github.com/jekyll/jekyll-archives) plugin with a few `_config.yml` settings as noted in the [**Configuration**]({{ "/docs/configuration/#archive-settings" | relative_url }}) section and you're good to go.
If you're not using the `jekyll-archives` plugin then you need to create archive pages yourself. Sample taxonomy archives can be found by grabbing the Markdown sources below and adding to your site.
This layout displays all posts grouped by the year they were published. It accommodates the same front matter as `layout: archive`.
### `layout: categories`
This layout displays all posts grouped category. It accommodates the same front matter as `layout: archive`.
### `layout: tags`
This layout displays all posts grouped by tag. It accommodates the same front matter as `layout: archive`.
### `layout: collection`
This layout displays all documents grouped by a specific collection. It accommodates the same front matter as `layout: archive` with the addition of the following:
```yaml
collection: # collection name
entries_layout: # list (default), grid
show_excerpts: # true (default), false
sort_by: # date (default) title
sort_order: # forward (default), reverse
```
To create a page showing all documents in the `recipes` collection you'd create `recipes.md` in the root of your project and add this front matter:
```yaml
title: Recipes
layout: collection
permalink: /recipes/
collection: recipes
```
If you want to sort the collection by title add `sort_by: title`. If you want reverse sorting, add `sort_order: reverse`.
### `layout: category`
This layout displays all posts grouped by a specific category. It accommodates the same front matter as `layout: archive` with the addition of the following:
```yaml
taxonomy: # category name
entries_layout: # list (default), grid
```
To create a page showing all posts assigned to the category `foo` you'd create `foo.md` and add this front matter:
```yaml
title: Foo
layout: category
permalink: /categories/foo/
taxonomy: foo
```
### `layout: tag`
This layout displays all posts grouped by a specific tag. It accommodates the same front matter as `layout: archive` with the addition of the following:
```yaml
taxonomy: # tag name
entries_layout: # list (default), grid
```
To create a page showing all posts assigned to the tag `foo bar` you'd create `foo-bar.md` and add this front matter:
A derivative archive page layout to be used as a simple home page. It is built to show a paginated list of recent posts based off of the [pagination settings]({{ "/docs/configuration/#paginate" | relative_url }}) in `_config.yml`.
If you'd rather have a paginated page of posts reside in a subfolder instead of acting as your homepage make the following adjustments.
Create `index.html` in the location you'd like. For example if I wanted it to live at **/blog** I'd create `/blog/index.html` with `layout: home` in its YAML Front Matter.
Then adjust the `paginate_path` in **_config.yml** to match.
**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.
Feature blocks can be assigned and aligned to the `left`, `right`, or `center` with a sprinkling of YAML. For full details on how to use the `feature_row` helper check the [**Content**]({{ "/docs/helpers/" | relative_url }}) section or review a [sample splash page](https://github.com/{{ site.repository }}/blob/master/docs/_pages/splash-page.md).
A page with a search form. Add `layout: search` to the YAML Front Matter similar to [this example](https://github.com/mmistakes/minimal-mistakes/blob/master/docs/_pages/search.md) on the demo site.
**Note:** A page using the `layout: search` isn't compatible with the new [site search feature]({{ "/docs/configuration/#site-search" | relative_url }}) incorporated in the masthead.
To add some visual punch to a post or page, a large full-width header image can be included.
Be sure to resize your header images. `~1280px` is a good width if you aren't [responsively serving up images](http://alistapart.com/article/responsive-images-in-practice). Through the magic of CSS they will scale up or down to fill the container. If you go with something too small it will look like garbage when upscaled, and something too large will hurt performance.
**Please Note:** Paths for image headers, overlays, teasers, [galleries]({{ "/docs/helpers/#gallery" | relative_url }}), and [feature rows]({{ "/docs/helpers/#feature-row" | relative_url }}) have changed and require a full path. Instead of just `image: filename.jpg` you'll need to use the full path eg: `image: /assets/images/filename.jpg`. The preferred location is now `/assets/images/`, but can be placed elsewhere or external hosted. This all applies for image references in `_config.yml` and `author.yml` as well.
By default the large page header or overlay images are used for sharing previews. If you'd like to set this image to something else use `page.header.og_image` like:
```yaml
header:
image: /assets/images/your-page-image.jpg
og_image: /assets/images/your-og-image.jpg
```
**ProTip:** `og_image` is useful for setting OpenGraph images on pages that don't have a header or overlay image.
The space to the left of a page's main content is blank by default, but has the ability to show an author profile (name, short biography, social media links), custom content, or both.
### Author Profile
Add `author_profile: true` to a post or page's YAML Front Matter.
To assign more author links, add to the `author.links` array in [`_config.yml`]({{ "/docs/configuration/" | relative_url }}) link so. Any of [Font Awesome's icons](https://fontawesome.com/icons?d=gallery) are available for use.
**Note:** Depending on the icon and theme skin used, colors may not be used. Popular social networks like Twitter, Facebook, Instagram, Google+, etc. have the appropriate brand color set in CSS. To change or add missing colors edit [`_utilities.scss`](https://github.com/mmistakes/minimal-mistakes/blob/master/_sass/minimal-mistakes/_utilities.scss) in `<site root>/_sass/minimal-mistakes/`.
<figcaption>Example of custom sidebar content added as YAML Front Matter.</figcaption>
</figure>
**Note:** Custom sidebar content added to a post or page's YAML Front Matter will appear below the author profile if enabled with `author_profile: true`.
{: .notice--info}
### Custom Sidebar Navigation Menu
To create a sidebar menu[^sidebar-menu] similar to the one found in the theme's documentation pages you'll need to modify a `_data` file and some YAML Front Matter.
[^sidebar-menu]: Sidebar menu supports 1 level of nested links.
<figcaption>Custom sidebar navigation menu example.</figcaption>
</figure>
To start, add a new key to `_data/navigation.yml`. This will be referenced later in via YAML Front Matter so keep it short and memorable. In the case of the theme's documentation menu I used `docs`.
**Sample sidebar menu links:**
```yaml
docs:
- title: Getting Started
children:
- title: "Quick-Start Guide"
url: /docs/quick-start-guide/
- title: "Structure"
url: /docs/structure/
- title: "Installation"
url: /docs/installation/
- title: "Upgrading"
url: /docs/upgrading/
- title: Customization
children:
- title: "Configuration"
url: /docs/configuration/
- title: "Navigation"
url: /docs/navigation/
- title: "UI Text"
url: /docs/ui-text/
- title: "Authors"
url: /docs/authors/
- title: "Layouts"
url: /docs/layouts/
- title: Content
children:
- title: "Working with Posts"
url: /docs/posts/
- title: "Working with Pages"
url: /docs/pages/
- title: "Working with Collections"
url: /docs/collections/
- title: "Helpers"
url: /docs/helpers/
- title: "Utility Classes"
url: /docs/utility-classes/
- title: Extras
children:
- title: "Stylesheets"
url: /docs/stylesheets/
- title: "JavaScript"
url: /docs/javascript/
```
Now you can pull these links into any page by adding the following YAML Front Matter.
```yaml
sidebar:
nav: "docs"
```
**Note:** `nav: "docs"` references the `docs` key in `_data/navigation.yml` so make sure they match.
{: .notice--info}
If you're adding a sidebar navigation menu to several pages the use of Front Matter Defaults is a better option. You can define them in `_config.yml` to avoid adding it to every page or post.
**Sample sidebar nav default:**
```yaml
defaults:
# _docs
- scope:
path: ""
type: docs
values:
sidebar:
nav: "docs"
```
---
## Social Sharing Links
The `single` layout has an option to enable social links at the bottom of posts for sharing on Twitter, Facebook, Google+, and LinkedIn. Similar to the links found in the author sidebar, the theme ships with defaults for the most common social networks.
To enable these links add `share: true` to a post or page's YAML Front Matter or use a [default](https://jekyllrb.com/docs/configuration/#front-matter-defaults) in your `_config.yml` to apply more globally.
If you'd like to add, remove, or change the order of these default links you can do so by editing [`_includes/social-share.html`](https://github.com/mmistakes/minimal-mistakes/blob/master/_includes/social-share.html).
Let's say you wanted to replace the Google+ button with a Reddit one. Simply replace the HTML with the following:
To change the color of the button use one of the built in [utility classes]({{ "/docs/utility-classes/#buttons" | relative_url }}). Or you can create a new button class to match whatever color you want.
Under the `$social` color map in `assets/_scss/_buttons.scss` simply add a name (this will be appened to `btn--`) that matches the new button class. In our case `reddit` ~> `.btn--reddit`.
```scss
$social:
(facebook, $facebook-color),
(twitter, $twitter-color),
(google-plus, $google-plus-color),
(linkedin, $linkedin-color);
(reddit, #ff4500;)
```
**ProTip:** For bonus points you can add it as a Sass `$variable` that you set in `_variables.scss` like the other ["brand" colors](http://brandcolors.net/).
