Skip to content
This repository
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 123 lines (105 sloc) 4.356 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122
<!DOCTYPE html>
<html>
<head>
    <title>Griddles</title>
    <!--[if (gte IE 9)|!(IE)]><!-->
    <link href='css/debug/griddles-mq.css' rel='stylesheet' type='text/css'>
    <!--<![endif]-->
    <!--[if lt IE 9]>
<link href='css/debug/griddles-no-mq.css' rel='stylesheet' type='text/css'>
<![endif]-->
    <style type='text/css'>
        .container {
            max-width: 70em;
            margin: 0 auto;
            padding: 10px;
            font-family: helvetica, sans;
        }
        .txt {
            height: 50px;
            background: #eee;
            text-align: center;
            line-height: 50px;
            text-shadow: 0 1px 1px #FFF;
            color: #ccc;
        }
        .txt:hover {
            background: #ccc;
            color: #717171;
        }
        .extra-div {
            height: 100px;
        }
        .s-show div {
            font-size: 15px;
        }
        .m-show div {
            font-size: 20px;
        }
        .l-show div {
            font-size: 25px;
        }
        .xl-show div {
            font-size: 30px;
        }
        .xxl-show div {
            font-size: 35px;
        }

    </style>
</head>
<body>
<div class="container">
    <header>
       <h1>Griddles</h1>
    </header>
    <h2>Standard Examples</h2>

    <p>Here's a selection of the standard classes applied to create various divisions of content</p>
    <div class="grid gutter standard-examples">
        <div class="g-1/3"><div class="txt">.g-1/3</div></div>
        <div class="g-1/3"><div class="txt">.g-1/3</div></div>
        <div class="g-1/3"><div class="txt">.g-1/3</div></div>
        <div class="g-1/3"><div class="txt">.g-1/3</div></div>
        <div class="g-2/3"><div class="txt">.g-2/3</div></div>
        <div class="g-10"><div class="txt">.g-10</div></div>
        <div class="g-20"><div class="txt">.g-20</div></div>
        <div class="g-30"><div class="txt">.g-30</div></div>
        <div class="g-40"><div class="txt">.g-40</div></div>

        <div class="g-50"><div class="txt">.g-50</div></div>
        <div class="g-50"><div class="txt">.g-50</div></div>

        <div class="g-40"><div class="txt">.g-40</div></div>
        <div class="g-60"><div class="txt">.g-60</div></div>

        <div class="g-30"><div class="txt">.g-30</div></div>
        <div class="g-70"><div class="txt">.g-70</div></div>

        <div class="g-5"><div class="txt">.g-5</div></div>
        <div class="g-95"><div class="txt">.g-95</div></div>

        <div class="g-25"><div class="txt">.g-25</div></div>
        <div class="g-25"><div class="txt">.g-25</div></div>
        <div class="g-25"><div class="txt">.g-25</div></div>
        <div class="g-25"><div class="txt">.g-25</div></div>
    </div>


    <h2>Break-point overrides</h2>

    <p>A common problem with responsive grids is knowing what will happen at a given breakpoint. To make this easier griddles provides classes to make it clear to the author what will happen at a given breakpoint</p>

    <div class="grid gutter mobile-examples">
        <div class="g-25 s-g-50 m-g-1/3"><div class="txt">.g-25 .s-g-50 .m-g-1/3</div></div>
        <div class="g-25 s-g-50 m-g-1/3"><div class="txt">.g-25 .s-g-50 .m-g-1/3</div></div>
        <div class="g-25 s-g-50 m-g-1/3"><div class="txt">.g-25 .s-g-50 .m-g-1/3</div></div>
        <div class="g-25 s-g-50 m-g-1/3"><div class="txt">.g-25 .s-g-50 .m-g-1/3</div></div>
    </div>

    <p>Show only current breakpoint(s)</p>

    <div class="grid gutter breakpoint-examples">
        <div class="g-100 g-hide s-show"><div class="txt">S</div></div>
        <div class="g-100 g-hide m-show"><div class="txt">M</div></div>
        <div class="g-100 g-hide l-show"><div class="txt">L</div></div>
        <div class="g-100 g-hide xl-show"><div class="txt">XL</div></div>
        <div class="g-100 g-hide xxl-show"><div class="txt">XXL</div></div>
    </div>

    <p>Hide something on smaller screens, but keeping them in flow</p>

    <div class="grid gutter breakpoint-examples">
        <div class="g-25"><div class="txt">.g-25</div></div>
        <div class="g-25 s-invisible m-invisible"><div class="txt">.g-25 .s-hidden .m-hidden</div></div>
        <div class="g-25"><div class="txt">.g-25</div></div>
        <div class="g-25"><div class="txt">.g-25</div></div>
    </div>

</div>
</body>
</html>

Something went wrong with that request. Please try again.