-
Notifications
You must be signed in to change notification settings - Fork 7
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.
======
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" />.
======
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:
=======
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... */======
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, 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>======
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
======