Return To Website

How To Add Helper Classes

This guide is set up to show you different helpers classes you can use to improve the look and feel of the cms content on your site. This section will go over the three different ways you can add a helper class to your content to achieve the look and feel you want.

The three different methods you can use are the following:

  • Adding classes to HTML elements.
  • Adding classes to Block css inputs.
  • Adding classes to Page css inputs.

Throughout this guide, you'll see this table on the right side of your screen:

  • HTML Elements
  • Blocks
  • Pages
  • All other Elements

We use this to indicate where the helper class can be added to. For this chart

  • If it is green, you can add the helper to that type of input.
  • If it is red, you should not add that helper to that type of input, as it may have unpredictible results.
  • If it is yellow, you should not add that helper to that type of input, as it has not been tested.
  • If it is grey, it means it should have no effect if added to that type of input.

Adding Classes to HTML Elements

When adding classes to html elements, you want to add these helper classes as inline elements, typed in to your HTMl.

A good example of this would be when you are using a button helper, like this to make a black colored button:

black

In order to specifically make sure the button is the right color, you need to add the helpers in the code, like you see on the right side of the screen. 






<a class="black button" href="#"> alabaster </div>

Adding Classes to Block CSS Inputs

When adding classes to the block level, you want to add this to the block's css input field, which can be found inside the block's all properties menu, either in the settings tab or on the content tab, where a block may have more than one input for it's content (such as the slider block.)
This css input will look like something like this: as can be seen on an overlay block.

block css input image

Adding Classes to Page CSS Inputs

Similar to block level inputs, pages also have css input fields, which can be found inside the page's all properties menu, in the settings tab.
This css input will look like something like this: as can be seen on the FAQ page

block css input image

Typography

Headings

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six
<h1>Heading One</h1>
<h2>Heading Two</h1>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>
<h6>Heading Six</h6>

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum dui eget orci fringilla, in lobortis mi auctor. Praesent nec mi nec nisl lobortis ultricies eget sit amet justo. 

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum 
dui eget orci fringilla, in lobortis mi auctor. Praesent nec mi nec nisl lobortis 
ultricies eget sit amet justo. 
</p>

Text Links

Sample Text Link 
<a href="#" alt="Sample Link">Sample Text Link</a>

Theme colors

Color table

This section describes the colors used across the Feizy site.

Black#000000
Grey#888888
White#ffffff
blue#0000ff
red#ff000
plum#621A4B
taupe#A49B94
taupe30#E4E1DF
bark#554F4A

Buttons

The following elements are styled to look like buttons:

  • <button>
  • <input type="button">
  • <input type="reset">
  • <input type="submit">
  • Any other element with button in its class attribute (see the examples below).

Buttons of different colors can be created by using the CSS class names from the color table as they are (without the -text or -bg suffixes). If no color class is provided, the button will be black (with white text).

blue red plum taupe taupe30 bark 
<a class="blue button" href="#"> blue </div>
<a class="red button" href="#"> red </div>
<a class="plum button" href="#"> plum </div>
<a class="taupe button" href="#"> taupe </div>
<a class="taupe30 button" href="#"> taupe30 </div>
<a class="bark button" href="#"> bark </div>

Helper classes

Color helper classes

The CSS class name column in the color table indicates the color name that is used in a color helper class. These helper classes can be used to quickly and reliably apply theme colors to different elements on the page, and are used in several different ways.

Text Colors {color}--text

  • HTML Elements
  • Blocks
  • Pages

To change the text color, use the CSS class {color}-text, replacing {color} with the CSS class name of a color in the color table.

black
grey 
<div class="black--text"> black </div>
<div class="grey--text"> grey </div>

Background Colors {color}--bg

  • HTML Elements
  • Blocks
  • Pages

To change the background color, use the CSS class {color}-bg, replacing {color} with the CSS class name of a color in the color table.

Be aware that, when using darker colors, you may also want to provide a helper class for a lighter text color to keep things legible.

Black
Grey 
<div class="black--bg"> Black </div>
<div class="grey--bg"> Grey </div>

Text Helper Classes

Alignment align--{direction}

  • HTML Elements
  • Blocks
  • Pages

To change the text alignment, use the CSS classes align-left, align-right, align-center, and align-justify.

Left Aligned

Center Aligned

Right Aligned 

<p class="align--left"> Left Aligned </p>
<p class="align--center"> Center Aligned </p>
<p class="align--right"> Right Aligned </p>

Font sizes fontSize--{#}

  • Blocks
  • HTML elements
  • Pages

To change the font size, use the CSS class fontSize--{size}, replacing {size} with a number from 1 through 10. 1 is the smallest font size, while 10 is the largest. The default font size is 4.

Size 5
Size 10
<div class="fontSize--5">Size 5</div>
<div class="fontSize--10">Size 10</div>

Webfonts various

  • HTML Elements
  • Blocks
  • Pages

To change the webfont, use the CSS class from the table below that corresponds to the desired font.

Webfont name CSS class
Bodoni serif
Franklin Gothic sansSerif

Please remember the following with these helper classes:

  1. Headings have their own default fonts, and a heading's font will not change if you add one of these helper classes to the heading's parent element; you must also add the class to the heading itself.
Bodoni
Franklin Gothic 
<div class="serif"> Bodoni </div>
<div class="sansSerif"> Franklin Gothic </div>

Decorations

border__{color}

  • Blocks:
    • Adjacent
    • Iframe
    • Slider
    • Standard
    • Overlay
    • All other block types
  • HTML elements:
    • <div> <p> <ol> <ul> <a>
    • Buttons
    • All other elements
  • Pages

Colored Borders

To apply these colored borders to the text of an element, you would use one of the following classes through HTML, the Content CSS Input, or the Block Settings CSS Input.

HTML allows you to be specific to a particular paragraph or image.

Content CSS Input allows you to apply it to all content provided in the Content property.

Block Settings CSS Input allows you to apply it to all content within the entire block.

border_grey
border_black

double--border

  • Blocks:
    • Adjacent
    • Iframe
    • Slider
    • Standard
    • Overlay
    • All other block types
  • HTML elements:
    • <div> <p> <ol> <ul>
    • Buttons
    • All other elements
  • Pages

Adds a black outer border and a grey inner border, and aligns text to the center (which can be overridden).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus fringilla commodo. Sed ac mauris feugiat, posuere turpis at, lobortis sapien.

Click Me

Spacing Helper Classes

These Spacing Helper Classes are meant to give you more precise control over what your content looks like, however they are not responsive. The spacing you add using these helpers will be accross all devices. Because of this, you should avoid using overly large spacing, as it will look bad on mobile devices.

Padding pad{direction}--{number}

  • HTML Elements
  • Blocks
  • Pages

To change the padding of a block or HTML element, you can use the CSS class pad{direction}--{number}, replacing {direction} with a flag from the direction table below, and replacing {number} with any number divisble by 5 that is under 100. 5, 10, 15... etc...

Flag Direction
T Top
B Bottom
L Left
R Right
X Left and Right
Y Top and Bottom
{No Flag} If no flag is added, it will add the value to all sides.

In the examples below we've add padding to the bottom of the top div. There is 20px in padding added to the top div, and 60px in padding added to the bottom div.

black 
<div class="padB--20 black--bg"> black </div>
black 
<div class="padB--60 black--bg"> black </div>

Margin mar--{number}

  • HTML Elements
  • Blocks
  • Pages

To change the padding of a block or HTML element, you can use the CSS class pad{direction}--{number}, replacing {direction} with a flag from the direction table below, and replacing {number} with any number divisble by 5 that is under 100. 5, 10, 15... etc...

Flag Direction
T Top
B Bottom
L Left
R Right
X Left and Right
Y Top and Bottom
{No Flag} If no flag is added, it will add the value to all sides.

In the examples below we've add padding to the bottom of the top div. There is 20px in padding added to the top div, and 60px in padding added to the bottom div.

black
grey 
<div class="marB--20 black--bg"> black </div>
<div class="grey--bg"> grey </div>
black
grey 
<div class="marB--60 black--bg"> black </div>
<div class="grey--bg"> grey </div>

Page-level helper classes

no-heading

  • HTML Elements
  • Blocks
  • Pages

Hides the automatically-generated <h1> heading.

no-max-width

  • HTML Elements
  • Blocks
  • Pages

Removes the maximum width constraint on the page's content.

Block Helper Classes

Block Push and Pull {breakpoint}-push/pull--{amount}

  • HTML Elements
  • Blocks
  • Pages

To change block alignment {breakpoint}-push-{amount},{breakpoint}-pull-{amount} where breakpoint is xs,sm,md,lg,xl and amount is an integer 1-10 1,2,3,4,5,6,7,8,9,10.

So if we wanted to center a block of n width we could do the following. {breakpoint}-push--((12 - n)/2)

I'm Centered
I'm Right Aligned
<div class="md-6 grid  grey-bg"> <div class='md-6 md-push--3 black--bg'>I'm Centered</div> </div>
<div class="md-6 grid grey--bg"> <div class='md-6 md-push--6 black--bg'>I'm Right Aligned</div> </div>

Custom Helpers