Stylesheets

The stylesheets resources manages all stylesheets in the system.

Stylesheets are placed either in the stylesheets folder at the base of your website, or preferably within your theme's stylesheets folder for modularity:

  • stylesheets
    • base.css
  • theme-twitter
    • javascripts
    • media
    • stylesheets
      • theme-specific.css
      • default.css
      • style.css

**Note that theme-level stylesheets will overload blog-level stylesheets.

Loading Stylesheets

Use stylesheets.load mustache block helper to load stylesheets:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
    <meta name="author" content="{{ data.author.name }}">
    {{# stylesheets.load }}
      base.css
      theme-specific.css
      default.css
      style.css
    {{/ stylesheets.load }}
  </head>
  ...
</html>

Each file should be separated by a newline and be in the order you want them to load. Note the path is always relative to the stylesheets folder(s).

Loading stylesheets in this way allows us to better mange URLs as well as intelligently update file names based on any pre/post processing we may be doing as we'll see later.

Manual Loading

Manually reference stylesheets in layouts using mustache:

<link href="{{ urls.stylesheets }}/some-stylesheet.css" rel="stylesheet" type="text/css" media="all">

Note manually referencing stylesheets is discouraged because they will be unregistered with ruhoh's asset manager.

URLs

Stylesheet urls are always name-spaced by /assets/stylesheets/

Compiling

Ruhoh natively supports filename fingerprinting based on the stylesheets content. However, in order to update the stylesheet file references you must used the above dynamic-loading strategy.

Fingerprinting Example:

Stylesheet original URL: /assets/stylesheets/style.css Stylesheet compiled URL: /assets/stylesheets/style-351c927c9099207bd7c9db36cc193954.css

The reason for this is to always serve the latest stylesheet and not have to worry about browser-based file caching. However if the file does not change, the fingerprint will remain the same and the browser will benefit from the cached file.