Helper Classes
Preset utility classes for backgrounds, spacing, typography, borders, visibility, and more. Style any HTML widget by adding class names — no custom CSS required.
Overview
Helper (utility) classes are ready-made CSS class names included with Matrix Framework. They cover common properties — padding, margin, border-radius, positioning, colors, font size, and more — so you can customize widgets without writing extra CSS.
-
Works on any Widget/HTML element via the
classattribute -
Theme-aware colors like
bg-primaryfollow your Style Editor palette -
One-click copy from the Helper Classes popup in the Jimdo editor
-
Optional Files view to copy uploaded file URLs into widgets
-
Combine freely — e.g.
bg-pumpkin br5 size-18
1 Quick example
A default Jimdo button uses global styles only:
<a class="hs-button" href="https://www.matrix-framework.com/" target="_blank">Button</a>Add helper classes to change color, radius, and type size without writing CSS:
<a class="hs-button bg-pumpkin br5 size-18" href="https://www.matrix-framework.com/" target="_blank">Button</a>-
bg-pumpkin— background color -
br5— 5px border-radius -
size-18— 18px font size
2 Quick setup
Enable the Helper Classes popup in your Head configuration:
features: {
helperClassesModule: true // Helper Classes button and popup
}3 Helper Classes popup
When you open any Widget/HTML module and click Enlarge, Matrix adds a Helper Classes button to the toolbar (alongside Widgets and Variables).
Enlarge the HTML module
Open the Source Code / Enlarge editor for a Widget/HTML module.
Open Helper Classes
Click the Helper Classes icon in the toolbar.
Copy a class
Click any tag — it copies to the clipboard and shows “Copied!”.
Paste into your markup
Add the class name to the element’s class attribute and save.
Files directory
The popup header includes a Files button that opens your Jimdo Custom Layout files. Copy image or document URLs and paste them into widgets without leaving the editor.
Popup sections include: Background, Text Color and Link, Text effects, Font Family, Padding and Margin, Alignment, Text Size and Font Weight, Border Radius, Responsive Visibility, Animations, and One Pager.
4 Backgrounds
| Class | Description |
|---|---|
bg-transparent
|
Transparent background |
bg-primary
|
Main accent (Style Editor primary) |
bg-primary-light / bg-primary-dark
|
Primary light / dark variants |
bg-secondary / bg-secondary-dark
|
Secondary accent colors |
bg-white / bg-dark
|
White / dark backgrounds |
bg-gradient
|
Gradient of primary → secondary |
bg-pumpkin, bg-turquoise, bg-emerald, …
|
Named palette colors (Flat UI–style set) |
Also available: bg-peter-river, bg-amethyst, bg-wet-asphalt, bg-sun-flower, bg-carrot, bg-alizarin,
bg-clouds, bg-concrete, bg-orange, bg-pomegranate, bg-silver, bg-asbestos, and solid bg-red,
bg-blue, bg-green, bg-yellow, bg-pink, bg-purple, bg-amber, bg-lime, bg-brown,
bg-teal, bg-cyan, bg-gray.
5 Text color & links
| Class | Description |
|---|---|
color-dark
|
Dark text / headings |
color-white
|
White text (for dark backgrounds) |
link-white / link-dark / link-grey
|
Link color overrides |
has-dark-link
|
Dark text color in custom buttons (not hover) |
has-link-white / has-link-dark
|
Force white or dark link color |
6 Padding & margin
| Class | CSS |
|---|---|
no-padding
|
padding: 0
|
add-5 … add-30
|
padding: 5px … 30px (steps of 5)
|
no-margin
|
margin: 0
|
pull-top
|
margin-top: -15px
|
pull-btm
|
margin-bottom: -15px
|
7 Alignment
| Class | Effect |
|---|---|
hs-left / hs-right / hs-center
|
Float left / right / none |
text-left / text-right / text-center
|
Text alignment |
is--left / is--right / is--center
|
Flexbox alignment helpers |
8 Text size & font weight
| Class | CSS |
|---|---|
size-11 … size-20
|
font-size: 11px … 20px
|
size-25 / size-30
|
Larger display sizes |
weight-300 … weight-800
|
font-weight: 300 … 800
|
primary-font / secondary-font / tertiary-font
|
Apply Global Settings font families |
is-uppercase
|
text-transform: uppercase
|
is-letterspace-1 / 2 / 3
|
Letter-spacing steps |
9 Border radius & position
| Class | Effect |
|---|---|
br5 / br10 / br15 / br20 / br25 / br30
|
5–30px border-radius |
br500
|
Fully rounded (pill / circle) |
rel
|
position: relative
|
absolute-top-left / top-right / btm-left / btm-right
|
Absolute corner pinning |
10 Responsive visibility
| Class | Shows on |
|---|---|
only-mobile
|
Tablet and mobile only |
only-mobile-phone
|
Phone only |
hide-mobile
|
Desktop only |
hide-mobile-only
|
Desktop and tablet |
hidden-desktop / hidden-tablet / hidden-mobile
|
Hide on that breakpoint (popup helpers) |
11 Grid columns
Twelve-column widths for fluid / custom layouts inside Matrix blocks:
| Class | Width |
|---|---|
col-12
|
100% |
col-6
|
50% |
col-4
|
33.33% |
col-3
|
25% |
col-1 … col-11
|
8.33% steps through 91.67% |
col-0
|
width: auto
|
13 Text effects
The popup’s Text effects section includes oversized brand watermarks and gradient fill. giant-text auto-fits a single line to the parent width.
<h2 class="giant-text gradient-text weight-800 opacity-04 is-uppercase">
Lemberg
</h2>| Class | Purpose |
|---|---|
giant-text
|
Oversized single-line text; auto-fits parent width |
giant-text-fade-top / fade-btm
|
Vertical edge dissolve on letters |
gradient-text
|
Primary → secondary gradient fill |
opacity-04 (and related)
|
Opacity helpers for soft watermarks |
Troubleshooting
| Issue | Fix |
|---|---|
| Helper Classes button missing |
Confirm helperClassesModule: true in Edit Head, upload helper-classes.matrix.js, open a Widget/HTML module, and click Enlarge.
|
| Class copied but style not applying | Check Matrix CSS is loaded on the page. Confirm the class is on the correct element and not overridden by a more specific rule. |
bg-primary looks wrong
|
Primary colors come from the Style Editor palette — update Global / template colors there. |
| Files view empty or blocked | You must be logged into Jimdo CMS. The Files iframe loads Custom Layout → Files. |
| Need more layout tags | Use Matrix Variables for column-level tags, or Custom Module for per-module visual styling. |
If you have encountered any bugs, errors, or unexpected behavior in the module Helper Classes, please leave a comment below.