gistfile1.md

##setup git clone [email protected]:micahgodbolt/sassbitesdemo.git && cd sassbitesdemo

npm install

##bundler

gem install bundler

bundle init

###update gem list in Gemfile

gem "compass"
gem "susy"
gem "breakpoint"
gem "hologram"
gem "sass-globbing"

Update compass to use bundle exec

compass: {
  options: {
    sassDir: 'sass',
    cssDir: 'build/css',
    bundleExec: true,
  },
  dev: {
    options: {
      environment: 'development',
      outputStyle: 'expanded',
    }
  },
  dist: {
    options: {
      environment: 'production',
      outputStyle: 'compact',
    }
  },
},

##bower npm install -g bower (so that we can init and add)

npm install bower --save-dev (so that others don't need global dependancy)

bower init (to walk through bower.json setup)

##npm bower

npm install grunt-bower-task --save-dev

###set up the bower configuration in gruntfile.js

bower: {
  install: {
    options: {
      targetDir: './lib',
      cleanBowerDir: true,
    }
  }
},

load module into grunt

grunt.loadNpmTasks('grunt-bower-task');

register task in default

grunt.registerTask('default', [
  'bower',
  'compass:dev',
  'includes',
  'connect',
  'watch'
]);

##shell

npm install grunt-shell --save-dev

add shell options

shell: {
  bundler: {
    command: 'bundle --path lib'
  }
},

load module into grunt

grunt.loadNpmTasks('grunt-shell');

###add task to default

grunt.registerTask('default', [
  'shell:bundler',
  'bower',
  'compass:dev',
  'includes',
  'connect',
  'watch'
]);

##extra modules

npm install grunt-hologram --save-dev

bower install Cortana --save-dev

bower install eq.js --save-dev

##Configuring Hologram

mkdir hologram && cd hologram hologram init

###Configure yml file

# Directory to parse
source: ../sass/

# Directory to build the styleguide
destination: ../build/styleguide

# Hologram theme
documentation_assets: ../lib/Cortana
custom_markdown: ../lib/Cortana/CortanaMarkdownRenderer.rb

dependencies:


# To have a custom index page build with your README.md
index: README

# List all css to include for the styleguide render examples (path from styleguide directory)
css_include:
  - ../css/style.css

# List all js to include for the styleguide render examples (path from styleguide directory)
js_include:
  - 'http://code.jquery.com/jquery-1.10.2.min.js'

# String who is used to split the category name and create category wrapper
name_scope: ' - '

###Configure Grunt settings

hologram: {
  generate: {
    options: {
      config: './hologram/hologram_config.yml'
    }
  }
},

Load module into grunt

grunt.loadNpmTasks('grunt-hologram');

Drop in a hologram doc block and compile all the things!

  /*doc
    ---
    title: Div
    name: Div
    category: Base Div
    ---
    
    My divs are crazy!
    
    ```html_example
    <div>This is my crazy div</div>
    <div>This one is crazy too</div>
    ```
  */

ignore all the things