Bedrock provides two default variables:
bodyClass. When you want to set an HTML class for every page, simply go to
_layouts/master.pug and find these lines:
block pageVariables //- Use this block to append page variables in templates - var projectTitle = "Bedrock" - var htmlClass = "" - var bodyClass = ""
Now you can change the empty string to something that you like.
If you want to only add a certain body class in a specific template, use Pug’s template inheritance to append to the block. For example, let’s say you already have a utility class to set full height on the
pageVariables block in
master.pug, but you want to set a specific body class on another page, it will look like this.
block append pageVariables - var htmlClass = "u-full-height" - var bodyClass = "u-full-height"
in your template (do repeat the original
block append pageVariables - var bodyClass = "u-full-height your-specific-class"
You can use this technique to set global variables or page-specific variables; or even page-specific variables that inherit to deeper templates. You could probably be more clever than this code and append to the original value too. Anyone knows how?