The Bluprnt Framework will support the following browsers:
- IE 10, 11
- Android 5+
- iOS 10+
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
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
- 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
firstname.lastname@example.org 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
nvm to manage versions.
$ 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.
$ 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