Bluprnt

Bluprnt is the front-end framework for Bluebeam.

Visit the styleguide for usage info.

Netlify Setup (Only have to do this once)

The bluprnt site is hosted on Netlify. Make sure you are logged in at Netlify.com with the [e-mail] account and you have the netlify CLI installed on your machine.

To install Netlify CLI, make sure you have Node.js version 10 or later, then run this command from any directory in your terminal: npm install netlify-cli -g

Then, login through the command line with netlify login. This will open the browser and ask you to authorize your token. You only have to do this once.

Clone & Install Packages (Only have to do this once)

Clone the project anywhere you like then cd into your project.

Make sure you have the correct local versions of Node and Ruby for this project. This assumes you have followed the bluebeam marketing dev environment setup guide and have both rbenv and nvm to manage versions.

Node: v10.22.0 Ruby: 2.3.1

$ nvm use 10.22.0
$ rbenv local 2.3.1

For help to install or manage versions, run nvm help or rbenv help for a list of available commands.

Install dependencies

$ npm install
$ bundle install

Build & Dev Scripts

These commands run gulp tasks, we just use npm scripts to keep everything simple to remember.

To generate the styleguide and display it in the browser, run:

$ npm run serve

To generate the styleguide, display it in the browser, and rebuild/refresh as you develop, run:

$ npm run dev

To generate a production ready build of Blueprint and the website, run:

$ npm run build

The Standard NPM Package Release Process

Here are the steps for publishing a new version of a Bluprnt npm package.

Safety Checks:

git pull origin master
git status

Prepare the Release:

npm run build

Update the Version Number:

Running these commands uses the handy npm version command in the background. This will automatically update the version number in package.json and package-lock.json. It will also create a version commit and a new Git tag.

You’ll need to tell npm what type of release this is by specifying a valid semantic versioning type, such as major, minor, or patch. Then npm will update the appropriate part of your version number:

• For a Patch release: npm run release:patch
• For a Minor release: npm run release:minor
• For a Major release: npm run release:major

• Patch: is incremented when you add backward compatible bug fixes (patch makes v0.1.0 → v0.1.1)
• Minor: is incremented when you add backward compatible functionality (minor makes v0.1.0 → v0.2.0)
• Major: is incremented when you add breaking changes, e.g. an incompatible API change (major makes v0.0.0 → v1.0.0)

Publish release to NPM:

npm publish

Create a GitHub Release (optional)

Deploying the Bluprnt Website/Workshop

Make sure you have pushed the new NPM package first before you deploy the website. To deploy the latest version to Netlify, run:

$ npm run deploy:dev

This will deploy to dev and provide you a link to preview it. When you are ready to deploy to production, run:

$ npm run deploy:prod