Eric Lanehart edited this page Jan 23, 2014 · 16 revisions

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 the grunt dev command 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

When using the Solidus Site Template you can use the grunt dev command to automatically compile your javascript using RequireJS. Using RequireJS is a bit more complicated than Sass, as it requires you to write your javascript ins a specific way, so you might want to get familiar with it before you try to use this. Here's a quick example of how to set your scripts up for automatic compilation:

/assets
├─ /images
├─ /scripts
|  ├─ /vendor
|  |  └─ jquery.js
|  ├─ index.js
|  └─ slideshow.js
└─ /styles

And inside index.js:

/* specify dependencies with the array
   use modules as arguments to the require callback */
require(['slideshow'], function( slideshow ){
    slideshow();
});

And finally, slideshow.js:

/* specify dependencies with the array
   due to the way jQuery works with RequireJS, we don't explicitly define $ */
define(['vendor/jquery'], function(){
    var slideshow = function(){
        /* Awesome slideshow code here */
    };
    return slideshow;
});

======

Other assets

Other assets, like images and favicons work like you'd expect. You merely place them in the /assets folder and they'll be available to use:

/assets
├─ /images
|  └─ banner.jpg
├─ /scripts
├─ /styles
└─ favicon.ico

And inside layout.hbs:

<!DOCTYPE html>
<html>
<head>
    <link rel="icon" href="/favicon.ico" />
</head>
<body>
    <img src="/images/banner.jpg" />
    <!-- the rest of the body -->
</body>
</html>

NEXT: Deploying

======

Solidus is still under development. If you have comments or questions, please reach out to us in our IRC channel: #solidus on irc.freenode.net

======

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.