• Facebook
  • Twitter

Farm Fresh – Responsive HTML5 Template

Support Our Blog

Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to start new ticket on this page. Thanks so much!


Scope of free support


We can help you with:

  1. Responding to questions or problems regarding the item and its features
  2. Fixing any discovered item’s bugs
  3. Providing updates to ensure compatibility with new software versions

HTML Structure

This theme is built upon bootstrap framework and is fully responsive. It adapts to window resolution and looks good on all devices including iPad and iPhone.
See for yourself (resize your browser).

If you would like to read more
about bootstrap framework click here :

Bootstrap Documentation

Grid System and Single row structure

The default Bootstrap grid system utilizes 12 columns. It’s responsive grid and adapts to viewport. Below 767px viewports, the columns become fluid and stack vertically. The fluid grid system uses percents instead of pixels for column widths. Each row always include 12 columns (for example col-md-8 + col-md-4 = col-md-12).
Bootstrap documentation: here

Basic grid HTML:

Page structure

Below you will find default page structure :

CSS Files and Structure

If you would like to edit the color, font, or style of any elements, you would do the following:

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn’t a similar style that has more weight.


So, to ensure that your new styles are applied, make sure that they carry enough “weight” and that there isn’t a style lower in the CSS file that is being applied after yours.


The theme includes a css file wich you can use to edit the colors.
You just need to add the corresponding CSS file to the head of the page like this:

Main Menu structure

Just change brand name, upload your logo to images/content/ folder and you’re ready to go!

In order to create mega menus read the documentation here:

Yamm 3 Documentation


We’ve included 360+ font icons.

Awesome Icons – http://fontawesome.io/icons/

HTML markup:

CSS Files & Structure

We’ve included 2 files.
bootstrap.css contains Bootstrap 3 Library.
style.css file contains general styles.

1. Variables
2. Bootstrap
3. Mixins
4. Animate
5. Magnific
6. Animate
7. Typography
8. Maps
9. Menu
10. Social Icon
11. Image Box
12. Headline
13. Slick
14. Newsletter
15. Footer
16. Form
17. Modal
18. Buttons
19. Breadcrumbs
20. Blog
21. Divider
22. Pagination
23. Media Object
24. Widget
25. Blockquote
26. Comment
27. Portfolio
28. Info Box
29. Accordion
30. Tabs
31. Table
32. Event
33. Tweet
34. Icon Box
35. Pricing Tables
36. Progress Bar
37. Counters


Utility classes are low-level structural and positional traits. Utilities can be applied directly to any element, multiple utilities can be used tohether and utilities can be used alongsie component classes.

Utilities are intended for frequently used CSS properties and patterns, like: floats, containing floats, vertical alignemnt, text tryncation. Relying on utilities can help to reduce repetition and provide consistend implementations.

  • Farm Fresh uses utilities for the following categories:
  • Typography
  • Display Types
  • Paddings
  • Margins
  • Line height
  • Borders
  • Colors
  • Transform
  • Section elements


Farm Fresh comes with two main types of sliders. Each type can be additionally customized by data-attributes.

Simple slider

Slick slider

Slick slider

HTML markup for slider:

You can edit arrows types by adding one of the following classes to <section>:

  • ct-slick-arrow–type1
  • ct-slick-arrow–type2
  • ct-slick-arrow–type3
  • ct-slick-arrow–type4
  • ct-slick-arrow–type5
  • ct-slick-arrow–type6

There are also two types of image hover effect, which can be edited analogously, with the following classes:

  • ct-slick-thumbnailHover–type1
  • ct-slick-thumbnailHover–type2

Synch Slider

Synch slider

Synch slider

HTML markup:

You can edit synch slider arrow positions with the following classes:

  • ct-slick–synced–type1
  • ct-slick–synced–type2

Both sliders require using the following scripts:


Farm Fresh allows you to easily create Breadcrumbs with page navigation and background image. Image source and element height can be edited via data-attributes:

  • data-bg-image
  • data-height

Of course you need to use first basic HTML markup:

The following script is responsible for Breadcrumbs:




Create event on your website with the following HTML markup:

You can select one of two type of events by changing type number in class name:

  • ct-event-item–type1
  • ct-event-item–type2


You can embed google map to your website with simple HTML markup:

Parameters like: map height, location address and map zoom, can be edited with the following data-attributes:

  • data-height,
  • data-location,
  • data-zoom

Don’t forget to include the following scripts to page with map:




We preapred for you several types of forms – all available options can be found here.
Email address, where we should send messages from Newsletter can be edited via HTML/assets/form/config.php file. Just use your email address instead of recipient@mail.com

Form configuration

Form configuration

Newsletter HTML markup:

Newsletter form

Newsletter form


There are two available types of tabs.

Tabs - type 1

Tabs – type 1

Tabs - type 2

Tabs – type 2

Tab type can be switched by changing the type class name to the following:

  • ct-tabs–type1
  • ct-tabs–type2

For both types the rest of HTML markup is the same:


There are two types of accordions in Farm Fresh

Accordion - type 1

Accordion – type 1

Accordion - type 2

Accordion – type 2

You can select each type by using proper CSS class in HTML markup.

Classes to select:
– ct-accordion

  • ct-accordion–type1
  • ct-accordion–type2

HTML markup:


Create a blog page with simple HTML markup:

Blog Masonry

Blog Masonry

If you would like to use Masonry layout for the blog, don’t forget to use the following scripts on blog page:

You can modify blog columns settings with following CSS variations:

– ct-blog-container

  • ct-blog-masonry
  • none – it’s not required to use ‘masonry’ option
  • ct-blog-masonry–col2
  • ct-blog-masonry–col3
  • ct-blog-masonry–col4

You can also select single post appearance with the following classes:

  • ct-gallery-item–type1
  • ct-gallery-item–type2
  • ct-gallery-item–type3


To add pagination, use the simple HTML markup:






Every blog page or blog single post looks better if you add there users comments. You can do it with the following HTML markup:

Info box

Info Box by default contains image with title and text content.

Info Box

Info Box

There are several layout variation for InfoBox:
– ct-infoBox
— ct-infoBox–type1
— ct-infoBox–type2
— ct-infoBox–type3

– ct-infoBox-media
— ct-infoBox-media–left
— ct-infoBox-media–right

Which can be added to the following HTML markup:

Icon Box

Icon Box

Icon Box

You can easily change what icon will be displayed in box by changing icon class. Here you will find full set of icons.

Full Icon box HTML markup looks like the following:

Image Data

With Farm Fresh you can add custom text information on your image. For example you can add there date information.

Image data

Image data

Use for this the following HTML markup:

Element background can be edited with the following CSS:

In assets/css/style.css file.

Additionally you can change element alignment and float by editing classes names in HTML with the following variables:

Image Box

Farm Fresh comes with several types of image boxes. All of them creates Images with caption.

Below you will find example of HTML markup to use:

The only required class to use is ct-imageBox-container. Other classes can be replaces with the following variations:

  • ct-imageDecoration
  • none
  • ct-decoration-decorationBorder
  • ct-imageDecoration–type1
  • ct-imageDecoration–type2
  • ct-imageDecoration–type3
  • ct-imageDecoration–type4
  • ct-imageDecoration–type5


  • ct-imageBox-container
  • ct-imageBox-container-shadow


  • ct-imageBox-wrapperInner
  • ct-imageBox-wrapperInner-type1
  • ct-imageBox-wrapperInner-type2
  • ct-imageBox-wrapperInner-type3
  • ct-imageBox-wrapperInner-type4
  • ct-imageBox-wrapperInner-type5


  • ct-imageBox-hover
  • none
  • ct-imageBox-hover–type1
  • ct-imageBox-hover–type2
Image Box - type 1

Image Box – type 1

Image Box - type 2

Image Box – type 2

Image Box - type 3

Image Box – type 3

Image Box - type 4

Image Box – type 4

Pricing Tables

Present your prices with easy and clean tables.

Pricing table

Pricing table

It can be added with simple HTML markup:


Create simple portfolio with filters.

To use filters add the following HTML markup before your portfolio code:

Notice: data-filter in each filter link will be used for filtering. For example: if you want portfolio item to be displayed after clicking on FRESH filter you need to add fresh class to portfolio item, like the following:



Main Portfolio container can be created with the following markup:

You can change Portfolio layout with the following classes:
– ct-portfolio-container
——– ct-portfolio-masonry
————— none – you don’t have to add “masonry” class at all
————— ct-portfolio-masonry–col2
————— ct-portfolio-masonry–col3
————— ct-portfolio-masonry–col4

Remember to include the following script on your portfolio page:

Magnific Popup

Magnific Popup

Magnific Popup

If you want to add Magnific Popup effect to your image, you need to wrap image element in link with proper classes, like the following:

And include with HTML page the following script:


Create popup boxes with the following HTML markup:






Every section can start with heading, created with the following HTML:

You can change heading alignment without using CSS styles, just add one of the following classes to HTML markup:
– ct-headline
— text-center
— text-left
— text-right


Do you want to your motto or favourite quote?

It’s simple just use the following HTML with your custom text:




Organize your page content with the simple divider:

You can select if you want to use big or small divider by editing class name in HTML markup:

  • ct-divider–small
  • ct-divider–big


Buttons with image

Buttons with image

Check all of available buttons on our demo page

Below you will find button HTML markup:

You can edit button size with default bootstrap sizing – here you will find more information.

There are also three button types, which come with the Farm Fresh. They can be also selected with CSS classes:

  • ct-btn-link
  • ct-btn-default
  • ct-btn-image


All javascripts are placed in folder /js. In main.js file we implement all functions calls.
This theme uses following Javascript scripts:

  • chart.min
  • jquery.mb-comingsoon.min
  • jquery.countTo
  • jquery.stellar.min
  • gmap3.min
  • headroom http://wicky.nillia.ms/headroom.js/
  • jQuery.headroom
  • jquery.magnific-popup.min
  • jquery.pagescroller.lite
  • imagesloaded
  • jquery.isotope.min
  • slick.min http://kenwheeler.github.io/slick/


This plugin call function when element appear in viewport. This is used in custom animation, progress bars, counter timer.
Documentation: https://github.com/bas2k/jquery.appear/


There are several types of charts, which you can use to display your statistics data.


Circle chart

Circle chart

Values and colors of Circle Chart can be edited with data-attributes in HTML code:

Don’t forget to use also the following script for this:

Bar chart

Bar chart

Bar chart

Please use simple HTML markup for bar chart:

You can modify all settings via the following Javascript:

Line Chart

Line chart

Line chart

Analogously to Bart charts, you can use Line chart with simple HTML markup:

And edit all parameters with the following Javascript:

Polar Chart

Polar chart

Polar chart

Insert the polar chart with the following HTML markup:

Polar chart can be customized with the following Javascript:


Count to

Count to

Count to

Add your custom values with the data-attributes in the following HTML markup:

Available data-attributes to edit are:

  • data-ct-to,
  • data-ct-from,
  • data-ct-speed,
  • data-ct-decimals

For proper counter work you need to include the following script:

Comming Soon

Comming Soon

Comming Soon

The date and speed can be edited in the following Javascript:

Full HTML markup:

Progress bar

Indicate progress with Progress Bars!

Progress bars

Progress bars

You can edit bars values and colors with data-attributes used with the following HTML markup:

The following script is responsible for proper work of Progress Bars:


Configure your twiiter credentials in assets/twitter/config.php. Here you will find information how to generate required Keys and Tokens.

Once your config.php is setup you can embed your tweets with the following HTML markup:

You need to embed also twitter script on page with Twitter:

Notice: live Twitter feed requires enabled PHP, so it won’t be displayed correctly on your localhost nor on servers, which are not supporting PHP.

Sources & Credits

The following sources and files have been used to build up this theme

Elite Author
We are elite
Who we are

Hi, we are createIT. We create IT. Web applications and websites to be precise.

And we are REALLY good at it.

Get to know us at www.createIT.pl
Thanks for buying!