Framework Architecture
Understanding The Framework Layers
MSlide² is built by combining several technologies and runtime layers.
MSlide² combines Reveal.js, Bulma, and framework-specific publishing patterns into a lightweight architecture designed for Structured Content Exploration.
The objective is to separate responsibilities between navigation, layout, and publishing while preserving a lightweight architecture.
Framework Stack
Layer Architecture
The framework can be understood as a hierarchy of layers.
MSlide² Framework
│
├── Entry Point
│ └── index.html
│
├── MSlide Runtime
│ ├── css/custom.css
│ └── plugin/custom.js
│
├── Reveal.js Runtime
│
├── Runtime Plugins
│
├── Assets
│
└── Configuration
Each layer has a different responsibility.
Separating these responsibilities helps preserve maintainability while allowing projects to evolve independently.
Entry Point
The browser-facing entry point of the framework is:
index.html
This file contains:
- Starter content
- Slide structure
- Metadata
- References to stylesheets
- References to JavaScript dependencies
Most customization work begins from this file.
css/custom.css plugin/custom.js
These files provide the framework-specific behavior that transforms the blank starter into an MSlide² experience.
Reveal.js runtime files and plugin internals remain separate from the MSlide layer.
This separation helps preserve compatibility with future updates.
Assets
Static resources are stored inside the assets directory.
Typical contents include:
- Brand assets
- Logos
- Favicons
- Manifest icons
- Thumbnail images
Assets support the experience but do not initialize runtime behavior.
Configuration
Configuration files define metadata and browser behavior.
Examples include:
- site.webmanifest
- browserconfig.xml
These files help establish project identity while remaining independent from navigation and layout.
Separation Of Responsibilities
MSlide² follows a layered approach.
Reveal.js provides navigation.
Bulma provides layout.
MSlide provides publishing patterns.
This separation allows each layer to focus on a specific responsibility while keeping the framework lightweight and easier to maintain.
