Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Boilerplate for new Solidus sites, for use with grunt-init
JavaScript Ruby CSS

This branch is 7 commits ahead, 3 commits behind solidusjs:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
root
README.md
template.js

README.md

solidus-site-template

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.

Using The Template

In order to use this template, you'll need the following:

  • Grunt.js installed globally*
  • grunt-init installed globally*
  • Download/clone this repo
  • (Optional) move/rename the template folder to ~/.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/

Grunt tasks

The Solidus Site Template provides a set of Grunt instructions for asset compilation. These scripts will do the following:

  • Compile index.js and all the files it requires to /compiled/scripts.js. Require.js is automatically included.
  • Compile index.scss and all the files it imports to /compiled/styles.css.
  • Use Livereload to automatically reload a page's CSS when it is changed in development. You do not have to install Livereload (there is javascript in the layout that does this for you).
  • Compile all views in /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="/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.

Something went wrong with that request. Please try again.