TalentBrew Boilerplate

Last Updated: 12/30/2017

This project is a simple, barebones boilerplate that is set up with a similar configuration to our TalentBrew environment. This boilerplate will allow you to work locally on the design and certain functional aspects of a TalentBrew project.

View Repo Download Repo

Table of Contents

Prerequisites

You will need the following prerequisites before you can begin using this boilerplate. It is assumed that this is a clean install of prerequisites. If you are set up and have them installed already, then you may jump down to Setup.

  1. Administrative rights to your work station. Please email support@tmp.com or your local IT department, to help you set this up if you are having a problem.
  2. Sass and Compass. See Getting Started with Sass and Compass.
  3. Node.js (Node). See https://nodejs.org/en/ and install the latest release recommend for most users.
  4. Gulp. After installing Node, open your command line interface (CLI) and run the following directive to install Gulp globally on your computer:
npm install gulp -g

Setup

Once your prerequisites are all taken care of, it is time to set up your work environment:

  1. Download and extract the contents of this repository to your computer. You should now have a directory called tb-boilerplate-master. You may rename this directory and place it anywhere on your computer, but for now, we will stick with the default names.

  2. Open your CLI and navigate to the root of tb-boilerplate-master.

  3. When you arrive at this destination, the first thing to do is install any needed Gulp dependencies referenced in package.json. To do this, simply run the following command:

    npm install

    Note: This process may take a couple of minutes to complete. The tb-boilerplate-master directory should now contain a new directory called, node_modules. It is worth mentioning that this directory is typically very large and should never be committed to any versioning system, like Git or P4.

  4. Now, navigate to `tb-boilerplate-master/company/your-site` and run the following command:

    gulp watch

    Note: Alternatively, you can use the shorthand command, `gulp`.

    Permissions

    Please note that if you are running Gulp on the Mac, it may be necessary to append certain commands with the sudo keyword.

    At this point, Gulp will spin up an internal server for you and immediately start watching for changes. You may now begin creating your site.

    Larger version of CLI screen shot

    You should see the following after running Gulp in your CLI.

    Larger version of Desktop screen shot

    Success! A barebones site to begin working on! Way to go, Web slinger!

Gulp Tasks

Gulp is capable of performing many useful tasks for us. The following utilities are available to use and more will be added in the future:

Accessibility

If you wish to test your work for accessibility issues, which is always a great idea, the aXe-core accessibility checker is available for use. The Gulp command to run this task is:

gulp axe

HTML Validation

If you wish to test your work for HTML validation issues, you may run it seperately within your direcory. The Gulp command to run this task is:

gulp validate

Image Optimization

Gulp will optimize your images and place them in tb-boilerplate-master/company/your-site/optimized-images. You may upload these optimized image to TalentBrew as you normally would. The Gulp command to run this task is:

gulp optimize

All task commands should be run in the tb-boilerplate-master/company/your-site directory. If you are on a Mac, you may need to prepend “sudo” to allow file access privelages.

Templates & Partials

With Gulp, we now have the ability to break up our HTML into templates and partials using Nunjucks. You may add partials to any of the following directories:

  • custom-html
  • forms
  • modules
  • pages
  • templates

Please note that all root level sub folders and pages must be added to the pages directory. An example of how to pull in partials can be found in the index page. It is pretty self-explanatory, but please don’t hesitate to ask for help if you need it!

Resource Library

Looking for resources, patterns, or more templates to use in your work? Head on over to our resource library right now!

Support

If you have any questions, please open an issue or contact michael.spellacy@tmp.com.

Return to Table of Contents

Contributors

The TMP Worldwide UID Team

If you wish to contribute, fork this project, make some changes, and create a pull request.

New to GitHub? Learn the basics with the guide and learn the GitHub flow.

Quality Assurance and Accessibility

All patterns, layouts, and functionality are tested against our supported browsers. We also look for accessibility issues via automated and manual testing tools. TMP is committed to the accessibility of its websites and products and strives to meet as much of WCAG 2.0 Level AA as possible. If you discover any problems with our work, please open up an issue and let us know about it or contact Michael Spellacy.

Contact Us Back to top