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.
Table of Contents
- Gulp Tasks
- Templates & Partials
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.
- Administrative rights to your work station. Please email email@example.com or your local IT department, to help you set this up if you are having a problem.
- Sass and Compass. See Getting Started with Sass and Compass.
- Node.js (Node). See https://nodejs.org/en/ and install the latest release recommend for most users.
- 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
Once your prerequisites are all taken care of, it is time to set up your work environment:
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.
Open your CLI and navigate to the root of
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:
Note: This process may take a couple of minutes to complete. The
tb-boilerplate-masterdirectory 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.
Now, navigate to `tb-boilerplate-master/company/your-site` and run the following command:
Note: Alternatively, you can use the shorthand command, `gulp`.
Please note that if you are running Gulp on the Mac, it may be necessary to append certain commands with the
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.
You should see the following after running Gulp in your CLI.
Success! A barebones site to begin working on! Way to go, Web slinger!
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:
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:
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 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:
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:
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!
Looking for resources, patterns, or more templates to use in your work? Head on over to our resource library right now!
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.