User Contributed Examples

All bower packages are not created equally. If you find a solution to bringing compatibility to a particular package: post it here!

swipebox

TODO

masonry

In your main bower.js file, add this into overrides:

"masonry": {
  "main": [
    "./dist/masonry.pkgd.js"
  ]
}

Place exclude in your manifest.json file to not load masonry dependencies twice:

"dependencies": {
  "main.js": {
    "files": [
      "scripts/main.js"
    ],
  "main": true,
  "exclude": {
    "bower": ["outlayer", "doc-ready", "fizzy-ui-utils", "get-style-property", "get-size", "matches-selector", "eventEmitter", "eventie"]
  }
},

Also, be sure that you pass a numerical value to columnWidth in the jquery call:

$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: 35
});

prism.js

In your main bower.json file, add this to the overrides:

"prism" {
  "main": [
    "./prism.js",
    "./themes/prism.css"
  ]
}

Note that ./themes/prism.css will be whatever theme you'd like to use via the default themes available listed here.

Next, in your manifest.json file, add this to your dependencies:

"prism.js": {
  "bower": ["prism"]
},
"prism.css": {
  "bower": ["prism"]
}
```

## Waypoints.js

Waypoints uses shortcuts for some of its cool features. After MUCH help from the Roots forum :-) here's the way to add the shortcuts into your main.js - this goes in your bower.json overrides (including whichever shortcuts you require):

````json
"waypoints": {
  "main": [
    "./lib/jquery.waypoints.js",
    "./lib/shortcuts/sticky.js",
    "./lib/shortcuts/inview.js"
  ]
}
```


## Flickity.js


````json
"flickity": {
  "main": [
    "./dist/flickity.pkgd.js",
    "./dist/flickity.min.css"
  ]
}
```


## imagesLoaded

In your main `bower.json` file, add this to the overrides:

````json
"imagesloaded": {
  "main": [
    "./imagesloaded.pkgd.js"
  ]
}
```

## isotope

In your main `bower.json` file, add this to the overrides:
````json
"isotope": {
  "main": ["./dist/isotope.pkgd.min.js"],
  "dependencies": {}
}

packery

In your main bower.json file, add this to the overrides:

"packery": {
  "main": [
    "js/rect.js",
    "js/packer.js",
    "js/item.js",
    "js/packery.js"
  ]
}