zamiang / jquery.herounit

jQuery plugin to auto position and size a 'hero unit' for different hero and display sizes

jQuery.herounit

An easy way to position and size a 'hero unit' for the plethora of devices we web developers need to support these days. Used in production at Artsy http://artsy.net/design-miami

jQuery.herounit ensures that your image will not be distorted while being vertically centered and flush to the edges of its container.

See this example using Placekitten

Usage

Download the production version (2.6kb) or the development version.

Include required Javascripts

<script src="jquery.js"></script>
<script src="dist/herounit.min.js"></script>

Create html like this

  <div id="hero_unit">
    <img src="heroic/img.jpg" />
  </div>

Apply the herounit plugin

$('#hero_unit').herounit({
  'height': 400,
  '$img'  : $('#hero_unit img')
});

Contributing

Contributions and pull requests are very welcome. Please follow these guidelines when submitting new code.

Modifying the code

1. Fork and clone the repo.
2. If needed: npm install -g grunt for Grunt
3. If needed: brew install phantomjs for PhantomJS
4. Run npm install to install dependencies
5. Run grunt (compiles coffeescripts and runs tests)
6. Run grunt watch while editing files to auto-compile coffeescripts and run tests
7. Make all changes in Coffeescript files, not JavaScript files.

Submitting pull requests

1. Add tests for the change you want to make. Run grunt jasmine to see if tests fail.
2. Run grunt to compile new dist and make sure nothing is broken
3. Submit a Pull Request using GitHub.