jQuery Plugin For Golden Ratio Web Grid Layout - StayGolden

StayGolden is a cool and interesting jQuery plugin that dynamically generates a responsive grid layout based on the Golden Ratio.

How to use it:

1. Create the html for your layout using div elements.

<div id="my-layout">
<div class="golden block-one"></div>
<div class="golden block-two"></div>
<div class="golden block-three"></div>
...
</div>

2. Load the jQuery javascript library and jQuery StayGolden plugin in the bottom of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="staygolden.js"></script> 

3. Call the plugin.

<script>
$(document).ready(function() {

$('#my-layout').fitToWindow();

// call the nifty golden ratio plugin after a short delay (for aesthetics)
$('#my-layout .golden').makeGolden({
delay: 250,
eachDone: function() {
console.log('done');
}
});
});

$(window).resize(function() {

$('#my-layout').fitToWindow();

//the golden ratio layout is made up of all squares, so keep it that way by setting height = width on window resize
$('#my-layout .golden').makeSquare();

});
</script>

4. Create your own CSS styles for the grid layout to meet your needs.

---

This awesome jQuery plugin is developed by hartz89. For more Advanced Usages, please check the demo page or visit the official website.