1. Theme Guide
  2. Themes
  3. Styles

Styles

Styles can be written in CSS files in your /assets directory.

If you'd prefer to use a CSS preprocessor like Sass or Less, you can configure Webpack to build this for you.

Using Files in Theme Templates

To use the files, you will need to import the built files into the theme templates. The templating engine includes Nunjucks filters to help with this:

  • {{ 'styles/main.css' | file }} - Converts a local asset name into the full URL

  • {{ 'styles/main.css' | file | style }} - Example combination of filters - converts a local asset name into the full URL and then wraps it in a <link> tag

Example usage:

<!DOCTYPE html>
<html lang="en-US">
 <head>
  {{ 'styles/main.css' | file | style }}
  {{ 'main.js' | file | script }}
 </head>
 <body></body>
</html>

In the Writeroom

When working in the Pagedip Writeroom, this is rare but you may come across unexpected behavior caused by certain CSS styling that conflicts with the WYSIWYG operation. For example, setting the CSS properties display and overflow on elements will sometimes cause strange scroll behavior. If your CSS is giving you trouble in the Writeroom, you may considering having alternate CSS that creates a smooth user experience while working in the Writeroom.

If you need to have styles active only when working in the Writeroom, you could use the template variable inEdit to allow you to target styles for the editing environment. For example, one way to do it could be like this:

// layout.html
<body class="{% if inEdit %}in-edit{% endif %}"></body>

// main.scss
body.in-edit {
 // Writeroom specific styling
}

Published with Pagedip • Last updated January 29th 2018