CSS code overview

ckav-main.css : This CSS file include all widgets and main structure related codes. We strongly suggest do not modify directly.

---

Helper CSS

ckav-helper.css : This CSS include all helper CSS classes which are widely used in layout structure to generate design templates. We strongly suggest take full overview to know how we used these classes into layout structure. These classes help you to manipulate design structure very easily. Best way to get classes overview directly from helper.css file.

---

COMMON

• full-wh class used to cover full width x height overlay div or background in any section. full-wh class use position absolute so it alway dependent on parent tag position relative.
• no-border : For reseting borders
• position-rel : Apply position relative on tag
• position-abs : Apply position absolute on tag
• l0 : Apply left position 0. Generally apply when element use absolute position.
• r0 : Apply right position 0. Generally apply when element use absolute position.
• list-reset : Used to reseting ul HTML element.

---

Z-INDEX

Manage z-index of element when position relative or absolute

zindex-01, zindex-02, zindex-03, zindex-04, zindex-05, zindex-06, zindex-07, zindex-08, zindex-09, zindex-010

---

OPACITY

Manage opacity of elements

opacity-01, opacity-02, opacity-03, opacity-04, opacity-05, opacity-06, opacity-07, opacity-08, opacity-09

---

BUTTONS

All button classes which used in template

color-button-default, color-button-primary, color-button-secondary, color-button-white, color-button-dark

				Button text
				Button text
				Button text
				Button text
				Button text
				

Apply class solid along with button classes for solid button

				Button text
				

Apply class large, medium, small, mini, tiny along with button classes to adjust button sizes

				Button text
				

Apply class round along with button classes for round button

				Button text
				

---

COMMON TYPOGRAPHY

Apply class heading for general titles

				
Title text
				

Apply class xxxlarge, xxlarge, xlarge, large, medium, small, mini, tiny along with title class to adjust size of title

				
Heading text
				

Apply class heading-sub for sub heading text

				
Sub title text
				

Apply class large, medium, small, mini, tiny along with heading-sub class to adjust size

				
Sub heading text
				

Apply class typo-light on parent of title or other content to quickly change text color white on dark background

				

					
heading text
					
Sub heading text
	
				
				

---

FONTS SIZES

Use below list of classes to adjust font size anywhere in content

fs-11, fs-12, fs-13, fs-14, fs-16, fs-18, fs-20, fs-22, fs-24, fs-26, fs-28, fs-30, fs-32, fs-34, fs-36, fs-38, fs-40, fs-42, fs-44, fs-46, fs-48, fs-50, fs-52, fs-54, fs-56, fs-58, fs-60, fs-62, fs-64, fs-66, fs-68, fs-70, fs-72, fs-74, fs-76, fs-78, fs-80, fs-82, fs-84, fs-86, fs-88, fs-90, fs-100, fs-110, fs-120, fs-130, fs-140, fs-150, fs-160, fs-170, fs-180, fs-190, fs-200

				

					
Title text
					
Sub title text
				
				

---

FONT FAMILY

Use below list of classes to change font-family

font-1, font-2

---

TEXT COLORS

Use below list of classes to change text colors

.color-text-default, .color-text-primary, .color-text-secondary, .color-text-white, .color-text-dark, .color-text-light

---

ALIGNMENT

Use below listed classes to adjust alignment of content or elements

• align-left => Text align left
• align-right => Text align right
• align-center => Text align center
• flex-tl => Align inner elements top left
• flex-tc => Align inner elements top center
• flex-tr => Align inner elements top right
• flex-cc => Align inner elements center center
• flex-cl => Align inner elements center left
• flex-cr => Align inner elements center right
• flex-bc => Align inner elements bottom center
• flex-bl => Align inner elements bottom left
• flex-br => Align inner elements bottom right

Example of flex alignment - center center inner element

				

					

						
heading text
						
Sub heading text
						
Lorem ipsum dolor sit amet, consectetur adipisicing elit
					
	
				
				

---

Background utilities

• Background image

  Apply data-bg-image="images/bg1.jpg" attribute on element with your image path to apply background image

  						
  
  						...
  						
  						

  Use helper classes bg-cc bg-cover to adjust background image on element.

• Background gradient color

  Apply data-radial-gradient="rgba(0,0,0, 0.1)|rgba(0,0,0, 0.4)" attribute. Apply two background colors with "|" separator.

• Parallax background image

  Apply attribute to apply parallax image.

  Please note parallax image only apply on transparent element.

---

Grid structure

• All landing pages use flex based grid structure. Grid structure classes is same as bootstrap grid structure just added prefix flex-. Below example code to create basic grid structure.

  						
  						
  						
  
  							
  							
  							
  
  								... GIRD COLUMN CONTENT ...
  							
  
  							
  							
  
  								... GIRD COLUMN CONTENT ...
  							
  
  							
  							
  
  								... GIRD COLUMN CONTENT ...
  							
  
  						
  						
  						
  						

• Use following classes along with flex-row to adjust space between columns
  gt-0, gt-1, gt-2, gt-4, gt-10, gt-12, gt-14, gt-16, gt-18, gt-20, gt-22, gt-24, gt-26, gt-28, gt-30, gt-40, gt-50, gt-60, gt-70, gt-80, gt-90, gt-100
• Apply class reverse along with row to make it reverse grids.
• Apply class middle-md along with row to make all children column vertical align middle.
• Apply class bottom-md along with row to make all children column vertical align bottom.
• Apply class first-md on column col-md-4 to make it first in row.
• Apply class last-sm on column col-md-4 to make it last in row.

---

Forms structure

• CK use very simple form structure. It's very easy to customize or add new fields according to requirement. Below is example code of basic form.

  						
  						
  
  							
  
  								
  								
  
  									
  									
  									
  
  									
  									
  									
  
  										
  
  											
  
  												
  											
  										
  										
  
  											
  
  												
  											
  										
  									
  
  									
  									
  
  										
  									
  
  									
  
  										
  									
  
  								
  
  								 Submit
  								
  							
  
  						
  
  						

• Set your email address on hidden field on which you would like to get mails.

  You can also set these email directly in form-data/formdata.php as well.

  Below is default php code.

  						$to = $_POST['to']['val']; // default code
  						

  Example code to set email in php file directly

  						$to = "abc@xyz.com"; // Your email ID
  						

• form-data/formdata.php file is main file to sending mail of form data.

• All validation settings find in js/ckav-template.js file

  						ckav.global_validation = {
  							form: '',
  							rules: { 
  								email            : { required: true, email: true },
  								name             : { required: true },
  								message          : { required: true },
  								phone            : { required: true, number: true },
  								date             : { required: true, date: true },
  								people           : { required: true, number: true },
  								datetime         : { required: true, date: true }
  							},
  							msgpos: 'normal',
  							msg: {
  								email: {email: "Please, enter a valid email"}
  							},
  							subscribe_successMsg : "You are in list. We will inform you as soon as we finish.",
  							form_successMsg : "Thank you for contact us. We will contact you as soon as possible.",
  							
  							successMsg : "",
  							errorMsg   : "Oops! Looks like something went wrong. Please try again later."
  						}
  						

---

Newsletters

• Blon included MailChimp, Campaign Monitor, Get response, iContact, Constant Contact Option to save email addresses in text file. Below is example code to set newsletter subscription form

• Set your newsletter service settings into form-data/config.php file. All basic requirements / steps mention in file.

Source and Credit #back to top

---

• Bootstrap
• jQuery
• jQuery validation
• CSS Browser Selector js
• Modernizr
• Formstone
• Owl carousel
• Magnific Popup
• jQuery.mb.YTPlayer
• jQuery Waypoints
• jQuery Counterup
• Vegas - Fullscreen Backgrounds and Slide shows
• Smooth scroll
• Bootstrap Date picker
• ET-Line Icons
• Font Awesome
• Icon-font-7-stroke-PIXEDEN
• Themify icons
• Images by unsplash.com
• Images by pixeden.com
• Images by pexels.com
• Now UI Kit by invisionapp.com
• TO-DO APP UI Kit by invisionapp.com