Ignore

Please note that your browser is not supported.

We recommend upgrading to the latest Firefox or Google Chrome.

Frontend: Asset Packs

Asset packs consists of a named stylesheet and/or script that can be included by a view template. It's the perfect place to put things that will be used across your application, but don't follow your view template structure close enough to make use of composition.

Asset packs live in the frontend/assets/packs folder. Each pack has a unique name and an associated stylesheet and/or script. For example, to create a pack named "example" that includes some styles, add a file like this to the packs folder:

frontend/assets/packs/example.css
p {
  color: red;
}

Including packs

To include a pack in a view template, add it to template's front-matter:

frontend/pages/index.html
---
packs:
- example
---

<p>
  This content will be styled red.
</p>

Pakyow will load the pack's styles into the stylesheet for the view, adding the red color to the paragraph tag. Packs can be included into any view template, including layouts and partials. The pack will be loaded anytime the view template is used during rendering.

Packs can define styles, scripts, or both. Let's add some JavaScript to the example pack:

frontend/assets/packs/example.js
console.log("hello from the example pack");

The paragraph text will still receive the red styling, but now the "hello from the example pack" message will appear in the browser's console, showing that the JavaScript was successfully loaded and executed.

Inheriting included packs

Packs included by a layout are inherited by all pages that use the layout. For example, this layout template includes a single pack named example:

frontend/layouts/default.html
---
packs:
- example
---

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>

<body>
  <!-- @container -->
</body>
</html>

Here's a page template that includes an additional pack named page-pack:

frontend/pages/index.html
---
packs:
- page-pack
---

...

Since the page uses the default layout, both packs will be included into the composed view.

Auto-Loaded packs

Sometimes it's useful to load a pack throughout an entire application without having to include it in every view template. You can do this by adding the pack to the assets.packs.autoload config option in config/application.rb:

config/application.rb
Pakyow.app do
  configure do
    config.assets.packs.autoload << :example
  end
end
Next Up: External Assets