Assets

Assets can be any kind of static file, generally things like javascript, css, images, and favicons. Any time your site needs to use files that aren't pages, partials, or layouts, you'll be putting them into /assets.

======

Creating Assets

You add assets to your website simply by placing them into the /assets directory. Anything placed in this directory will be served back with the same path it is placed in. For instance, if you add /assets/favicon.ico, it will be served up at http://localhost:8080/favicon.ico when your site is running.

In order to use these assets within your pages, simply include them with the absolute path to the location they're served up at. For instance, if you have an image in /assets/images/header.png, you can use it in your markup like so: <img src="/images/header.png" />.

======

Compiled Assets

If you're using the Solidus Site Template you'll have the option to use compiled assets. Compiled assets are the result of running assets through some sort of compilation step, like RequireJS or Sass. These assets will be automatically compiled if you use the grunt dev task provided by the site template. For more usage details, see the Styles and Scripts sections below:

=======

Styles

When using the Solidus Site Template you can use its development compilation script to automatically compile Sass while you work. To leverage this, just make sure you base all of your styles out of /assets/styles/index.scss, and @import everything you want included. The site template will automatically compile this and save the result to /assets/compiled/styles.css, which can then be included normally in your markup. Here's a quick example of how you might set up your styles with this system:

/assets
├─ /images
├─ /scripts
└─ /styles
   ├─ footer.scss
   ├─ header.scss
   └─ index.scss

And then inside your index.scss:

@import "header";
@import "footer";

/* The rest of your styles here... */

======

Scripts

• What is RequireJS?
• How do I structure my scripts?
• How do I use my scripts in my pages?
• What are script best practices?

======

Other assets

• How do I use other assets in my pages?