<commit_before>{{setTitle     "YUI Responsive Grids"}}
{{setSubTitle  "A fully-customizable responsive grid"}}
{{setActiveNav "grids"}}

{{addCdnCSS yui.version "cssgrids-responsive"}}
{{addGithubCSS "tilomitra" "csstables" "master/css/tables.css"}}

{{> header}}


<div class="content">


    <h2 class='yui3-u-1'>Include the CSS on your page</h2>

    <p>You can pull down Responsive Grids from the YUI CDN. Just include this script in your <code>&lt;head&gt;</code>.</p>

    {{#code}}
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/{{yui.version}}/build/cssgrids-responsive/cssgrids-responsive-min.css">
    {{/code}}

    <div class="notification">
        <p>Optionally, you can head over to the <a href="http://yui.github.com/gridbuilder/">GridBuilder</a> to make your very own custom grid. Save the outputted CSS in a file and you're good to go!</p>
    </div>

    <h2 class="content-subhead">How do YUI Grids work?</h2>

    <p>YUI3 Grids are very easy to work with. Consider <code>yui3-g</code> to be a row or "grid", and <code>yui3-u-*</code> to be columns, or "units". Each <code>yui3-g</code> can contain many units. Units have various class names that represent their widths. For example, <code>.yui3-u-1-2</code> has a width of 50%, whereas <code>.yui3-u-1-5</code> would have a width of 20%.</p>

    <p>The only constraints for YUI3 Grids are that all "units" are children of a "grid". All you need to do is define a grid, one or more units inside it, and specify widths for them. Then stack and nest as required. Here's an example of a grid with three columns:</p>

    {{#code}}

        {{> grids/intro}}

    {{/code}}

    <div class="notification">
        <p>For a more detailed guide, check out the <a href="http://yuilibrary.com/yui/docs/cssgrids/">CSS Grids documentation</a> on YUILibrary.</p>
    </div>

    <h2 class="content-subhead">How do responsive grids work?</h2>

    <p>YUI3 Responsive Grids builds on top of the existing YUI3 Grids implementation. It adds a single new class name called <code>.yui3-g-r</code> (the "r" stands for responsive, you see). You can use this instead of using <code>.yui3-g</code> as you normally do. All elements with a class name of <code>.yui3-g-*-*</code> will automatically become responsive if they are direct descendents of a <code>.yui3-g-r.</code></p>


    <h2 class="content-subhead">The HTML</h2>

    <p>The first gist shows how regular YUI3 grids are written. These grids are unresponsive. They'll always be one-thirds irrespective of the width of the screen. The second gist replaces the <code>.yui3-g</code> with <code>.yui3-g-r</code>, thereby making the one-third columns collapse to full width on lower screen widths.</p>


    <h2 class="content-subhead">Features</h2>

    <ul class="content-spaced">
        <li>Adds configurable media queries for different screen widths (Desktops, Landscape Tablets, Portrait Tablets, Phones)</li>
        <li>Collapses elements to 100% if smaller than a certain width (767px by default)</li>
        <li>Adjusts images to fit on smaller screens</li>
        <li>Works with as many columns as you want (or as few)</li>
        <li>Configure prefixes (as we've done on this page)</li>
    </ul><commit_msg>use {{code}} helper for inline code blocks<commit_after>{{setTitle     "YUI Responsive Grids"}}
{{setSubTitle  "A fully-customizable responsive grid"}}
{{setActiveNav "grids"}}

{{addCdnCSS yui.version "cssgrids-responsive"}}
{{addGithubCSS "tilomitra" "csstables" "master/css/tables.css"}}

{{> header}}


<div class="content">


    <h2 class='yui3-u-1'>Include the CSS on your page</h2>

    <p>You can pull down Responsive Grids from the YUI CDN. Just include this script in your <code>&lt;head&gt;</code>.</p>

    {{#code}}
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/{{yui.version}}/build/cssgrids-responsive/cssgrids-responsive-min.css">
    {{/code}}

    <aside>
        <p>Optionally, you can head over to the <a href="http://yui.github.com/gridbuilder/">GridBuilder</a> to make your very own custom grid. Save the outputted CSS in a file and you're good to go!</p>
    </aside>

    <h2 class="content-subhead">How do YUI Grids work?</h2>

    <p>YUI3 Grids are very easy to work with. Consider <code>yui3-g</code> to be a row or "grid", and {{code "yui3-u-*"}} to be columns, or "units". Each {{code "yui3-g"}} can contain many units. Units have various class names that represent their widths. For example, {{code "yui3-u-1-2"}} has a width of 50%, whereas {{code "yui3-u-1-5"}} would have a width of 20%.</p>

    <p>The only constraints for YUI3 Grids are that all "units" are children of a "grid". All you need to do is define a grid, one or more units inside it, and specify widths for them. Then stack and nest as required. Here's an example of a grid with three columns:</p>

    {{#code}}
    {{> grids/intro}}
    {{/code}}

    <aside>
        <p>For a more detailed guide, check out the <a href="http://yuilibrary.com/yui/docs/cssgrids/">CSS Grids documentation</a> on YUILibrary.</p>
    </aside>

    <h2 class="content-subhead">How do responsive grids work?</h2>

    <p>YUI3 Responsive Grids builds on top of the existing YUI3 Grids implementation. It adds a single new class name called <code>.yui3-g-r</code> (the "r" stands for responsive, you see). You can use this instead of using <code>.yui3-g</code> as you normally do. All elements with a class name of <code>.yui3-g-*-*</code> will automatically become responsive if they are direct descendents of a <code>.yui3-g-r.</code></p>


    <h2 class="content-subhead">The HTML</h2>

    <p>The first gist shows how regular YUI3 grids are written. These grids are unresponsive. They'll always be one-thirds irrespective of the width of the screen. The second gist replaces the <code>.yui3-g</code> with <code>.yui3-g-r</code>, thereby making the one-third columns collapse to full width on lower screen widths.</p>


    <h2 class="content-subhead">Features</h2>

    <ul class="content-spaced">
        <li>Adds configurable media queries for different screen widths (Desktops, Landscape Tablets, Portrait Tablets, Phones)</li>
        <li>Collapses elements to 100% if smaller than a certain width (767px by default)</li>
        <li>Adjusts images to fit on smaller screens</li>
        <li>Works with as many columns as you want (or as few)</li>
        <li>Configure prefixes (as we've done on this page)</li>
    </ul>
{'fraction_non_alphanumeric': 0.1334154983823756, 'fraction_numerical': 0.012940995224156525, 'mean_word_length': 3.707759245830312, 'pattern_counts': {'":': 0, '<': 135, '<?xml version=': 0, '>': 139, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1322065', 'n_tokens_mistral': 2187, 'n_tokens_neox': 2045, 'n_words': 777}