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:

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.

01. Imports

a) Variables
b) font awesome
c) Typography
d) Mediasection
e) Portfolio
f) Buttons
g) Hover
h) Mixins
i) Animate
j) Utilities
k) Menu
l) Gallery
m) Accordion
n) Widget
o) Toggables
p) Form
q) Datepicker
r) Magnific popup
s) Slick slider
02 .Wrapper and Snap.js
03. Media section
04. Checkout
05. Thumbnails
06. ImageBoxes
07. PersonBoxes
08. Pricing Box
09. Icon box
10. Socials
11. Google map
12. Header
13. footer
14. Last Works
15. Article Boxes
16. Image wrappers
17. Shop
18. Raiting
19. Text box
20. Comment Box
21. Lists
22. Video
23. Preloader
24. Scrollbar
25. Animation

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.

{Theme} uses utilities for the following categories:

  • Font size:
    • .ct-u-size13{
      font-size: 13px;
      }
    • .ct-u-size13{
      font-size: 13px;
      }
  • Paddings – the following values of padding can be added to any element you want: 10px, 20px, 30px. 40px, 50px, 60px, 70px, 80px, 90px, 100px, 110px, 120px, 130px, 140px, 150px – each value can be added to bottom, top or both top and bottom paddings, according to the following CSS class naming scheme:
    • .ct-u-paddingBoth10
    • .ct-u-paddingTop10
    • .ct-u-paddingBottom10
    • .ct-u-paddingBoth20
    • .ct-u-paddingTop20
    • .ct-u-paddingBottom20
    • .ct-u-paddingBoth30
    • .ct-u-paddingBoth30
    • .ct-u-paddingBottom30

    Just add class with padding value to any HTML element.

  • Margins – the following values of margins can be added to any element you want: 10px, 20px, 30px. 40px, 50px, 60px, 70px, 80px, 90px, 100px, 110px, 120px, 130px, 140px, 150px – each value can be added as bottom, top or both top and bottom margin, according to the following CSS class naming scheme:
    • .ct-u-marginBoth10
    • .ct-u-marginTop10
    • .ct-u-marginBottom10
    • .ct-u-marginBoth20
    • .ct-u-marginTop20
    • .ct-u-marginBottom20
    • .ct-u-marginBoth150
    • .ct-u-marginBoth150
    • .ct-u-marginBottom150
  • Colors
    • .ct-u-colorWhite
    • .ct-u-colorFaint{
      .ct-m-opacity(0.4);
      }
    • .ct-u-colorBlack{
      color: #000000;
      }
    • .ct-u-colorInfo{ color: @alert-info-text;
      }
    • .ct-u-colorSuccess{ color: @alert-success-text;
      }
    • .ct-u-colorWarning{ color: @alert-warning-text;
      }
    • .ct-u-colorDanger{ color: @alert-danger-text;
      }
    • .ct-u-colorBody{ color: @body-color;
      }
  • Fonts
    • .ct-u-fontType-1{
      font-family: “PT Sans”,sans-serif;
      }
    • .ct-u-fontType-2{
      font-family: “Roboto Slab”, sans-serif;
      }
    • .ct-u-fontType-3{
      font-family: “Montserrat”, sans-serif;
      }
  • Background Colors
    • .ct-u-backgroundWhite{
      background-color: #ffffff;
      }
    • .ct-u-backgroundGray{
      background-color: #cacaca;
      }
    • .ct-u-backgroundBody{
      background-color: @body-color;
      }
    • .ct-u-backgroundSuccess{
      background-color: @alert-success-bg;
      h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{
      color: @alert-success-bg;
      }
      }
    • .ct-u-backgroundWarning{
      background-color: @alert-warning-bg;
      h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{
      color: @alert-warning-bg;
      }
      }
    • .ct-u-backgroundDanger{
      background-color: @alert-danger-bg;
      h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{
      color: @alert-danger-bg;
      }
      }
    • .ct-u-backgroundInfo{
      background-color: @alert-info-bg;
      h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{
      color: @alert-info-bg;
      }
      }
    • .ct-u-backgroundBlack{
      background-color: #000000;
      h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{
      color: #ffffff;
      }
      .ct-raiting{
      color: #ffffff;
      } 

      .lead{
      .fa-star.ct-u-colorBlack{
      color: #ffffff;
      }
      }
      }

  • Overflow
    • .ct-u-overflow-show{
      overflow: visible;
      }
    • .ct-u-overflow-hide{
      overflow: hidden;
      }
  • Display types
    • .ct-u-displayTable, .ct-u-displayTableVertical, .ct-u-displayTableBottom , .ct-u-displayTableTop{
      display: table;
      width: 100%;
      }
    • .ct-u-displayTableVertical, .ct-u-displayTableBottom, .ct-u-displayTableTop{
      height: 100%;
      }
    • .ct-u-displayTableTop{
      .ct-u-displayTableCell{
      vertical-align: top;
      }
      }
    • .ct-u-displayTableVertical{
      .ct-u-displayTableCell{
      vertical-align: middle;
      }
      }
    • .ct-u-displayTableBottom{
      .ct-u-displayTableCell{
      vertical-align: bottom;
      }
      }
    • .ct-u-displayTableRow{
      display: table-row;
      }
    • .ct-u-displayTableCell{
      display: table-cell;
      }
  • Borders
    • .ct-u-colorWhite{
      .ct-u-borderAll{
      border-color: #ffffff
      }
      }
    • .ct-u-borderAll{
      border: 1px solid;
      .ct-u-colorWhite{
      border-color: #ffffff;
      }
      }