Assets

Learn how to use Hammer's special directives for stylesheets and JavaScript files to efficiently manage your assets.

Introduction

Hammer provides specialized directives for including stylesheets and JavaScript files. These directives handle path resolution automatically and ensure your assets are linked correctly in your compiled HTML.

Using these directives helps you:

  • Include multiple files in a single directive
  • Automatically resolve paths to your assets
  • Keep your code clean and organized
  • Ensure correct file ordering and linking

Stylesheets

To include a stylesheet, use the @stylesheet directive in your <head> section:

<head>
    <title>My Page</title>
    <!-- @stylesheet style.css -->
</head>
Tip: File extensions are optional. You can use @@stylesheet style instead of @@stylesheet style.css.

Multiple Stylesheets

You can include multiple stylesheets in a single directive by listing them:

<!-- @stylesheet normalize.css style.css components.css -->
<!-- Or without extensions -->
<!-- @stylesheet normalize style components -->

Hammer will automatically generate the appropriate <link> tags for each file in the order you specify.

Using Paths

You can specify paths relative to your project root:

<!-- @stylesheet assets/css/base.css assets/css/components.css -->
<!-- Or without extensions -->
<!-- @stylesheet assets/css/base assets/css/components -->
Tip: Hammer will automatically resolve paths, so you can use either filenames or relative paths. Using relative paths is recommended for larger projects.

JavaScript

To include a JavaScript file, use the @javascript directive. It's typically placed before the closing </body> tag:

<body>
    <!-- Your content -->
    
    <!-- @javascript main.js -->
</body>
Tip: File extensions are optional. You can use @@javascript main instead of @@javascript main.js.

Multiple JavaScript Files

You can include multiple JavaScript files in a single directive:

<!-- @javascript jquery.js app.js utils.js -->
<!-- Or without extensions -->
<!-- @javascript jquery app utils -->

Hammer will automatically generate <script> tags for each file in the order you specify, ensuring proper load order.

Using Paths

You can specify paths relative to your project root:

<!-- @javascript assets/js/vendor.js assets/js/main.js -->
<!-- Or without extensions -->
<!-- @javascript assets/js/vendor assets/js/main -->

Complete Examples

Basic Page Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
    <!-- @stylesheet normalize.css style.css -->
</head>
<body>
    <h1>Welcome</h1>
    <p>Content goes here</p>
    
    <!-- @javascript main.js -->
</body>
</html>

With Multiple Files

<head>
    <title>My App</title>
    <!-- @stylesheet base.css components.css pages.css -->
</head>
<body>
    <!-- Content -->
    
    <!-- @javascript vendor.js app.js components.js -->
</body>

With Organized Folder Structure

<head>
    <title>My Site</title>
    <!-- @stylesheet assets/css/reset.css assets/css/typography.css assets/css/layout.css -->
</head>
<body>
    <!-- Content -->
    
    <!-- @javascript assets/js/vendor/jquery.js assets/js/app.js -->
</body>

Best Practices

Organization

  • Place CSS files in an assets/css/ or css/ directory
  • Keep JavaScript files in assets/js/ or js/
  • Use descriptive, consistent filenames
  • Organize files by function or component

File Ordering

  • List stylesheets in dependency order (base styles first, then components)
  • List JavaScript files with vendor libraries first, then your application code
  • Keep the order consistent across your project

Performance

  • Use relative paths in larger projects for faster resolution
  • Group related files together in single directives when possible
  • Keep file lists organized and easy to maintain

Next Steps

Now that you understand asset management, learn about: