A Complete Guide to Helper Classes

A complete guide to CSS helper classes used in Matrix Themes

The helper classes are CSS Classes that used in Matrix themes to alter the global styles of custom widgets and elements

There are two types of helper classes: Local classes and Global classes

The local helper classes are used in Widget/HTML and applied directly to our elements displayed in content or footer sections.

Let's have a look at below example of a button:

<a class="hs-button" href="https://www.matrix-themes.com/" target="_blank">Button</a>

As you can see, the button styles have been defined by global CSS styles: background color, font size and left alignment (by default).

Now we'll add some helper classes to apply different styles directly in Widget/HTML:

<a class="hs-button bg-pumpkin mid-round size-18" href="https://www.matrix-themes.com/" target="_blank">Button</a>

In our second example we used the following helper classes:

bg-pumpkin -  for background color

mid-round -  for border-radius

size-18 -  for font size

The helper classes can be applied for any widgets in order to display different styles with padding, margin, colors etc

The functions of the global helper classes are a little bit different from the local ones and usually used directly in HTML to define the global styles of our main template sections:

• header
• content
• footer

In this screenshot we can see our content section is using  the helper classes to define the global styles of this section:

bg-white -  background color of content section;

form-white -  the styles of our contact form adapted for the white background;

mid-round-btn -  all default Jimdo buttons in this section will have border-radius with 5px;

g-font -  The headings and all texts will be using the google font applied in CSS;

There's a huge use of helper classes in Matrix themes  that you can find also in Play of columns, custom draggable sections, so you don't need to learn all of them.

Here are the most common helpers classes  while the full list can be found in your CSS ( sections "helper classes" and "ultimate widgets" (in case you're using Enterprise package)

• If you come from front end development background or just used other CSS frameworks before, the helper classes shouldn't be something new for you. Please note that in Matrix Themes the helper classes have been divided only for 2 groups in order not to be too complicated for common users without any experience of CSS.

01. backgrounds

02. text color and link

03. padding and margin

04. alignment

05. text size and font weight

06. position

07. display desktop or mobile only

08. hero overlay opacity

09. grid columns

10. buttons

11. global classes only

The classes used only in HTML folder (design> custom template> html) and defines the global section styles. It is possible to find the below classes also in other features such as Play of Columns and Matrix Variables

12. others

12. hover effect