The helper classes are CSS classes that used in Zodiac framework to alter the global styles of custom widgets and elements.
Used in Widget/HTML, the helper classes can be 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
01. backgrounds
bg-transparent | The transparent background color |
bg-primary | The main accent background color |
bg-secondary | The secondary accent background color |
bg-primary-dark | The primary dark background color (footer) |
bg-secondary-dark | The secondary dark background color |
bg-white | White background color |
bg-dark | |
bg-turquoise | |
bg-emerald | |
bg-peter-river | |
bg-amethyst | |
bg-wet-asphalt | |
bg-green-sea | |
bg-nephritis | |
bg-belize-hole | |
bg-wisteria | |
bg-midnight-blue | |
bg-sun-flower | |
bg-carrot | |
bg-alizarin | |
bg-clouds | |
bg-concrete | |
bg-orange | |
bg-pumpkin | |
bg-pomegranate | |
bg-silver | |
bg-asbestos | |
bg-red | |
bg-blue | |
bg-green | |
bg-yellow | |
bg-pink | |
bg-purple | |
bg-amber | |
bg-lime | |
bg-brown | |
bg-teal | |
bg-cyan | |
bg-gray | |
bg-gradient-1 | The background gradient style 1 |
bg-gradient-2 | The background gradient style 2 |
bg-gradient-3 | The background gradient style 3 |
02. text color and link
color-dark | The headings and text color #000000 |
color-white | The headings and text color #ffffff |
link-white | The global link color #ffffff |
link-dark | The global link color #000000 |
link-grey | The global link color #cccccc |
has-dark-link | The text color in custom buttons (not hover) |
03. padding and margin
no-padding | padding:0px |
add-5 | padding:5px |
add-10 | padding:10px |
add-15 | padding:15px |
add-20 | padding:20px |
add-25 | padding:25px |
add-30 | padding:30px |
no-margin | margin:0 |
pull-top | margin-top:-15px |
pull-btm | margin-bottom:-15px |
04. alignment
hs-left | float:left |
hs-right | float:right |
hs-center | float:none |
text-left | text-align:left |
text-right | text-align:right |
text-center | text-align:center |
is--left | left-align (Flexbox) |
is--right | right-align (Flexbox) |
is--center | center-align (Flexbox) |
05. text size and font weight
size-11 | font-size:11px |
size-12 | font-size:12px |
size-13 | font-size:13px |
size-14 | font-size:14px |
size-15 | font-size:15px |
size-16 | font-size:16px |
size-17 | font-size:17px |
size-18 | font-size:18px |
size-19 | font-size:19px |
size-20 | font-size:20px |
size-25 | font-size:25px |
size-30 | font-size:30px |
has-large-text | font-size:300% (only desktop) |
has-large-mobile | font-size:300% (desktop & mobile) |
has-superlarge-text | font-size:500% (only desktop) |
weight-300 | font-weight:300 |
weight-400 | font-weight:400 |
weight-500 | font-weight:500 |
weight-600 | font-weight:600 |
weight-700 | font-weight:700 |
weight-800 | font-weight:800 |
06. position
rel | position:relative |
absolute-top-left | position:absolute;top:0;left:0; |
absolute-top-right | position:absolute;top:0;right:0; |
absolute-btm-left | position:absolute;bottom:0;left:0; |
absolute-btm-right | position:absolute;bottom:0;right:0; |
07. display desktop or mobile only
only-mobile | Display only in tablet and mobile |
only-mobile-phone | Display only in mobile |
hide-mobile | Display only in desktop |
08. grid columns
col-12 | width: 100% |
col-11 | width: 91.66666667% |
col-10 | width: 83.33333333% |
col-9 | width: 75% |
col-8 | width: 66.66666667% |
col-7 | width: 58.33333333% |
col-6 | width: 50% |
col-5 | width: 41.66666667% |
col-4 | width:33.33333333% |
col-3 | width:25% |
col-2 | width:16.66666667% |
col-1 | width:8.33333333% |
col-0 | width:auto |
09. buttons
mid-round | border:none |
bg-round | border:1px solid #303030 |
ghost-dark | box-shadow: 0px 17px 35px rgba(74,74,115,0.1), 0px 5px 15px rgba(0,0,0,0.07) |
ghost-white | text-shadow: 2px 4px 3px rgba(0,0,0,0.3) |
flat | box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.1) inset |
fullwidth-btn | width:100% |
small-btn | padding: 12px 25px |
large-btn | padding: 15px 55px |
10. others
no-border | border:none |
add-border | border:1px solid #303030 |
has-shadow | box-shadow: 0px 17px 35px rgba(74,74,115,0.1), 0px 5px 15px rgba(0,0,0,0.07) |
has-text-shadow | text-shadow: 2px 4px 3px rgba(0,0,0,0.3) |
has-padding | removes the default 5px padding from any Jimdo module |