Frontend Prototyper

##Proof of Concept A Pattern Lab implementation to demonstrate the Design in Browser workflow.

###Clone Git branch and build Pattern Lab

$ git clone [email protected]:e2tha-e/frontend-prototyper-poc.git
$ cd frontend-prototyper-poc/patternlab-php
$ php core/builder.php -g

###Install Bundler (if necessary)

$ gem install bundler

###Configure this Bundler instance

$ cd source
$ cp ../../config.rb . # Configuration for Compass
$ bundle init
$ echo "gem 'toolkit'" >> Gemfile

Toolkit is at version 2.5.0 as of this writing. If this or another version of Toolkit needs to be specified in the future, run the following:

$ echo "gem 'toolkit', 'x.x.x'" >> Gemfile

Note: ">" refers to all versions of the given gem on the current full version number, so "gem 'toolkit', '>2.5.0'" will be able to use any version of Toolkit between 2.5.0 (inclusive) and 3.0.0. Ruby is notorious for damning users to dependency hell. That is why we are just copying config.rb rather than running compass create! ###Install this Bundler instance

$ bundle install

###Copy JavaScripts

$ cp ../../package.json . # Configuration file for Node modules
$ cp ../../Gruntfile.js . # Configuration file for Grunt
$ cp ../../fep.js js      # Namespace for custom JavaScripts

###Install Node modules (and Node if necessary)

$ npm install

###Launch Grunt

$ bundle exec grunt

###Launch Pattern Lab in browser

• In a file browser, navigate to workspace/frontend-prototyper-poc/patternlab-php/public
• Double-click index.html

Grunt should be running the watching and auto-reloading tasks. Changes to the code should be immediately viewable in the browser on save.