demo/index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jels Demo</title>
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="../jels-v.01.js"></script>

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

        $(".tesitmonial").jels("350, 500");

    })
    </script>

    <style>

        .tesitmonial.jels-500 .quote {
            font-size: 26px;
            color: #041b4e;
        }
        .tesitmonial.jels-500 .media img {
            width: 90px;
        }
        .tesitmonial.jels-500 .media h3 {
            font-size: 18px;
            padding-top: 5px;
        }

        .tesitmonial.jels-350 .quote {
            font-size: 20px;
            color: orange;
            margin-bottom: 10px;
        }
        .tesitmonial.jels-350 .media img {
            width: 50px;
        }
        .tesitmonial.jels-350 .media h3 {
            font-size: 14px;
            color: #999;
            padding-top: 0;
        }

    </style>


</head>
<body>

<div id="intro">
    <h1>Jels Demo</h1>
    <p>Jels measures the widths of specified elements and adds classes if there's a match in the breakpoints passed into the function.</p>
    <p>In this case the <code>.testimonials</code> class is targeted and responds to new css as the window size changes below the breakpoint thresholds.</p>


</div>

<div id="boxes">
    <div class="tesitmonial">
        <p class="quote">“This is the greatest product I've ever used. I'm not sure how I got by without it.”</p>
        <div class="media">
            <img src="i/who.png" />
            <div class="data">
                <h3>Dr. Who</h3>
                <p class="credit">Solver of Mysteries</p>
            </div>
        </div>
    </div>

    <div class="tesitmonial">
        <p class="quote">Hulk learn to meditate. Hulk super happy with new life. Very calm, cool, and collected.”</p>
        <div class="media">
            <img src="i/hulk.png" />
            <div class="data">
                <h3>The Hulk</h3>
                <p class="credit">Smasher of Things</p>
            </div>
        </div>
    </div>

</div>

</body>
</html>