• Home
    • Blog
    • Contact
  • Home
  • Blog
  • Contact
  1. Zodiac

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:

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:

Button

<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

Latest blog posts

Wed

26

Aug

2020

Exploring Puglia

Read More 3 Comments

Fri

24

May

2019

New York, New York

Read More 3 Comments

Thu

11

May

2017

Greater Manchester

Read More 0 Comments
left-footer
footer-blog

Pages

Live preview of custom widgets
Previous version (4.1)
Support
right-footer

hembarevskyy. {Zødiac}

draggable-logo

Privacy Policy | Cookie Policy | Sitemap
Log in Log out | Edit
  • Zodiac
  • Matrix themes
Matrix themes Close
Documentation Quick setup Select a color Select a font Shortcodes Helper classes Updates Enterprise package Help Showcase Marketplace Custom layout
Close