Grunt-init template for a Solidus site. This grunt-init template helps you get started building Solidus sites by quickly assembling a default file structure for you.
In order to use this template, you'll need the following:
~/.grunt-init/solidus/
Once this is done, you can init a new site by running one of the following commands:
grunt-init solidus
OR (if you haven't moved the template folder to ~/.grunt-init/solidus/
)...
grunt-init /path/to/solidus/template/folder/
The Solidus Site Template provides a set of Grunt instructions for asset compilation. These scripts will do the following:
index.js
and all the files it requires to /compiled/scripts.js
. Require.js is automatically included.index.scss
and all the files it imports to /compiled/styles.css
./views/
to /compiled/templates.js
as templates and partials. Handlebars.js is automatically included.Here's a quick example of a Solidus site's asset structure:
assets
|-images
|-kitties.png
|-scripts
|-vendors
|-jquery.js
|--index.js
|--kitties.js
|-styles
|-index.scss
|-kitties.scss
After grunt compile
or grunt dev
are run, a new folder is created with the compiled scripts, styles, and templates of the site.
assets
|-compiled
|-scripts.js
|-styles.css
|-templates.js
...
All of a site's views can be accessed client-side as JavaScript Templates. These views are compiled as Handlebars.js templates and partials. Javascript templates, along with anything else solidus makes available client-side, is on the solidus
namespace. Here's a quick example of how it works (assuming we have a view at /views/kitties/index.hbs
):
index.hbs
<html>
<head>
<script src="https://github.com/solidusjs/solidus-site-template/raw/master/compiled/templates.js"></script>
<script>
var markup = solidus.templates['kitties/index']( data );
$( function(){
$('body').append( markup );
});
</script>
</head>
</html>
When building a site, you should always try to use the compiled assets, as they will be optimized for distribution. Other assets, such as fonts and images, have no compilation step and can be used as is.