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

Add classnames to body element #526

Merged
merged 2 commits into from
Sep 15, 2016
Merged

Add classnames to body element #526

merged 2 commits into from
Sep 15, 2016

Conversation

vwchu
Copy link
Contributor

@vwchu vwchu commented Sep 14, 2016

Feature enhancement that adds the 2 related capabilities that enable users to:

  1. Detect the layout of a page via CSS or JavaScript, and
  2. Toggle various user-defined classes in the body tag's class attribute by assigning an array of classnames to the page.classes or layout.classes variables. If page.classes is defined, overrides layout.classes. (I would prefer concatenation, but that doesn't seem to work).

This enables users to specify custom styles to use for specific pages and components on that page.
For instances, the landing page might have specific styling that is only used on that page.

---
layout: splash
classes:
  - landing
  - dark-theme

---

Outputs:

<body class="layout--splash landing dark-theme">

Copy link
Owner

@mmistakes mmistakes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks useful. Thanks!

@mmistakes mmistakes merged commit 57449b3 into mmistakes:develop Sep 15, 2016
mmistakes pushed a commit that referenced this pull request Sep 15, 2016
* Expose layout type as class name on body element

* Add ability to add classes to body via front matter
@vwchu vwchu deleted the body-classes branch September 17, 2016 14:07
@DanielSank
Copy link

DanielSank commented Sep 19, 2016

FYI the docs say this already exists, and it's not clear in the docs whether the classes are concatenated or completely overwrite the default ones.

https://mmistakes.github.io/minimal-mistakes/docs/layouts/

@mmistakes
Copy link
Owner

@DanielSank They don't overwrite or concatenate, they're simply added to <body class=""> on the post/page you assign a class name to in YAML Front Matter.

And even when assigned they do nothing unless there is corresponding CSS for the classes somewhere.

jluccisano added a commit to jluccisano/jluccisano.github.io that referenced this pull request May 6, 2017
* Expose layout type as class name on body element

* Add ability to add classes to body via front matter
makaroniame added a commit to makaroniame/makaroniame-old.github.io that referenced this pull request May 18, 2022
* Expose layout type as class name on body element

* Add ability to add classes to body via front matter
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants