An easy way to position and size a 'hero unit' for the plethora of devices we web developers need to support these days
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
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')
});
Contributions and pull requests are very welcome. Please follow these guidelines when submitting new code.
npm install -g grunt
for Grunt
brew install phantomjs
for PhantomJS
npm install
to install dependenciesgrunt
(compiles coffeescripts and runs tests)grunt watch
while editing files to auto-compile coffeescripts and run testsgrunt jasmine
to see if tests fail.grunt
to compile new dist and make sure nothing is broken