jQuery Plugin For Golden Ratio Web Grid Layout - StayGolden

File Size: 6.26KB
Views Total: 2005
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.