Ratchet in Stencil

<!--
    # Ratchet in Stencil

    A set of HTML snippets implementing select [Ratchet][] components using
    [Stencil][].

    The demo is intended to highlight the differences, especially:

    1. Stencil requires fewer component definitions to achieve the same set of
       UI elements (Stencil is more flexible, and more composable);

    2. Stencil often uses more markup (Stencil is more granular).

    N.B. Some of these could legitimately be made into their own more concrete
    components. A good rule of thumb is to create a new, less abstract component
    when:
        - you’re using a lot of utility classes in one spot
        - you’re introducing a lot of extra nesting

    N.B. Aria roles and other attributes are applied where appropriate to
    present close to real-world markup even though they aren’t part of Stencil.
    Keep this in mind when comparing with Ratchet.

    [Ratchet]: http://goratchet.com/one.html
    [Stencil]: https://github.com/mobify/stencil
-->


<!--
    Title bar with buttons

    Components: arrange, button.
    N.B. the bar component isn’t part of Stencil.
-->

<header class="c-bar" role="banner">
    <div class="c-arrange c--align-middle">
        <div class="c--arrange__item c--shrink">
            <button class="c-button" type="button">Left</button>
        </div>
        <h1 class="c-arrange__item c-bar__title">Title</h1>
        <div class="c--arrange__item c--shrink">
            <button class="c-button" type="button">Right</button>
        </div>
    </div>
</header>


<!--
    Tab bar

    Components: arrange, icon (TBD)
    Utils: text-align-center.
-->

<nav class="c-arrange" role="navigation">
    <a class="c-arrange__item is-current" href="{href1}">
        <div class="c-icon c--home"></div>
        <div class="u-text-align-center">Home</div>
    </a>
    <a class="c-arrange__item" href="{href2}">
        <div class="c-icon c--person"></div>
        <div class="tab-label">Profile</div>
    </a>
    <a class="c-arrange__item" href="{href2}">
        …
    </a>
</nav>


<!--
    Table view

    Components: stack (with custom item modifier)
-->

<ul class="c-stack c--ruled">
    <li class="c-stack__item">Item</li>
    <li class="c-stack__item c--heading" role="heading" aria-level="3">Divider</li>
    <li class="c-stack__item">Item</li>
</ul>


<!--
    Table view with badges and chevrons

    Components: stack, arrange, icon (TBD)
    N.B. badge component is not part of Stencil
-->

<ul class="c-stack c--ruled">
    <li class="c-stack__item">
        <a class="c-arrange c--align-middle" href="{href}">
            <div class="c-arrange__item">Item 1</div>
            <div class="c-arrange__item c--shrink">
                <span class="c-badge">5</span>
                <span class="c-icon c--chevron-right"></span>
            </div>
        </a>
    </li>
    <li class="c-stack__item">
        …
    </li>
</ul>


<!--
    Table view with media (image)

    Components: stack, arrange, media, icon (TBD)
-->

<ul class="c-stack c--ruled">
    <li class="c-stack__item">
        <a class="c-arrange" href="{href}">
            <div class="c-arrange__item c-media">
                <div class="c-media__figure">
                    <img src="{src}">
                </div>
                <div class="c-media__body">
                    <h2>Item Heading</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
            </div>
            <div class="c-arrange__item c--shrink c--align-middle">
                <span class="c-icon c--chevron-right"></span>
            </div>
        </a>
    </li>
    <li class="c-stack__item">
        …
    </li>
</ul>


<!--
    Table view with buttons

    Components: stack, arrange, button
-->
<ul class="c-stack c--ruled">
    <li class="c-stack__item">
        <div class="c-arrange c--align-middle">
            <!-- Depending on use case, this could be a label -->
            <div class="c-arrange__item">Item 1</div>
            <div class="c-arrange__item c--shrink">
                <button class="c-button" type="button">Button</button>
            </div>
        </div>
    </li>
    <li class="c-stack__item">
        …
    </li>
</ul>