Helper classes
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
Helper Classes Tables
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 |