Style your content

We already added a few CSS files in our previous examples, and this article summarizes how to style your content in Poet.

Location for the CSS files

Poet comes with a preset for Jarmuz, a project building tool created by our team. This preset is created specifically for using it for Poet and esbuild and if you want to use it, you need to place your CSS files in the /resources/css directory.

Alternatively, you can configure esbuild yourself according to your preferences. In that case, you can place your CSS and other asset files anywhere you want, but you will need to set up esbuild to ensure it generates the esbuild-meta.json file.

Adding CSS files to your layouts

To include CSS files in your layouts, you need to use the context.assets.add() function inside the template function of your layout.

The context.assets.add() function takes the path to the CSS file as an argument, for example:

fn template(context, props, content) {
  context.assets.add("resources/css/styles.css");

  component {
    <!DOCTYPE html>
    <html lang="en">
      <head>
        {context.assets.render()}
      </head>
      <body>
        {content}
      </body>
    </html>
  }
}

Adding the file this way results in this file being included in the final HTML output of the page using a <link> tag in the <head> section or anywhere else you decide to render the assets using the context.assets.render() function.

Organize your pages as collections Collections navigation