demos/index.html

<!DOCTYPE html>
<html>
    <head>
        <title>MixItUp Demos</title>
    </head>
    <body>
        <h1>MixItUp Demos</h1>

        <p>The following collection of demos have been designed to demonstrate MixItUp's core functionality. They are maintained as part of the <a href="https://github.com/patrickkunka/mixitup/tree/v3/demos">MixItUp Github repository</a>, and can be viewed at <a href="http://patrickkunka.github.io/mixitup/demos">patrickkunka.github.io/mixitup/demos/</a>.</p>

        <p>Each demo is intended to be as simple and instructive as possible and therefore intentionally avoids "magic" such as SASS, ES6, modules, or external dependencies that may require compilation in order to be usable in the browser. As such, you may run and edit these demos using any basic static file webserver, online or offline.</p>

        <h2>Basic Functionality</h2>

        <ul>
            <li><a href="./basic/">Basic MixItUp Functionality</a></li>
            <li><a href="./attribute-selectors/">Querying via Attribute Selectors</a></li>
            <li><a href="./loading-animation/">Loading Animation</a></li>
            <li><a href="./multiple-instances-global-control-scoping/">Multiple Instances with Global Control Scoping</a></li>
            <li><a href="./multiple-instances-local-control-scoping/">Multiple Instances with Local Control Scoping</a></li>
        </ul>

        <h2>Filtering</h2>

        <ul>
            <li><a href="./toggle-filtering-or-logic/">Toggle Filtering with OR Logic</a></li>
            <li><a href="./toggle-filtering-and-logic/">Toggle Filtering with AND Logic</a></li>
            <li><a href="./filtering-by-url/">Filtering by URL</a></li>
            <li><a href="./filtering-by-text-input/">Filtering by Text Input</a></li>
        </ul>

        <h2>Non-standard UI</h2>

        <ul>
            <li><a href="./select-dropdowns/">Select Dropdowns</a></li>
            <li><a href="./radio-buttons/">Radio Buttons</a></li>
            <li><a href="./checkboxes/">Checkboxes</a></li>
            <li><a href="./checkboxes-with-reset-checkbox/">Checkboxes with Reset Checkbox</a></li>
            <li><a href="./filtering-by-range/">Range Sliders</a></li>
        </ul>

        <h2>Sorting</h2>

        <ul>
            <li><a href="./sorting-by-default/">Sorting by Default</a></li>
            <li><a href="./sorting-by-attribute/">Sorting by Attribute</a></li>
            <li><a href="./sorting-by-multiple-attributes/">Sorting by Multiple Attributes</a></li>
        </ul>

        <h2>Insertion</h2>

        <ul>
            <li><a href="./insertion-non-target-elements/">Insertion with Non-target Elements</a></li>
        </ul>

        <h2>Removal</h2>

        <ul>
            <li><a href="./removal-by-reference/">Removal by Reference</a></li>
        </ul>

        <h2>Dataset</h2>

        <ul>
            <li><a href="./dataset-empty-container/">Dataset with an Empty Container</a></li>
            <li><a href="./dataset-pre-rendered-targets/">Dataset with Pre-rendered Targets</a></li>
        </ul>

        <h2>Grids</h2>

        <ul>
            <li><a href="./grid-inline-block/">Inline-block Grid (HTML/CSS only)</a></li>
            <li><a href="./grid-flex-box/">Flex-box Grid (HTML/CSS only)</a></li>
            <li><a href="./grid-floats/">Float-based Grid (HTML/CSS only)</a></li>
            <li><a href="./grid-flex-box-matching-heights/">Flex-box Grid with Matching Heights</a></li>
            <li><a href="./grid-columns/">Columns Grid</a></li>
        </ul>
    </body>
</html>