Install

How to install and setup Basecoat and its dependencies. Basecoat requires Primer, so it is highly recommended that you read the Primer docs before continuing.

Installation Methods

Install via Bower

$ bower install git@github.com:github/basecoat.git --save

This will install Primer, Octicons, and Basecoat to /bower_components. Copy the scss partials from Primer, Basecoat, and Octicons, to your site's scss folder. You need not copy primer.scss or basecoat.scss It's a good idea to keep the basecoat scss files together in their own folder within your site's scss folder for easier including. Copy the Octicon font files (ttf, woff, svg, eot) to your site's fonts folder.

Manual Install

  1. Install Primer
  2. Install Basecoat
  3. Install Octicons
    • Download the latest release of the Octicons. Copy octicons.scss to your site's scss folder. Copy the Octicon font files (ttf, woff, svg, eot) to your site's fonts folder. Don't forget to update the $octicons-font-path in octicons.scss to the correct location of the font files in your project.

Import all the things

Import SCSS files

@import the scss files into your project's main scss: 

//
// Import Octicons
//

@import "bower_components/octicons/octicons/octicons.css"; // SVG version coming soon :)

//
// Import Primer & Basecoat
//

// Global requirements
@import "bower_components/primer-css/scss/variables";
@import "bower_components/primer-css/scss/mixins";
@import "bower_components/basecoat/scss/scss/variables"; // Basecoat override
@import "bower_components/basecoat/scss/scss/mixins/mixins"; //Basecoat custom mixins

// Grid
@import "bower_components/basecoat/scss/scss/grid"; // Basecoat responsive grid classes

// Base styles
@import "bower_components/primer-css/scss/normalize";
// @import "bower_components/primer-css/scss/base"; // Basecoat's reboot handles this
@import "bower_components/basecoat/scss/scss/reboot";
// @import "bower_components/primer-css/scss/type";
// @import "bower_components/primer-css/scss/layout";
@import "bower_components/primer-css/scss/utilities/utilities";
@import "bower_components/basecoat/scss/scss/layout"; // Basecoat override
@import "bower_components/basecoat/scss/scss/type"; // Basecoat override
@import "bower_components/basecoat/scss/scss/utilities/utilities"; // Basecoat override and custom utils

// Forms and buttons
@import "bower_components/primer-css/scss/forms";
// @import "bower_components/primer-css/scss/form-select"; only use if you need the default product UI
// @import "bower_components/primer-css/scss/form-group"; only use if you need the default product UI
// @import "bower_components/primer-css/scss/buttons"; only use if you need the default product UI
// @import "bower_components/primer-css/scss/input-group"; only use if you need the default product UI
// @import "bower_components/primer-css/scss/button-group"; only use if you need the default product UI
@import "bower_components/basecoat/scss/scss/buttons"; // Basecoat override


// Components
// @import "bower_components/primer-css/scss/alerts"; only use if you need the default product UI
// @import "bower_components/primer-css/scss/avatars"; only use if you need the default product UI
// @import "bower_components/primer-css/scss/blankslate"; only use if you need the default product UI
// @import "bower_components/primer-css/scss/counter"; only use if you need the default product UI
// @import "bower_components/primer-css/scss/menu"; only use if you need the default product UI
// @import "bower_components/primer-css/scss/tabnav"; only use if you need the default product UI
// @import "bower_components/primer-css/scss/filter-list"; only use if you need the default product UI
// @import "bower_components/primer-css/scss/states"; only use if you need the default product UI
@import "bower_components/primer-css/scss/tooltips";
@import "bower_components/basecoat/scss/scss/animation";
@import "bower_components/basecoat/scss/scss/code";
@import "bower_components/basecoat/scss/scss/footer";
@import "bower_components/basecoat/scss/scss/icons";
@import "bower_components/basecoat/scss/scss/page-headers";
@import "bower_components/basecoat/scss/scss/navigation";
@import "bower_components/basecoat/scss/scss/section";
@import "bower_components/basecoat/scss/scss/tables";
@import "bower_components/basecoat/scss/scss/breadcrumb";

// Additional Primer Utilities
@import "bower_components/primer-css/scss/flex-table";
@import "bower_components/primer-css/scss/truncate";

//
// Your site specific SCSS imports
//

// @import "custom-variables" // Your variable overrides, if you need them
//
// ...