Stylesheets

asimov.js ships with first-class Stylus support. Files in site/styles/*.styl are compiled to CSS at build time, and exposed to templates via {{style "name"}}.

site/styles/
  main.styl         compiled to /site/styles/main.css
  home.styl
  docs.styl
  footer.styl
  header.styl
  menu.styl
  sidebar.styl

Importing across files

Stylus’s @import works across files in site/styles/. The convention is to have a single entry file (main.styl) that imports the rest.

@import "nib"

@import "basic"
@import "header"
@import "menu"
@import "sidebar"
@import "home"
@import "docs"
@import "footer"

nib is the standard Stylus mixin library and is included as a peer dependency in most asimov.js projects.

Reference from templates

In your header.tmpl:

<link rel="stylesheet" href="{{style "main"}}" />

In development, this emits a path to the compiled file directly. In production, asimov-static rewrites it to a hashed URL for cache busting.

Plain CSS

You don’t have to use Stylus. Plain .css files in site/styles/ are copied through as-is and resolved the same way by {{style}}.