Matrix Framework
UI Design System
A comprehensive collection of UI components for Matrix Framework documentation. Copy and use these elements in your projects.
<style type="text/css">
/*<![CDATA[*/
@import url("04-custom-widgets.css");
@import url("05-helper-classes.css");
@import url("06-media-queries.css");
@import url("07-admin-menu.css");
@import url("08-libraries.css");
@import url("09-updates.css");
@import url("10-style-editor.css");
@import url("11-matrix-ui.css");
/*]]>*/
</style>Alert Boxes
Use these alert boxes to highlight important information, warnings, errors, and success messages in your documentation.
Inline Code
Use the inline-code class for inline code snippets like const variable = "value" within text.
<code class="inline-code">your code here</code>Code Block with Header
const MatrixConfig = {
features: {
pageBuilder: true,
styleEditor: true,
megaMenu: true
},
version: '1.5.0'
};Simple Code Block
npm install matrix-framework
npm run build
npm startCode Block with Language Badge
<div class="matrix-container">
<header class="matrix-header">
<h1>Welcome to Matrix Framework</h1>
</header>
<main class="matrix-content">
<p>Your content here</p>
</main>
</div>CSS Code Block
.matrix-container {
max-width: 1200px;
margin: 0 auto;
padding: 24px;
background: var(--color-bg);
}Basic Tags
<span class="tag">Default</span>
<span class="tag tag-primary">Primary</span>
<span class="tag tag-secondary">Secondary</span>
<span class="tag tag-accent">Accent</span>Status Tags
Version Badges
Pill Tags
Icon Tags
Headings
Heading 1 - Main Title
Heading 2 - Section Title
Heading 3 - Subsection
Heading 4 - Component Title
Heading 5 - Small Heading
Heading 6 - Smallest Heading
Text Styles
Large text for introductions and lead paragraphs.
Regular paragraph text. This is the default body text style used throughout the documentation.
Small text for captions, footnotes, and supplementary information.
Muted text for secondary information with reduced emphasis.
Text Formatting
Bold text for strong emphasis.
Italic text for emphasis or terminology.
Underlined text for special attention.
Strikethrough text for deprecated content.
Highlighted text for important information.
Text with documentation link styling.
Gradient Text
Build amazing websites
<h2 class="gradient-text">Build amazing websites</h2>Icon Buttons
Button Group
Feature Cards
Info Card
Getting Started with Matrix Framework
Follow these steps to set up Matrix Framework in your Jimdo website. The installation process takes about 5 minutes.
Download the Framework
Get the latest version from GitHub
Add to Head Section
Include the CSS and JS files
Configure Settings
Set up your preferences
Basic Table
| Property | Type | Default | Description |
|---|---|---|---|
pageBuilder
|
Boolean |
true
|
Enable or disable the page builder feature |
styleEditor
|
Boolean |
true
|
Enable or disable the style editor |
debugMode
|
Boolean |
false
|
Enable debug logging in console |
version
|
String |
"1.5.0"
|
Current framework version |
Comparison Table
| Feature | Starter | Professional | Enterprise |
|---|---|---|---|
| Core Framework | ✓ | ✓ | ✓ |
| Page Builder | – | ✓ | ✓ |
| Mega Menu | – | ✓ | ✓ |
| Priority Support | – | ✓ | ✓ |
| Custom Development | – | – | ✓ |
Checklist
- Install Matrix Framework
- Configure basic settings
- Set up page builder
- Customize styles
Definition List
- Page Builder
- A visual tool for creating page layouts using drag-and-drop functionality.
- Style Editor
- An advanced interface for customizing CSS variables and styles in real-time.
- Mega Menu
- A multi-column dropdown menu system with support for images and rich content.
Blockquote with Citation
"The best framework for Jimdo development. Easy to use, well documented, and incredibly powerful."
— Developer Review, 2026
Feature Callout
Pro Tip
Use the keyboard shortcut Ctrl + S to quickly save your changes in the page builder.
Basic Divider
Content above the divider
Content below the divider
Dashed Divider
Content above the divider
Content below the divider
Divider with Text
Gradient Divider
Keyboard Keys
Press Ctrl + C to copy
Press Ctrl + V to paste
Press Ctrl + Shift + S to save as
Press Esc to close modal
Browser Frame
<div class="browser-frame">
<div class="browser-frame-header">
<div class="browser-frame-dots">...</div>
<span class="browser-frame-url">URL here</span>
</div>
<div class="browser-frame-content">
<img src="your-image.png" alt="Description">
</div>
</div>Screenshot with Shadow
<div class="screenshot">
<img src="your-image.png" alt="Description">
</div>Screenshot with Border
<div class="screenshot-bordered">
<img src="your-image.png" alt="Description">
</div>Announcement Box
Version 1.5.0 Released!
Introducing Page Builder, improved Style Editor, and much more.
<div class="announcement">
<div class="announcement-icon">🚀</div>
<div class="announcement-content">
<h4>Your Title</h4>
<p>Your message here.</p>
</div>
<div class="announcement-action">
<a href="#">Action →</a>
</div>
</div>Banner Announcement
Changelog Card
Version 1.5.0
LatestAdded
- Visual Page Builder with drag-and-drop interface
- Advanced color picker with opacity support
- New mega menu feature for navigation
Changed
- Improved Style Editor performance
- Updated documentation structure
Fixed
- Color picker freeze issue on first click
- Fixed issue where duplicating a fullwidth page builder module using Jimdo's native CMS duplicate feature caused the new module to be invisible (opacity: 0) until page reload
FAQ Accordion
Progress Bar
Steps Progress
Copy Input Field
Tooltips
Hover over this text This is a tooltip message to see the tooltip.