apiary contained ui pattern

The Apiary Contained UI pattern is a design principle that guides the creation of intuitive and user-friendly interfaces within the Apiary platform. As an apiary for founders, it's essential to provide a seamless experience for users who command in English while leveraging the platform's capabilities to generate code.

Overview

The Contained UI pattern is built around three core components:

1. Max-Height Container: A container element with a defined maximum height, which prevents content from overflowing and causing horizontal scrolling.
2. Internal Scroll: A scrollable area within the container that allows users to navigate through content without leaving the page.
3. Accordion Expand: A collapsible section that expands when clicked, providing additional information or functionality.

Benefits

The Contained UI pattern offers several benefits:

• Reduces visual clutter and makes the interface more manageable
• Encourages a focused user experience by containing content within a defined area
• Enables users to easily navigate through complex data without feeling overwhelmed

Implementation

Here's an example implementation of the Contained UI pattern using HTML, CSS, and JavaScript:

HTML

<!-- max-height container -->
<div class="container" style="max-height: 500px; overflow-y: auto;">
    <!-- internal scroll area -->
    <div class="scrollable-area">
        <!-- accordion expand section -->
        <button class="accordion">Click to Expand</button>
        <div class="panel">
            <!-- additional content or functionality goes here -->
        </div>
    </div>
</div>

CSS

.container {
    width: 80%;
    margin: 40px auto;
}

.scrollable-area {
    height: 100%;
    overflow-y: auto;
}

.accordion {
    background-color: #333;
    color: #fff;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
}

.panel {
    padding: 0 18px;
    background-color: #333;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

JavaScript

// accordion expand functionality
const accordions = document.querySelectorAll('.accordion');
accordions.forEach((accordion) => {
    accordion.addEventListener('click', () => {
        const panel = accordion.nextElementSibling;
        if (panel.style.maxHeight === '') {
            panel.style.maxHeight = `${panel.scrollHeight}px`;
            accordion.innerHTML = 'Collapse';
        } else {
            panel.style.maxHeight = '';
            accordion.innerHTML = 'Click to Expand';
        }
    });
});

Example Use Cases

• Creating a documentation page with multiple sections, each containing detailed information and code snippets
• Building a dashboard for users to monitor their project's progress, with expandable sections for detailed metrics and analytics
• Developing an API reference guide with contained sections for each endpoint, providing examples and usage instructions

Related/Sources

For more information on the Contained UI pattern and its implementation, refer to the following resources:

• Apiary Documentation
• W3C CSS Box Model Module
• MDN Web Docs: Scrollable Areas