This is the Surprise Highway starter project for front-end workflow and mockups. It features some sensible base styles and initial markup for building mockups.

• node_modules (Node dependencies installed with NPM)
• public (Public document root)
  • assets
    • components (Managed components installed with Bower)
    • css (CSS files generated by Gulp)
    • img (Frontend related images)
    • js (Javascript)
      • build (JS files generated by Gulp)
    • sass (SCSS files)
      • modules (Site specific styling)
    • vendor (Unmanaged third-party components)
  • mockups (Static HTML and PHP mockups)
    • assets (mockup related assets - not to be used in production)
• .bowerrc (Path to bower components)
• bower.json (Bower packages manifest)
• gulpfile.js (Gulp tasks and configuration)
• package.json (NPM packages manifest)
• README.md (Project README file)

This project uses Sass to process and compile CSS. Gulp is used to monitor files, run node-sass, minify css, concatenate and minify javascript, and enable the LiveReload browser plugin.

For developers that have not used Gulp before follow the first set of directions "Getting started with Gulp for the first time." If Node and Gulp have already been installed, please follow "Using Gulp with pre-existing projects." A short primer on creating a Gulp project from scratch is also included below.

1. Install Node if you don't already have it.

2. Install the Gulp package globally.

   $ sudo npm install gulp -g
   

3. Clone this repo locally.

4. CD to the project root.

5. Run $ sudo npm install to install each node package as defined in the project's packages.json dependency list.

6. Now, just run $ gulp to start watch tasks (defined in gulpfile.js).

7. Don't forget to activate your live reload browser extension.

1. Clone this repo locally and CD to the project root.
2. Run $ sudo npm install to install each node package as defined in the project's packages.json dependency list.
3. Run $ gulp to start watch tasks (defined in gulpfile.js). You're all set, get to work!
4. Don't forget to activate your live reload browser extension.

We're using Bourbon Neat for styling and layout. Boubon and Neat SASS components are imported at /public/assets/sass/styles.scss.

base-front-end.crudecode.com/mockups/

Static HTML mockups are placed in the public/mockups folder. The index file lists and links to all of the static mockup files.

PHP includes for the header, footer and any other partials that are reused across a number of mockups are in the _includes directory.

There are two sets of assets. One set of CSS, JS and image assets for production and development use; stored in the public/assets directory. And one for proof of concept demonstrations in public/mockups/assets; these are for quick and dirty experiments only. Do not use mockup assets within the production and development asset pipleline.

Ideally, the asset paths in the mockups are absolute (e.g. /assets/css/styles.css not ../assets/css/styles.css). We usually accomplish this by using MAMP or Vagrant to run a local virtual server.

Development: base-front-end.crudecode.com Password protected site for developer sandbox and QA.

Local: base-front-end.dev The bleeding edge hosted on developers' local machines using MAMP.

We use DeployHQ for code deployment.

DeployHQ watches the Git repository. When you push to the development or staging branches DeployHQ notices and automatically pushes those changes to the development and staging servers.

Production deployments are manually initiated using the DeployHQ website.