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

04. alignment

05. text size and font weight

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

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