Layout System

Grid Architecture

The grid system creates order.

From the first glance, users sense a thoughtfully organized presentation. This structured approach creates visual harmony that guides viewers naturally through content, making information feel accessible and well-designed across all devices.

This standardized approach brings order to your layouts. It creates a clear structure for organizing content while adapting seamlessly to any screen size.

The grid fraction .fr (1fr) is your layout's basic building block. Use it as your measuring unit for all internal elements. This creates immediate visual harmony because everything shares the same underlying math. When components snap to this invisible grid, the result feels intentional and polished—never random or misaligned.

Grid settings can be adjusted in your global stylesheet according to specific project needs.

// css/modules/layout/_grid.scss
--base-unit: 16px;
--grid-columns: 12;
--grid-gap: var(--base-unit);
--grid-columns-global: repeat(12, 1fr);
--grid-columns-global-mobile: repeat(6, 1fr);
--grid-gap-global: var(--base-unit);

.grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gap);
    width: 100%;

    @include bp.mobile {
        --grid-columns: 6;
        --grid-gap: var(--space-xs);
    }
}

.grid-global {
    display: grid;
    grid-template-columns: var(--grid-columns-global);
    gap: var(--grid-gap-global);

    @include bp.mobile {
        grid-template-columns: var(--global-grid-columns-mobile);
        gap: var(--space-xs);
    }
}

// fraction width
--global-fr: calc((var(--site-max-width) - (11 * var(--grid-gap-global))) / 12);

.fr {
    width: var(--global-fr);

The CSS Grid's fractional units ensure content adapts naturally to various viewport dimensions without requiring extensive media query overrides.

Template Structure

The template structure creates intuitive organization. It features three main zones: header, content area, and footer—a familiar pattern users understand without thinking. The header establishes identity and houses main navigation. The footer contains supporting links that stay out of the way until needed.

The content area divides into three logical sections for maximum clarity: a page title that immediately confirms location, a sidebar providing context and secondary options, and the article section where primary content lives. This structured approach helps users navigate naturally while keeping information neatly arranged.

Maintain the sidebar space even on pages that don't require it. This consistency helps users develop a clear mental map of your site as they navigate between sections. The predictable structure makes the entire experience more intuitive and easier to use.

Text Content

Text content in articles is limited to a maximum width on larger screens. This isn't just about aesthetics—it's about readability. Too-long lines significantly reduce reading speed and comprehension.

# css/modules/typography/_text-content.scss
--text-content-width: calc((var(--global-fr) * 5) + (var(--grid-gap) * 4));

article p {
    max-width: var(--text-content-width);
}

For visitors who need to quickly scan and understand information, this thoughtful constraint makes your content immediately more accessible.

Responsive Behavior

The style system adapts to three key device categories for optimal data presentation.

• Mobile (up to 768 px): Focuses on essential content, ensuring clarity and ease of use.
• Tablet (769 px to 1,023 px): Balances content density and readability, providing a comfortable viewing experience.
• Desktop (1,024 px and above): Utilizes available space for a rich, detailed presentation of information.

To maintain readability of business data on widescreen displays, content width is capped at 1,600 px.

These breakpoints provide a reliable starting point for most projects, though you can adjust them based on specific requirements.

Start with mobile layouts as your foundation. This mobile-first approach ensures your core content works well on the most constrained devices before enhancing for larger screens.

<header>

.nav-global

menu

.content

.sidebar menu

.page-title

<article>

<footer>

As viewport size decreases, adapt your layout intelligently while keeping key navigation visible. Avoid hiding important elements in hamburger menus—this reduces conversion rates and frustrates users. Instead, implement horizontal scrolling or dropdown menus with clear labels when space is limited. Sidebar content may shift below the header as a streamlined navigation strip, and content expands to use available width. Always keep primary actions immediately accessible.

As screen size increases, you gain valuable space. Use it strategically to guide user attention rather than cluttering the interface with unnecessary elements. Maintain visual hierarchy and let important content breathe.

These transformations happen automatically through carefully crafted media queries targeting specific breakpoints. The information hierarchy stays consistent across all devices—elements simply rearrange to suit different screen dimensions.

Always keep navigation paths accessible on touch devices, including nested submenus. Make the header sticky or fixed for better usability. Size interactive elements appropriately for touch—aim for at least 44×44px target areas. Test across multiple devices to verify a consistent, intuitive experience everywhere.

Full-Width Layout Option

For content that needs extra horizontal space—landing pages, data visualizations, comparison tables, or reference materials—the system includes a full-width option. This configuration removes sidebar constraints while maintaining familiar navigation patterns.

This expanded layout gives content room to breathe without confusing users about site structure. Choose the most appropriate layout based on what your content needs rather than forcing everything into one template.

Remember that every design decision should support one primary goal: helping users find, understand, and act upon information efficiently. Visual design should enhance this purpose, not compete with it.