Springboard is an ultra minimal JavaScript / CSS and HTML project springboard.

Update: Springboard has recently undergone a complete rewrite. It’s now now much more powerful, flexible and Python (therefore cool). Checkout the Springboard GitHub page for more info.

It also means that this post is now largely irrelevant, so don’t trust it – trust the README.

I love HTML5 Boilerplate and use it a lot as a basis for web projects. Sometimes however, I find it still does a little bit too much for my needs and I end up removing a lot before I can get started.

Most importantly for me though, it still currently doesn’t support building with Google Closure Compiler which I tend to use both for it’s advanced code optimisations and for coding better Object-Oriented JavaScript (not to mention generating JavaScript documentation from the very same comments I write for the compiler).

So What’s Springboard Then?

Springboard is an ultra minimal JavaScript / CSS and HTML project template (or springboard).

It features a very useful ANT build file which, among other things, can:

  • Refactor template files to match your project’s namespace so you’re ready to code in seconds
  • Combine JavaScript and CSS libraries to reduce HTTP requests
  • Compile JavaScript using the Google Closure Compiler (simple or advanced)
  • Minify CSS using the YUI Compressor
  • Generate JavaScript documentation using the JSDoc Toolkit
  • Sanitize HTML and inject variables at compile time

Also included is a simple JavaScript Model-View-Controller (MVC) template (based on Alex Netkachov’s) which can optionally be used as a basis for your project.

Hopefully No fluff – just the very basics you need to get a project or experiment started.

Check out Springboard on github

Quick Setup

To get started, first clone the repository:

cd /your/workspace
git clone git@github.com:soulwire/Springboard.git YourProjectName

Run the setup task and enter your project’s namespace when prompted:

cd YourProjectName
ant setup
Enter the full project namespace for this project: com.domain.project

This will refactor the project template to match your namespace. You’ll then be given the option to delete the GIT metadata and disconnect from the Springboard repository…

You can build your project with the default ANT task, build

ant build

And when you’re ready, generate documentation using the jsdoc task

ant jsdoc

You should also have a look at the build.properties file as here you can add your credentials and tweak the various build settings to your taste.

A Quick Note About Blocks

Springbard uses HTML comment blocks to figure out how it should build the project. There are different types of blocks you can use:

  • CSS:LIB » Third party CSS files (combined and minified)
  • CSS:SRC » Your project’s styles (combined and minified)
  • JS:LIB » JavaScript dependancies (combined but otherwise left untouched)
  • JS:SRC » JavaScript source files (combined and compiled)

Any linked JavaScript or CSS resources outside of these tags will simply be cloned into the build directory and left untouched for flexibility.

Springboard will look at all of your pages when it builds and combine all files in all blocks of the same type. There is then a generic document ready handler, which initialises scripts for a page based on the id tag of it’s body. This is best illustrated in this example.

A Quick Note About Externs

If you’ve used the Closure Compiler before, you’ll be familiar with Externs. Externs tell the compiler not to refactor certain methods and properties, because doing so may break your code if they reference a third party library or code not being compiled. Springboard currently ships with an externs file supporting JQuery 1.5, just to get you going. You can easily generate more for your favorite libraries using this great tool by Laurentiu Macovei or others like it.

What Springboard Doesn’t Do

The primary intention of Springboard is to provide a simple but powerful project template and build file, which integrates with the Closure Compiler as well as doing the basics which you would expect; such as file concatenation and CSS minification. It’s intended to be extremely light and minimal, allowing you to take the project kernel forward in whichever way you need; whether it’s a large site build or a quick JavaScript experiment. I would imagine that future updates will strip it back and optimise it even further, as opposed to adding features.

So to be clear, it is in no way intended as a replacement for the amazing projects out there such as HTML5 Boilerplate; simply an option if you need less rather than more in certain situations.

Now fork off and start making nice things…

Posted on 21 Mar 2011
14 Comments
5 Trackbacks

Meta

Introducing Springboard was posted on March 21st 2011 in the category Lab / Code, JavaScript, Lab, Open Source, Programming, Transmissions and tagged; , , , .

You can Leave a comment.


Warning: file_get_contents(http://search.twitter.com/search.atom?q=from:soulwire&rpp=1) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.0 401 Unauthorized in /home/soulwire/webapps/soulwire_blog/wp-content/themes/soulwire/functions.php on line 203

Discussion

4 Responses to Introducing Springboard

Leave a Reply

Pingbacks / Trackbacks

  1. 3 years ago xhtml css templates – Introducing Springboard › Minimal JavaScript / CSS / HTML Project … | XHTML CSS - Style sheet and html programming tutorial and guides

    [...] the rest here: Introducing Springboard › Minimal JavaScript / CSS / HTML Project … Share and [...]

  2. 2 years ago .net Awards 2011: the 10 sites of the year | What is ERP

    [...] and Flash. We also leveraged existing libraries; we used jQuery, Justin Windle’s Springboard template, Google Closure, Modernizr, SWFObject and Underscore, among others. For more info [...]

  3. 2 years ago .net Awards 2011: the 10 sites of the year | WORDPRESS PORTAL

    [...] and Flash. We also leveraged existent libraries; we used jQuery, Justin Windle’s Springboard template, Google Closure, Modernizr, SWFObject and Underscore, among others. For some-more info [...]

  1. Paul Irish 2 years ago

    Fan of your work, sir. :)

    We actually just moved to closure compiler recently: https://github.com/paulirish/html5-boilerplate/commit/3233fdeeec91555

    Reply to this comment