CSS Files and Structure


If you would like to edit the color, font, or style of any elements, just 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:

Appearing with Animation when element in viewport

Animation can be turn off just be remove “withAnimation” class from body.
Usage:
– add “animated” class to element and data-fx=”animation-type”. That’s it.

Available animation : http://daneden.github.io/animate.css/

  • data-fx=”hinge”
  • data-fx=”bounce”
  • data-fx=”flash”
  • data-fx=”pulse”
  • data-fx=”shake”
  • data-fx=”swing”
  • data-fx=”tada”
  • data-fx=”wobble”
  • data-fx=”bounceIn”
  • data-fx=”bounceInDown”
  • data-fx=”bounceInLeft”
  • data-fx=”bounceInRight”
  • data-fx=”bounceInUp”
  • data-fx=”bounceOut”
  • data-fx=”bounceOutDown”
  • data-fx=”bounceOutLeft”
  • data-fx=”bounceOutRight”
  • data-fx=”bounceOutUp”
  • data-fx=”fadeIn”
  • data-fx=”fadeInDown”
  • data-fx=”fadeInDownBig”
  • data-fx=”fadeInLeft”
  • data-fx=”fadeInLeftBig”
  • data-fx=”fadeInRight”
  • data-fx=”fadeInRightBig”
  • data-fx=”fadeInUp”
  • data-fx=”fadeInUpBig”
  • data-fx=”fadeOut”
  • data-fx=”fadeOutDown”
  • data-fx=”fadeOutDownBig”
  • data-fx=”fadeOutLeft”
  • data-fx=”fadeOutLeftBig”
  • data-fx=”fadeOutRight”
  • data-fx=”fadeOutRightBig”
  • data-fx=”fadeOutUp”
  • data-fx=”fadeOutUpBig”
  • data-fx=”flip”
  • data-fx=”flipInX”
  • data-fx=”flipInY”
  • data-fx=”flipOutX”
  • data-fx=”flipOutY”
  • data-fx=”lightSpeedIn”
  • data-fx=”lightSpeedOut”
  • data-fx=”rotateIn”
  • data-fx=”rotateInDownLeft”
  • data-fx=”rotateInDownRight”
  • data-fx=”rotateInUpLeft”
  • data-fx=”rotateInUpRight”
  • data-fx=”rotateOut”
  • data-fx=”rotateOutDownLeft”
  • data-fx=”rotateOutDownRight”
  • data-fx=”rotateOutUpLeft”
  • data-fx=”rotateOutUpRight”
  • data-fx=”slideInDown”
  • data-fx=”slideInLeft”
  • data-fx=”slideInRight”
  • data-fx=”slideOutLeft”
  • data-fx=”slideOutRight”
  • data-fx=”slideOutUp”
  • data-fx=”rollIn”
  • data-fx=”rollOut”

CSS Files & Structure

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

1.IMPORTS
2.VARIABLES
3.SWITCHER
4.HEADER AND GENERAL SETTINGS
5.TESTIMONIALS
6.SERVICES
7.PRICING PLAN
8.404 AND PAGE TITLE
9.MAINTENANCE
10.ACCORDION
11.ARTICLES
12.BLOG
13.BLOG WIDE & MASONRY
14.BLOG WIDE
15.BLOG MASONRY
16.PAGINATION
17.PERSON BOX
18.SPECIAL OFFERS
19.FOOTER
20.SOCIAL ICONS
21.ICON BOX
22.SECONDARY ICONBOX
23.GALLERY
24.ADVERT
25.GOOGLE MAP
26.CONTACT DETAILS
27.SERVICE ICON
28.EXCEPTIONAL QUALITY
29.OUR HISTORY
30.POPULAR TIPS
31.CALL TO ACTION
32.SCHEDULE TABLE
33.ANIMATION
34.VIDEO
35.FEATURES
36.CHARTS

Utilities

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

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