Outsourcing
  • Facebook
  • Twitter

Macaroon – 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.

I.E.

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.

Colors

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

Icons

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. Font Awesome
2. Animate.css
3. Typography
4. Buttons
5. Menu
6. Forms
7. Hovers
8. Tables
9. Utilities
10. Media Sections – video/parallax/kenburns
11. Accordions
12. Progress Bar
13. Tabs
14. Mixins
15. Select2
16. Wrapper
17. Page Header
18. Footer
19. Socials Types
20. Counter
21. Blog
22. Blog Panel
23. Blog Comments
24. Pricing Boxes
25. Blockquote
26. Sliders
27. Google Maps
28. Widgets
29. Magnific Popup
30. After & before slider(twentytwenty)
31. Templates

Utilities

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.

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

Navbar and Top bar


There are several classes, which will help you to provide global changes for your template.

To edit top bar and navigation styles use on body tag:

  • Fixed Navigation – .ct–navbarFixed
  • Fixed Top Bar – .ct–TopBarFixed

You can also use the following Customization options:

  • Topbar background – @ct-topBar-background
  • Topbar color – @ct-topBar-color
  • Topbar Font Family/Navbar Font Family – @ct-navbar-font
  • Navbar background – @ct-navbar-background
  • Navbar Color – @ct-navbar-color

Features



Icon Box


There are 4 types of icon boxes:

  • ct-iconBox–type1
    Icon Box Type 1

    Icon Box Type 1

  • ct-iconBox–type2
    Icon Boxes Type 2

    Icon Boxes Type 2

  • ct-iconBox–type3
    Icon Boxes Type 3

    Icon Boxes Type 3

  • ct-iconBox–type4
    Icon Boxes Type 4

    Icon Boxes Type 4

Every type with several color options:

  • ct-iconBox–blue
  • ct-iconBox–green
  • ct-iconBox–orange
  • ct-iconBox–gold
  • ct-iconBox–primary
  • ct-iconBox–gray
  • ct-iconBox–purple

Just edit classes names!


Image Box


Create beautiful image box with the following HTML:

And javascript:

Image Box

Image Box


Person Box


Create Person Boxes in two awesome variations:

  • ct-personBox–thumb
  • ct-personBox–left
Person Boxes

Person Boxes

Just use simple HTML markup with one available variations:

You can also modify Person Boxes colors with the following CSS classes:

  • ct-personBox–primary
  • ct-personBox–blue
  • ct-personBox–green
  • ct-personBox–purple
  • ct-personBox–blue
  • ct-personBox–gray
  • ct-personBox–gold

Product Box


Use one of two types of product box:

  • ct-productBox–type1
    Product Box Type 1

    Product Box Type 1

  • ct-productBox–type2
    Product Box Type 2

    Product Box Type 2

Both types of boxes have several color variables:

  • ct-productBox–green
  • ct-productBox–primary
  • ct-productBox–blue
  • ct-productBox–gold
  • ct-productBox–purple
  • ct-productBox–orange
  • ct-productBox–gray

Buttons


In Macaroon even buttons look awesome.

Buttons

Buttons

Use simple markup:


Socials


You can easily create Socials with simple HTML markup:

Use one of Awesome Icons to create your own Socials.
And modify colors with simple CSS classes:
ct-socials–primary
ct-socials–blue
ct-socials–green
ct-socials–orange
ct-socials–purple
ct-socials–gold
ct-socials–gray

Socials

Socials


Call To Action Box


Use simple HTML markup to create Call to Action box:

Call To Action Box

Call To Action Box

You can select from several color variables – just change one CSS class:

  • ct-callToActionBox–primary
  • ct-callToActionBox–green
  • ct-callToActionBox–orange
  • ct-callToActionBox–blue
  • ct-callToActionBox–gold
  • ct-callToActionBox–purple
  • ct-callToActionBox–gray

Pricing Tables


Create standard pricing Boxes or use variation:

  • ct-pricingBox–important

To highlight one of them.

Pricing Boxes

Pricing Boxes

Everything with simple HTML markup:

Use on of predefined colors with CSS class:

  • ct-pricingBox–gold
  • ct-pricingBox–primary
  • ct-pricingBox–blue
  • ct-pricingBox–green
  • ct-pricingBox–orange
  • ct-pricingBox–gray
  • ct-pricingBox–purple

Counter


Macaroon comes with easy to customize Counter

Counter

Counter

You can add it anywhere you want with simple HTML markup:

You can also relate the counter to IconBox with the following markup:


Javascript


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

  • Bootstrap v 3 framework (powerful front-end framework for faster and easier web development)
  • jQuery v1.10.2 (A fast javascript library that Foodtruckifies how to traverse HTML documents, handle events, perform animations.)
  • jQuery FlexSlider v2.2.0
  • GMAP3 Plugin for JQuery v. 5.1.1
  • jQuery.appear
  • jQuery Stellar
  • jQuery tweet
  • Modernizr 2.0.6
  • PageScroller
  • final-countdown.js
  • snap.js
  • device.js 0.1.58
  • chart.js

Google Map (GMAP3 Plugin)

This is google map with custom marker, you can define couple parameters:

  • data-location – address to show
  • data-height – map height (if undefined height will be 220px)
  • data-offset – by how many map should be repositioned from marker center point (default -30)

It uses gmap3 plugin.
Documentation: here
HTML Markup:

All javascript code can be found in js/main.js file.

jquery.appear

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/

Charts.js

This plugin is used to make graphics.
Documentation: http://www.chartjs.org/


Flexslider


Main Slider with inset container (with Progress Bar):

HTML markup

Full Screen Slider (with Progress Bar):

HTML markup

Arrow Types:

HTML markup

ct-flexslider–arrowType1
ct-flexslider–arrowType2

Controls Type:

HTML markup

ct-flexslider–controls – default
ct-flexslider–whiteControls

Flexslider

Content / Images Slider.
Each parameter can be defined as data attribute :

  • data-namespace
  • data-selector
  • data-animation
  • data-easing
  • data-direction
  • data-reverse
  • data-animationloop
  • data-smoothheight
  • data-startat
  • data-slideshow
  • data-slideshowspeed
  • data-animationspeed
  • data-initdelay
  • data-randomize
  • data-thumbcaptions
  • data-pauseonaction
  • data-pauseonhover
  • data-pauseinvisible
  • data-usecss
  • data-touch
  • data-video
  • data-controlnav
  • data-directionnav
  • data-prevtext
  • data-nexttext
  • data-keyboard
  • data-multiplekeyboard
  • data-mousewheel
  • data-pauseplay
  • data-pausetext
  • data-playtext
  • data-itemwidth
  • data-itemmargin
  • data-minitems
  • data-maxitems
  • data-move
  • data-allowoneslide
  • data-controlscontainer
  • data-manualcontrols
  • data-sync
  • data-asnavfor

Read the documentation here:

Flexslider Documentation

And js initialization (js/main.js file), there you can change slider parameters:


Contact Form


Template comes with ready to use:

  • Contact Form
  • Newsletter Form

All needed files are in /form directory.
Remember to includeon page.
To configure form just edit form/config.php and change e-mails to your own :

That’s it!

Contact Form

HTML Markup:


Twitter Feed


This is live twitter feed. This plugin will grab your latest tweets and display them on page.
Configuration: – just edit twitter/config.php file :

Where can I get these keys, tokens, etc?

Twitter API requires authentication to display tweets from your account.
To twiiter feed work you need to create the ‘application’
and generate 4 special keys for your twitter account via https://dev.twitter.com/apps:
– Consumer key (key)
– Consumer secret (secret)
– Access token (token)
– Access token secret (token_secret)
Video tutorial : “How to create Twitter App”
http://vimeo.com/60891535


Sources & Credits


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

Twitter Bootstrap – http://twitter.github.com/bootstrap/
jQuery – http://www.jquery.com


Elite Author
We are elite
CreateIT

Check our blog

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!