Getting Started – is easy!!


StaticFrame is based on Node.js. So basic need is to have Node installed in your system. SASS is the preprocessor for CSS that we all love to work with. So you need to have SASS installed. The default way is to install Ruby on Rails, and install sass via gems. SASS auto compilation is carried out by a small piece of software called Compass. Make sure compass is available as command in your system. The details of the installation of Node, RoR and Compass given below.

Installation: Need 2 mins

Unpack the code in your favorite location. Preferably in projects folder. If you have node and sass already installed, then in your command line goto the project directory and run :

npm install
gem install compass
grunt server

Folder Structure

builds                  : Autometically generated on grunt command
node_modules            : Contains node modules. Ignore this folder ( even in your editor preferences) 
public                  : All Javascript, CSS, images, content-images goes here
    |- css              : folder for generated CSS files
        |- min          : Minified css to be kept here
    |- js               : Javascript folder 
        |- libs         : Put all third party javascripts here( un minified)
        |- min          : Folder for minified js files
        |- components   : contains components
        |- modules      : Add your modules if you really need any page/story specific code
    |- content-images   : Images that are expected to be author contributable( if you are using any CMS)
    |- images           : All images that are either used in CSS or system images.
    |- font             : Any custom font
    |- services         : Put all json/xml/html files requested by ajax calls.
    |- scss             : SASS/LESS files.
        |- components   : contains default styling and customized components
        |- global-partials : contains icons, CSS for constants and mixins
        |- libs         : contains CSS provided by bootstrap and staticframe. Any other CSS libraries used can be placed here. 
        |- modules      : CSS for different modules of the website. Sample Provided.
        |- themes       : The theme for the website has to be included here
    |- sprite-source    : sprite psd files
    |- ts               : If you are using typescript, add your code here in the same structure as that of js in public folder
    |- routes           : Contains routing of pages. Edit it if required.
views                   : Put your html templates here.
    |-components        : Contains markup for components of website.
        |-global-components : Contains markup for global components of website.
site-config.js          : Edit the site related global parameters
config.rb               : SASS- compass configuration file
package.json            : node modules configuration
app.js                  : Node root file to start the server.

Grunt commands

A grunt file is provided with basic set of automation work. Modify it according to your need.

The default setup provides the following functionality:

Default Actions :: Start Server and watch for modifications


Start Server, watch for modifications and open localhost in default browser

$grunt server

Report :: Generate JSHINT Report and open dev-jshint-report.html

$grunt report-js

Build :: Uglification of Javascript, css minification, jshint error reporting for your dev environment

$grunt build

Minification :: Uglification of Javascript and CSS minification only

$grunt minify