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.
Clone & Install Packages
Clone the project anywhere you like and then install the npm packages:
$ npm install
Gulp Tasks
To generate the styleguide and display it in the browser, run:
$ gulp serve
To generate the styleguide, display it in the browser, and rebuild/refresh as you develop, run:
$ gulp dev
To generate a production ready build of Blueprint, run:
$ gulp build
To deploy the latest version to Github Pages, First run gulp build, and then
run:
$ gulp deploy:gh-pages