From 92fc785f96c7c4031f746de974fc8b4cab6a4024 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Thu, 15 Sep 2016 15:11:34 -0400 Subject: [PATCH] Document layout based and user-defined `` classes --- _docs/09-layouts.md | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/_docs/09-layouts.md b/_docs/09-layouts.md index 47e17bb4..9f11bcd7 100644 --- a/_docs/09-layouts.md +++ b/_docs/09-layouts.md @@ -7,7 +7,7 @@ single_layout_gallery: alt: "single layout with header example" - image_path: mm-layout-single-meta.png 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 %} @@ -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. {: .notice--warning} +### Layout Based and User-Defined Classes + +Class names corresponding to each layout are automatically added to the `` element eg. ``. + +| 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 + +``` + ## Compress Layout A Jekyll layout that compresses HTML in pure Liquid. To enable add `layout: compress` to `_layouts/default.html`.