article:
JS Plugin: Simple Modal - another window modal
article:
Elements Design: 2400 Flag Icon Set

JS Plugin: Grid-A-Licious version 3.01

Advertisement

"I have for you a responsive grid layout system that adapts beautifully to different screens (from desktop to mobile). It is fluid and floats perfectly regardless the width of the viewpoint."


Implementation

HEAD

<meta content="width=device-width, initial-scale=1.0" name="viewport" />

BODY

<div class="example">
    <div id="example1">
        <div class="item"><div>...</div></div>
        <div class="item"><div>Ut asdsade.</div></div>
        <div class="item"><div>itur.</div></div>
        <div class="item"><div>Dasdasmdhaj hajsdoat.</div></div>
        <div class="item"><div>Wxercquinsequat.</div></div>
        <div class="item"><div>Quisnsequat.</div></div>
        <div class="item"><div>Lorem odo consequat.</div></div>
        <div class="item"><div>Ut enim</div></div>
        <div class="item"><div>Lorem ctetur.</div></div>
        <div class="item"><div>Dolor snsequat.</div></div>
        <div class="item"><div>Wxeat.</div></div>
        <div class="item"><div>Quis at.</div></div>
        <div class="item"><div>Lored do.</div></div>
        <div class="item"><div>Ut t.</div></div>
    </div>
</div>


<script src="jquery.grid-a-licious.js"></script>


javascript code

<script type="text/javascript">
    $(document).ready(function () {
        // example
        $("#example").gridalicious({
            width: 100
        });
    });
</script>


other sample

<script type="text/javascript">
    $(document).ready(function () {
        // example
        $("#example").gridalicious({
            gutter: 1,
            width: 75,
            animate: true,
            animationOptions: {
                    speed: 200,
                    duration: 300,
                    complete: onComplete
            },
        });
    });
</script>



Sample

Example 01: This example uses a custom width and the default gutter 20px

Plugin: Grid-A-Licious

$("#example1").gridalicious({
  width: 50
});

Example 02: This example uses custom width and gutter

Plugin: Grid-A-Licious

$("#example2").gridalicious({
  gutter: 1,
  width: 100
});

Example 03: Prepending and appending items

Plugin: Grid-A-Licious

$("#example3").gridalicious({
  gutter: 1, 
  width: 75, 
  animate: true, 
  animationOptions: { 
    speed: 200, 
    duration: 300, 
    complete: 
    onComplete
    },
});

Prepend and Append buttons

$('#prepend').click(function(){
  $("#example3").gridalicious('prepend', makeboxes());
});
$('#append').click(function(){
  $("#example3").gridalicious('append', makeboxes());
});


source
demo
github
download

Advertisement
Tags: plugin, jquery, responsive, layout, develop, width, height

Leave a Comment

No Comment

© Creative3x Ltd.