Create a Bourbon Project - Surfing-Chef/Bourbon GitHub Wiki

###Create a Bourbon Project ####Setting up Bourbon, Bitters and Neat

####Folders and File Structure

  • Navigate the terminal path into the 0-plugins folder and install bourbon, bitters and neat:
>bourbon install
Bourbon files installed to bourbon/

>bitters install
Bitters files installed to base/base

>neat install
Neat files installed to neat/

>
  • Create a new file in the 0-plugins directory called _dir-plugins.scss and import the installed plugins:
@import "bourbon/bourbon";
@import "neat/neat";
@import "normalize";
@import "base/base";      // bitters
  • Copy and paste the latest normalize CSS from here into a new file called _normalize.scss, created within the 0-plugins directory.
  • Add a directory scss file to each of the folders in the app folder.
  • File structure looks like this:
>app
  >0-plugins
      >0-plugins
      >1-base
      >2-bourbon
      >3-neat
      _dir-plugins.scss
      normalize.scss
  >1-base
      _dir-base.scss
  >2-modules
      _dir-modules.scss
  >3-layouts
      _dir-layouts.scss
  style.scss
  • Append the following SCSS to the styles.scss file in root of the sass folder - or copy and paste from here, replacing the the entire content:
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Plugins

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/
@import "0-plugins/dir-plugins";
@import "1-base/dir-base";
@import "2-modules/dir-modules";
@import "3-layouts/dir-layouts";