Scaffold

The classes below can be used to adjust the top and bottom margin of modules in small increments. They can be either applied to a div or other block element directly or to a Joomla module via the module class suffix.

When applying classes to a div it is necessary to use the module class "moduletable" in order for the class to apply properly.

<div class="moduletable top200 bottom40">This will apply a top margin of 200px and a bottom margin of 40px.</div>

The following classes add a top margin to the element.

  • .zen-above {margin-bottom: @gutter}
  • .top10 {margin-top: 10px}
  • .top20 {margin-top: 20px}
  • .top30 {margin-top: 30px}
  • .top40 {margin-top: 40px}
  • .top50 {margin-top: 50px}
  • .top60 {margin-top: 60px}
  • .top70 {margin-top: 70px}
  • .top80 {margin-top: 80px}
  • .top90 {margin-top: 90px}
  • .top100 {margin-top: 100px}
  • .top25 {margin-top: 25px}
  • .top75 {margin-top: 75px}
  • .top100 {margin-top: 100px}
  • .top125 {margin-top: 125px}
  • .top150 {margin-top: 150px}
  • .top175 {margin-top: 175px}
  • .top200 {margin-top: 200px}
  • .top225 {margin-top: 225px}
  • .top250 {margin-top: 250px}
  • .top275 {margin-top: 275px}
  • .top300 {margin-top: 300px}
  • .top325 {margin-top: 325px}
  • .top350 {margin-top: 350px}
  • .top375 {margin-top: 375px}
  • .top400 {margin-top: 400px}
  • .top425 {margin-top: 425px} 
  • .top450 {margin-top: 450px}
  • .top475 {margin-top: 475px}
  • .top500 {margin-top: 500px}

The following classes add a negative bottom margin to an element in order to move content below it upwards.

  • // Move Up
  • .minusbottom10 {margin-bottom: -10px}
  • .minusbottom20 {margin-bottom: -20px}
  • .minusbottom30 {margin-bottom: -30px}
  • .minusbottom40 {margin-bottom: -40px}
  • .minusbottom50 {margin-bottom: -50px}
  • .minusbottom60 {margin-bottom: -60px}
  • .minusbottom70 {margin-bottom: -70px}
  • .minusbottom80 {margin-bottom: -80px}
  • .minusbottom90 {margin-bottom: -90px}
  • .minusbottom100 {margin-bottom: -100px}
  • .minusbottom125 {margin-bottom: -125px}
  • .minusbottom150 {margin-bottom: -150px}
  • .minusbottom175 {margin-bottom: -175px}
  • .minusbottom200 {margin-bottom: -200px}
  • .minusbottom225 {margin-bottom: -225px}
  • .minusbottom250 {margin-bottom: -250px}
  • .minusbottom275 {margin-bottom: -275px}
  • .minusbottom300 {margin-bottom: -300px}
  • .minusbottom325 {margin-bottom: -325px}
  • .minusbottom350 {margin-bottom: -350px}
  • .minusbottom375 {margin-bottom: -375px}
  • .minusbottom400 {margin-bottom: -400px}
  • .minusbottom425 {margin-bottom: -425px} 
  • .minusbottom450 {margin-bottom: -450px}
  • .minusbottom475 {margin-bottom: -475px}
  • .minusbottom500 {margin-bottom: -500px}

The following classes add a negative top margin to move an element upwards.

  • .minustop10 {margin-top: -10px}
  • .minustop20 {margin-top: -20px}
  • .minustop30 {margin-top: -30px}
  • .minustop40 {margin-top: -40px}
  • .minustop50 {margin-top: -50px}
  • .minustop60 {margin-top: -60px}
  • .minustop70 {margin-top: -70px}
  • .minustop80 {margin-top: -80px}
  • .minustop90 {margin-top: -90px}
  • .minustop100 {margin-top: -100px}
  • .minustop125 {margin-top: -125px}
  • .minustop150 {margin-top: -150px}
  • .minustop175 {margin-top: -175px}
  • .minustop200 {margin-top: -200px}
  • .minustop225 {margin-top: -225px}
  • .minustop250 {margin-top: -250px}
  • .minustop275 {margin-top: -275px}
  • .minustop300 {margin-top: -300px}
  • .minustop325 {margin-top: -325px}
  • .minustop350 {margin-top: -350px}
  • .minustop375 {margin-top: -375px}
  • .minustop400 {margin-top: -400px}
  • .minustop425 {margin-top: -425px} 
  • .minustop450 {margin-top: -450px}
  • .minustop475 {margin-top: -475px}
  • .minustop500 {margin-top: -500px}

The following classes apply a bottom margin to the given element.

  • zen-below {margin-bottom: @gutter}
  • .bottom10 {margin-bottom: 10px}
  • .bottom20 {margin-bottom: 20px}
  • .bottom30 {margin-bottom: 30px}
  • .bottom40 {margin-bottom: 40px}
  • .bottom50 {margin-bottom: 50px}
  • .bottom60 {margin-bottom: 60px}
  • .bottom70 {margin-bottom: 70px}
  • .bottom80 {margin-bottom: 80px}
  • .bottom90 {margin-bottom: 90px}
  • .bottom100 {margin-bottom: 100px}
  • .bottom25 {margin-bottom: 25px}
  • .bottom75 {margin-bottom: 75px}
  • .bottom100 {margin-bottom: 100px}
  • .bottom125 {margin-bottom: 125px}
  • .bottom150 {margin-bottom: 150px}
  • .bottom175 {margin-bottom: 175px}
  • .bottom200 {margin-bottom: 200px}
  • .bottom225 {margin-bottom: 225px}
  • .bottom250 {margin-bottom: 250px}
  • .bottom275 {margin-bottom: 275px}
  • .bottom300 {margin-bottom: 300px}
  • .bottom325 {margin-bottom: 325px}
  • .bottom350 {margin-bottom: 350px}
  • .bottom375 {margin-bottom: 375px}
  • .bottom400 {margin-bottom: 400px}
  • .bottom425 {margin-bottom: 425px} 
  • .bottom450 {margin-bottom: 450px}
  • .bottom475 {margin-bottom: 475px}
  • .bottom500 {margin-bottom: 500px}

The following classes apply margin to specified elements .

These classes are used throughout the template markup.

  • .row-margin 
  • .row-margin-sml
  • .row-margin-bottom 
  • .row-margin-top
  • .row-margin-bottom-sml 
  • .row-margin-top-sml
  • .row-padding-hor
  • .row-padding-hor-small
  • .row-padding-vert-sml-norm-hor

The following classes apply padding to specified elements .

These classes are used throughout the template markup.

  • .zen-padding // Uses the @base-padding variable
  • .zen-padding-sml // Uses half of the base-padding variable
  • .row-padding
  • .row-padding-sml
  • .row-padding-vert
  • .row-padding-vert-sml
  • .row-padding-hor
  • .row-padding-hor-small
  • .row-padding-vert-sml-norm-hor
  • .row-padding-none 

The following classes remove margins on items at certain screensizes .

  • .zen-no-margins // Remove all margins on all screens including margins on grid items
  • .row-margin-none // Applies no margin to the targetted div, modules, unorder lists and nested grids. Use for marginless grids in content
  • .no-tablet-margin // remove margins on tablets
  • .no-phone-margin // Remove margins on phones

The following classes control the display of an element.

  • .hide // Hide an element
  • .hide.in // Show a hidden element
  • .zen-hidden // Hide an element completely
  • .zen-visible // Displays an element
  • .no-phone-margin // Remove margin on

The following classes add a border-radius to an element.

  • .zen-round // Completely round
  • .zen-rounded // uses the border-radius value in the template to specify the degree that corners are round for the element

The following classes align the specified element.

  • .zen-left // Float right
  • .zen-right // Float left
  • .zen-center // Text-align:center

Fix an element to the top left or right of the parent div or page.

  • .zen-fixed.zen-fixed-left
  • .zen-fixed.zen-fixed-right