• Home
  • About
  • Blog
  • Archive
  • Home
  • About
  • Blog
  • Archive

    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

     

    Main colors
       bg-primary
       bg-primary-light
       bg-primary-dark
       bg-secondary
       bg-secondary-dark
    Template sections
       body
       top-header
       header
       content
    Footer Styles
       background
       text color
       link color
       horizontal line
    Buttons
       style 1
       style 2
       style 3
    Other elements
      social icons
      navigation color
      subnav background
    Mobile navigation
       background color
       navigation color
    Template configurations
    has-right-nav
    navigation styles
    size-15 weight-400
    content styles
    form-white
    footer styles
    o-form color-white
    Typography
    Heading H1
    weight-600
    Heading H2
    weight-600
    Heading H3
    weight-600
    Buttons
    weight-400
    Animations

    Note:
    All changes made here will be applied to your entire website.
    is-switcher admin-only

    is-rounded
    draggable-logo

    About | Privacy Policy | Cookie Policy | Sitemap
    Log in Log out | Edit
    • Scroll to top
    Close