• Facebook
  • Twitter

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 structures


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. Fonts/Imports
2. Body
3. Preloader
4. Icon Box
5. Dividers
6. CTA
7. Accordion
8. Product Box
9. Slick Corusel
10. Gallery
11. Modal
12. Footer
13. Hovers
14. Lists
15. Person Box
16. Blog
17. Twitter
18. Custom Checkbox
19. Contact
20. Comments
21. Counter
22. Progress Bars
23. Media Query

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.

  • UAcademy uses utilities for the following categories:
  • Typography
  • Display Types
  • Paddings
  • Margins
  • Text Decorations
  • Font Style
  • Colors
  • Border
  • Position
  • Background Colors
  • Images
  • Text Size

Topbar


There are four variations of top bar:

Default (no extra class needed)

Screenshot

Topbar - Default

Topbar – Default color version

Classes:

— ct-topBar

 

HTML markup

Dark (ct-topBar–dark)

Screenshot

Topbar - Dark

Topbar – Dark color version

Classes:

— ct-topBar

— ct-topBar–dark

 

HTML markup

Motive (ct-topBar–motive)

Screenshot

Topbar - Dark color version

Topbar – Motive color version

Classes:

— ct-topBar

— ct-topBar–motive

HTML markup

Transparent (ct-topBar–transparent)

Screenshot

Topbar - Transparent color version

Topbar – Transparent color version

Classes:

— ct-topBar

— ct-topBar–transparent

HTML markup


Nawigation


Screenshoot

Nawigation example

Nawigation example

Classes
There are several options for menu and topbar scrolling effects
.yamm
.ct-headroom–scrollUpMenu
.ct-headroom–scrollUpTopBar
.ct-headroom–scrollUpBoth
.ct-headroom–fixedTopBar
.ct-headroom–fixedMenu
.ct-headroom–fixedBoth
.ct-headroom–hideMenu

HTML markup

Notice:
The following javascripts are required for the effects above:
Learn More:
You fill find whole documentation of plugin in < script src="assets/plugins/headroom/init.js"></script>

Buttons


Button
Button

There are four sizes of buttons:

  1. btn
  2. btn-xs
  3. btn-sm
  4. btn-lg

Each can have one of the following variations:

  1. .btn-default
  2. .btn-primary
  3. .btn-primaryDark
  4. .btn-success
  5. .btn-info
  6. .btn-warning
  7. .btn-danger
  8. .btn-dark
  9. .btn-link
  10. .btn-loadMore
  11. .btn-transparent
  12. .btn-bordered–dark
  13. .btn-bordered–Light

HTML markup:


Slick Slider


There are three version of this slider in the UAcademy

Default (no extra class needed)

Screenshoot

Slick Slider - Default version

Slick Slider – Default version

HTML markup

Title bigger font size (ct-slick–titleAboveBig)

Screenshoot

Slick Slider - Title bigger font size version

Slick Slider – Title bigger font size version

HTML markup

Title smaller font size (ct-slick–titleAboveSmall)

Screenshoot

slider--titleAboveSmall

Slick Slider – Title smaller font size version

HTML markup

Standard navigation for slider (ct-slick-defaultNavigation)

Screenshoot

Slick Slider - Default navigation

Slick Slider – Default navigation

HTML markup

JavaScript markup for all of the sliders

Item slider settings

Sidebar


This sidebar is used in the UAcademy blog page

Screenshoot

Blog Sidebar

Blog Sidebar

Classes (widgets):
— ct-search-widget (class used for search bar)
— ct-widget-categories (class used for categories in blog)
— ct-widget-latestPosts (class used to show latests posts)
— widget-flickr (class used to show flickr)
— tagcloud (class used to show tags)
HTML markup


Product box


This UAcademy has 2 versions of Product box

Default (no extra class needed)

Screenshoot

Product Box - Default version

Product Box – Default version

productBox--inline

HTML markup

Inline (ct-productBox–inline)

This style will set the image to the left and content on the right side.

Screenshoot

Product Box - Inline version

Product Box – Inline version

HTML markup


Price Box


Screenshoot

Pricing Box

Pricing Box

HTML markup


Portfolio


Portfolio in UAcademy is using Isotope + Magnigic Popup

Screenshoot

Classes
.ct-gallery-filters (isotope navigation)
.ct-gallery
.ct-gallery–col1
.ct-gallery–col2
.ct-gallery–col3
.ct-gallery–col4
.ct-gallery–col5

HTML markup


Person Box


This UAcademy has three versions of Person Box

Default

Screenshoot

Person Box - Default version

Person Box – Default version

HTML markup

Inline

Screenshoot

Person Box - Inline version

Person Box – Inline version

HTML markup

Inline Description

Screenshoot

Person Box - Inline Description version

Person Box – Inline Description version

HTML markup


Icon Box


UAcademy comes with several types of Icon Boxes:

Screenshots for button variations

iconBox - Transparent version

iconBox – Transparent version

iconBox - Solid border version

iconBox – Solid border version

iconBox - Solid big version

iconBox – Solid big version

iconBox - Small transparent inline round version

iconBox – Small transparent inline round version

iconBox - Small transparent dark inline version

iconBox – Small transparent dark inline version

iconBox - Image version

iconBox – Image version

Classes
— ct-iconBox (core class)
— ct-iconBox–small (define size of iconbox)
— ct-iconBox–Big (define size of iconbox)
— ct-iconBox–solidBorder (on hover border changed to dark green)
— ct-iconBox–solid (on hover background to black)
— ct-iconBox–solidBlue (different background, hover to black)
— ct-iconBox–solidYellow (different background, hover to black)
— ct-iconBox–solidRed (different background, hover to black)
— ct-iconBox–solidDark (different background, hover to black)
— ct-iconBox–withImageGreyScale (grayscale on hover)
— ct-iconBox–transparent (transparent background)
— ct-iconBox–inline (icon to the left, title to right)

Example of markup


Footer


Screenshot

Footer

Footer

One type with different sections

— ct-prefooter
— ct-footer

HTML markup