What are Fragmented Layouts in MSlide³?

Fragmented Layouts are MSlide³ layout patterns where complete layout stages or content regions evolve progressively inside a single Content State.

How are Fragmented Layouts different from normal fragments?

Normal fragments usually reveal individual elements. Fragmented Layouts apply fragment progression to larger layout regions, allowing the Content State itself to unfold in stages.

How do Fragmented Layouts relate to MSlide²?

MSlide² uses fragments to create progressive state layers inside a slide. MSlide³ extends this approach by applying fragment progression to complete layouts and content regions inside Content States.

Why use Fragmented Layouts?

Fragmented Layouts allow richer progressive experiences without adding extra Content States, helping preserve continuity while reducing journey complexity.

Fragmented Layouts

Fragmented Layout Purpose

MSlide³ extends fragments beyond individual elements.

Entire layouts can evolve progressively inside a Content State.

Rather than revealing isolated components, successive layout regions become available while preserving the current state.

Basic Structure

<!-- Initial layout -->
<div class="notification">

    Layout 1

</div>

<!-- Second layout stage -->
<div class="notification fragment">

    Layout 2

</div>

<!-- Third layout stage -->
<div class="notification fragment">

    Layout 3

</div>

<!-- Final layout stage -->
<div class="notification fragment">

    Layout 4

</div>

Fragments are applied to complete layout regions rather than individual text elements.

Layout Evolution

Fragmented Layouts allow a Content State to unfold progressively. Additional regions, interactions, and complementary views can appear in stages while preserving the current context. Rather than introducing additional Content States, progression occurs inside the existing state. This enables richer experiences without increasing journey complexity and helps maintain continuity throughout the interaction.

Progressive Layout Evolution

The following example shows how a Content State can carry multiple fragment-based stages, each one building on the last.

<!-- Layout stage 1 -->
<div class="notification">

    Initial layout

</div>

<!-- Layout stage 2 -->
<div class="notification fragment">

    Additional layout region

</div>

<!-- Layout stage 3 -->
<div class="notification fragment">

    Complementary content

</div>

<!-- Final layout stage -->
<div class="notification fragment">

    Final layout state

</div>

Each stage builds upon the previous one rather than replacing it. The user remains inside the same Content State throughout the sequence.

Layout Progression

Unlike traditional slide navigation, progression occurs inside the current layout. Multiple layout stages can coexist within a single Content State, allowing information density and interaction complexity to increase gradually. This enables richer experiences while preserving continuity and avoiding unnecessary journey depth.

Fragmented Regions

Fragments may control complete content regions.

<!-- Initial region -->
<div class="block">

    Main content

</div>

<!-- Secondary region revealed later -->
<div class="block fragment">

    Additional content region

</div>

This allows layouts to evolve progressively.

Fragmented Views

Fragments can reveal alternative views within the same layout.

<!-- Primary view -->
<div class="tab-content is-active">

    View 1

</div>

<!-- Secondary view -->
<div class="tab-content">

    View 2

</div>

Relationship To MSlide²

MSlide² uses fragments to create progressive state layers within a slide.

MSlide³ expands this approach by allowing complete layouts and content regions to evolve progressively inside a Content State.

Both frameworks preserve continuity, but MSlide³ applies fragment progression at a larger scale.

Fragmented Layouts

Fragmented Layout Purpose

Basic Structure

Layout Evolution

Progressive Layout Evolution

Layout Progression

Fragmented Regions

Fragmented Views

Relationship To MSlide²

Build interactive catalogs, menus, and high-impact landing pages.

Solutions

MSlide² Framework

MSlide³ Framework

MSlide For Food Menus

Extracta

Links

Reveal JS

Bulma CSS

Google Account

MSlide

The Hague, Netherlands

KVK #70530483

mslide@bod.nu

+31 615712746

© 2026 Blastoff / bod.nu