Glavo/minimal-mistakes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Document layout based and user-defined <body> classes

Browse Source
This commit is contained in:
Michael Rose 2016-09-15 15:11:34 -04:00
parent 15799fcbdf
commit 92fc785f96
1 changed files with 31 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
_docs/09-layouts.md
View File

@ -7,7 +7,7 @@ single_layout_gallery:
alt: "single layout with header example" alt: "single layout with header example"
- image_path: mm-layout-single-meta.png - image_path: mm-layout-single-meta.png
alt: "single layout with comments and related posts" alt: "single layout with comments and related posts"
modified: 2016-09-09T10:22:01-04:00 modified: 2016-09-15T15:09:22-04:00
--- ---
{% include base_path %} {% include base_path %}
@ -28,6 +28,36 @@ The base layout all other layouts inherit from. There's not much to this layout
**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. **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} {: .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">`.
| layout | class name |
| ------ | ---------- |
| archive | `.layout--archive` |
| archive-taxonomy | `.layout--archive-taxonomy` |
| single | `.layout--single` |
| splash | `.layout--splash` |
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
<body class="layout--splash landing dark-theme">
```
## Compress Layout ## Compress Layout
A Jekyll layout that compresses HTML in pure Liquid. To enable add `layout: compress` to `_layouts/default.html`. A Jekyll layout that compresses HTML in pure Liquid. To enable add `layout: compress` to `_layouts/default.html`.