joshfry/assemble-bp

Renamed "boilerplate" to "assemble-bp" to keep consistent with Yeoman generator.

Boilerplate

A front-end tool for generating static sites with Grunt, Assemble, Bower, Sass, Bourbon, Bourbon Neat and Bourbon Bitters.

This is my personal starting point for new projects... totally meant to be customized.

Requirements

• Ruby - Install with rbenv
  • Rake gem install rake
• Node OSX v0.10.24
• NPM v1.3.11

Ubuntu Users

• http://ariejan.net/2011/10/24/installing-node-js-and-npm-on-ubuntu-debian/
• https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager#wiki-ubuntu-mint-elementary-os

One-time Setup

$ rake init

• Installs Grunt CLI
• Installs Bower CLI

Install

$ rake

• Installs Ruby Gems to /vendor/ruby
• Installs Bower packages to /vendor/bower
• Installs npm modules to /node_modules

Grunt commands

Development

$ grunt dev

• Creates web server at http://localhost:8000
• Livereloads browser on save
• Static site generator via assemble

Production

$ grunt build

To view production build:

$ grunt p

If you get an error after running $ grunt dev that says EMFILE: too many open files,
add ulimit -n 9999 to your .bash_profile.

---

What's goin' on here?

Grunt: Automation

Development tasks

• Local server @ http://localhost:8000
• Watch task
• Livereload (without browser extension)
• Sass compiling
• JS concatenation
• JS hinting
• Assemble, for static site generation
• Clean and Copy commands
• Outputs to dist/ directory

Production tasks

• Image compression
• Concatenate and minify linked files
• Outputs to build/ directory

Bower: Package manager

Default packages

• jQuery
• mfglabs icon font
• Bourbon (Sass mixin library)
• Bourbon Neat (Sass grid framework)

Install new packages

$ bower install <git repo> --save

--save adds the package to bower.json so that when $ bower install is run, the package will be installed.

assemble-bp's Issues

Use libsass to remove ruby dependency

Fix jquery link

jQuery updated repo and jquery link no longer the same

Use calc() instead of multiple containers

// Instead of using multiple containers, just use the css calc() unit

img.full-bleed {
  display: block;

  @include media(max-width 599px) {
    max-width: none;
    width: -webkit-calc(100% + 3em);
    width: calc(100% + 3em);
    margin-left: -1.5em;
  }
}

Custom config

• Rename site.yml to default-settings.yml
• Make a custom-settings.yml file
• Include both files in grunt.initConfig

This will allow default settings that can be overridden by the user

Visual Grid

It's possibile to show visual-grid of Bourboun Neat?

thanks