⬅

Contribute

Browser Support

The Bluprnt Framework will support the following browsers:

  • IE 10, 11
  • Edge
  • Safari
  • Chrome
  • Firefox
  • Android 5+
  • iOS 10+

Directory Structure

This framework follows loosely the ITCSS methodology. Creating very general global reaching styles and narrowing down to specific components.

  • 1-Settings - Global variables (brand color, font, etc).
  • 2-Tools - These include all the mixins and functions.
  • 3-Generic - These include CSS resets, normalize, box sizing, etc.
  • 4-Elements - These are element styles — no classes or IDs. Base typography styles go here, as well as anything needed to style raw elements.
  • 5-Objects - This layer is mostly layout-driven, and doesn’t include anything cosmetic. These might include your grid, or your media object.
  • 6-Components - Contains fully styled UI components. (Pretty much most of your work will go here)
  • 7-Utils - High-specificity, usually single-rule utility classes, which have !important on the end because they actually are.

Working on Bluprnt

Tools Used

In order to setup everything you need, follow our Dev Environment Setup Guide

  • Gulp - Does Gulpy things.
  • Jekyll - Powers the styleguide.
  • Browsersync - Browser refresh magic.
  • Node/NPM - Package and dependency management.
  • EditorConfig - Helps us keep consistent editor settings.
  • CSSComb - Keeps CSS clean and purty.
  • SCSS Lint - Keeps us coding to our Sass/CSS standards outlined in the .
  • JS Lint/Hint - Keeps us coding to our JavaScript standards outlined in the .
  • Flexbox - Grid system is built with flexbox.

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 marketingweb@bluebeam.com 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

NPM 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

Deploying the Bluprnt Website/Workshop

To deploy the latest version to Netlify, make sure you ran npm run build for a clean prod ready build, and then 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