Setting up a new project

This manual is intended for designers and developers with the Basic required knowledge to setup a new project.

To do what is described in this manual, please make sure your system is setup correctly, as described in Setting up your computer.

Initial project

Step 1. Download project scaffold from Github

1. Download zip from: https://github.com/Patternslib/project-scaffold/archive/master.zip
2. Unzip
3. Rename the folder ‘project-scaffold’ to anything you like
4. Open the project folder in a terminal window and enter: sudo gem install bundler. Enter your system password when asked for it.
5. Enter bundle install --path .bundle

You should now have a working Jekyll installed for this project.

Step 2. Installing required libraries into your project

The scaffold project has a system in place that can download or update from the latest Patterns version for you. You can easily configure the system so that it only installs the Patterns you need.

1. Open the project folder in a terminal window and enter: make bundle. You will need to run this command only once. It downloads the Patterns library all the libraries it depends on from patternslib.com and installs it into your project.

2. After a successful install, run jekyll by entering: bundle exec jekyll serve and you can view your prototype by entering localhost:4000 into your browser address bar.

You’re in business!

---

*Should the process end with a message that includes getaddrinfo ENOTFOUND, then one or more libraries were not downloaded, most likely due to a network problem. Just run make bundle again until you don’t see this error anymore.

You don’t need make bundle each time you want to run the prototype. To just run the prototype if you have already gone through the steps above, just enter bundle exec jekyll serve --watch --baseurl "" --incremental.

Selecting stock interaction patterns

The base install includes the full Patterns library. This perfect for creating an initial concept design, but you might want to more precisely select which Patterns should go into your bundle so that the JavaScript file doesn’t get to large.

1. Open your editor and find and open the file /bundle-config.js. In there you’ll find a list of all available Patterns. You may deselect Patterns which you don’t need by prefixing the respective line in the file with // . Here’s an example:

    // You can out comment from these if you don’t need them
    “pat-ajax”,
    “pat-autofocus”,
    “pat-autoscale”,
    // “pat-autosubmit”,
    “pat-autosuggest”,
    …

In the example above, the Pattern ‘Auto submitis not desired and by commenting it out also excluded from the bundle. 2. Run the commandmake bundle` in your project folder. Your existing bundle should now be updated with the newest settings.

The above explains how to select and deselect stock Patterns. To add your own Patterns, consult the topic 'Custom Patterns'.