SlabJS

SlabJS is a web framework that allows you to build dynamic web applications and compile them into standalone, optimized, static HTML.

Features

The following features are included with this version:

• jQuery
• Modernizr
• Bootstrap 3.3
• Handlebars (other template engines to come at a later date)
• Template Data for Handlebars
• libSass
• Compass Mixins (via libSass)
• Font Awesome 4.3
• SVG Icon Font generation
• Browserify (with map generation)
• BrowserSync
• Google Analytics Injection
• Google Fonts Injection
• Optimal PageSpeed scores!

Table of Contents

Installation

Making Your Project

Project Configuration

Generators

Coming in Next Releases

Installation

With node installed:

# Get the latest stable release of SlabJS 
$ npm install slabjs -g

Make Your Project

Create the app:

# Create your app 
$ slab create app

Launch the app and get working:

# cd into your new app 
$ cd app
 
# launch the server 
$ slab launch

Compile for production

By passing production into the environment option, you will be making the following optimizations:

• Minify CSS
• Minify JS
• Generate gzip for your JS files (it's up to you how you enable them)

# launch the server with production code 
$ slab launch --env production

Project Configuration

You can add project specific information to inject into your HTML by adding it to a file at ./config/project.js

Inject Google Font stylesheets into your head

# ./config/project.js 
 
# copy the value directly after the family parameter  
# provided by the Google Fonts link tag: 
# <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
google_fonts: {
    families: [
        'Open+Sans',
        'Lobster',
        'Raleway:400,200,700'
    ]
},

Inject Google Analytics scripts to your footer

# ./config/project.js 
 
# you can add multiple scripts. Keep in mind only one  
# legacy script can be added(ga.js) 
google_analytics: {
    ua_codes: [
        {
            type: 'universal', //universal or legacy
            ua_code: 'UA-XXXXXXXX-X'
        },
        {
            type: 'universal',
            ua_code: 'UA-YYYYYYYY-Y'
        },
        {
            type: 'legacy',
            ua_code: 'UA-ZZZZZZZZ-Z'
        }
    ]
 
}

Template Data for Handlebars

# ./config/project.js 
template_data: {
    title: 'Example title'	
}

# ./src/views/partials/head.hbs 
<title>{{title}}</title>

# ./build/index.html 
<title>Example title</title>

Generators

Sometimes, live updating will not always work for you. This is where generators come in.

Regenerate your SVG font.

# Make more font characters 
$ slab generate icons

Fetch the latest Font Awesome library

# Get the latest Font Awesome 
$ slab generate fontawesome

More to come...

Coming Soon

• Bower & Bower support for Browserify
• Handlebars Layouts
• Controllers for your views (to replace Tempalate Data)
• GIT Deployments

Known Issues

• There is a minor issue on first launch where the virtual server doens't catch up with the generated files. A small refresh seems to fix it. This will be fixed in the next release.