CSS code overview

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

---

Helper CSS

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
• pos-rel : Apply position relative on tag
• pos-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

z1, z2, z3, z4, z5, z6, z7, z8, z9, z10

---

OPACITY

Manage opacity of elements

op-0, op-001, op-002, op-003, op-004, op-005, op-006, op-007, op-008, op-009

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

---

SHADOW

Manage shadow of elements

.shadow-large, .hov-shadow-large,
.shadow-medium, .hov-shadow-medium,
.shadow-small, .hov-shadow-small,
.shadow-mini, .hov-shadow-mini,
.shadow-tiny, .hov-shadow-tiny,
.shadow-micro, .hov-shadow-micro,


---

BUTTONS

All button classes which used in template

btn-default, btn-primary, btn-white, btn-dark1, btn-dark2, btn-color1, btn-color2, btn-color3, btn-color4

				Button text
				Button text
				Button text
				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 title for general titles

				
Title text
				

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

				
Title text
				

Apply class title-sub for sub title text

				
Sub title text
				

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

				
Sub title text
				

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

				

					
Title text
					
Sub title text
	
				
				

---

LIST CLASSES

Apply classes list-1, list-2, list-3 on ul list to apply quick style on ul

				

					
List text content
					
List text content
				
				

---

TAG TEXT

Apply class tag-text to create small tag element

				Tag text
				

Use class bg-white, bg-gray, bg-dark, bg-color1, bg-color2, bg-color3, bg-color4 to change tag color

				Tag text
				

---

TEXT TRANSFORM

Apply class txt-upper, txt-lower, txt-capi to change text case

				

					
Title text
					
Sub title text
	
				
				

---

FONTS SIZES

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

fs11, fs12, fs13, fs14, fs16, fs18, fs20, fs22, fs24, fs26, fs28, fs30, fs32, fs34, fs36, fs38, fs40, fs42, fs44, fs46, fs48, fs50, fs52, fs54, fs56, fs58, fs60, fs62, fs64, fs66, fs68, fs70, fs72, fs74, fs76, fs78, fs80, fs82, fs84, fs86, fs88, fs90, fs100, fs110, fs120, fs130, fs140, fs150, fs160, fs170, fs180, fs190, fs200

				

					
Title text
					
Sub title text
					
Lorem ipsum dolor sit amet, consectetur adipisicing elit
				
				

---

LINE HEIGHT

Use below list of classes to adjust line height of content

lh-1, lh-2, lh-3, lh-4, lh-5, lh-6, lh-7, lh-8, lh-9, lh-10, lh-11, lh-12, lh-13, lh-14, lh-15, lh-16, lh-17, lh-18, lh-19, lh-20

				

					
Title text
					
Sub title text
					
Lorem ipsum dolor sit amet, consectetur adipisicing elit
				
				

---

FONT WEIGHT

Use below list of classes to adjust font-weight of text

bold-n, bold-1, bold-2, bold-3, bold-4, bold-5

---

FONT FAMILY

Use below list of classes to change font-family

f-1, f-2

---

TEXT COLORS

Use below list of classes to change text colors

.txt-default, .txt-primary, .txt-white, .txt-color1, .txt-color2, .txt-color3, .txt-color4

---

TEXT HOVER COLORS

Use below list of classes to apply hover text colors

.hov-txt-default, .hov-txt-primary, .hov-txt-white, .hov-txt-color1, .hov-txt-color2, .hov-txt-color3, .hov-txt-color4

---

ALIGNMENT

Use below listed classes to adjust alignment of content or elements

• align-l => Text align left
• align-r => Text align right
• align-c => Text align center
• align-m => Text align middle
• align-t => Text align top
• 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

				

					

						
Title text
						
Sub title text
						
Lorem ipsum dolor sit amet, consectetur adipisicing elit
					
	
				
				

---

Background utilities

• Background image

  Apply data-bg="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-gradient="y" and data-g-colors="rgba(0,0,0,0)|rgba(13, 29, 125, 0.7)" attribute. Apply two background colors with "|" separator.

• Parallax background image

  Apply attribute data-stellar="y" data-stellar-ratio="0.8" and set image path in data-bg="images/bg-img-01.jpg" to apply parallax image.

  Please note parallax image only apply on transparent element.

---

Main navigation

• Below is basic navigation structure.

• Below is example code to set logo image. Attributes data-navopen="pe-7s-more" and data-navclose="pe-7s-close" use to set icons for mobile menu.

• Apply data-glass="y" to make it transparent navigation.

• Apply data-sticky="y" to make it navigation sticky by default.

• Apply data-sticky-scroll="y" to make it navigation sticky when page scroll only.

• Apply CSS class dark to display navigation dark background / on image.

• Use helper classes .bg-glass-dark-01, .bg-glass-dark-02, .bg-glass-dark-03, .bg-glass-dark-04, .bg-glass-dark-05, .bg-glass-dark-06, .bg-glass-dark-07, .bg-glass-dark-08, .bg-glass-dark-09, to apply transparent dark background on navigation.

  Use helper classes .bg-glass-light-01, .bg-glass-light-02, .bg-glass-light-03, .bg-glass-light-04, .bg-glass-light-05, .bg-glass-light-06, .bg-glass-light-07, .bg-glass-light-08, .bg-glass-light-09, to apply transparent light background on navigation.

---

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
  gt0, gt1, gt2, gt4, gt10, gt12, gt14, gt16, gt18, gt20, gt22, gt24, gt26, gt28, gt30, gt40, gt50, gt60, gt70, gt80, gt90, gt100
• Use following classes along with flex-row to apply bottom margin on columns
  mb0, mb1, mb2, mb4, mb10, mb12, mb14, mb16, mb18, mb20, mb22, mb24, mb26, mb28, mb30, mb40, mb50, mb60, mb70, mb80, mb90, mb100
• Apply class reverse along with flex-row to make it reverse grids.
• Apply class middle-md along with flex-row to make all children column vertical align middle.
• Apply class bottom-md along with flex-row to make all children column vertical align bottom.
• Apply class first-md on column flex-col-md-4 to make it first in row.
• Apply class last-sm on column flex-col-md-4 to make it last in row.

---

Forms structure

• R.Gen landing pages 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.
• Apply attribute data-success-redirect="y" to activate thank you page when form successfully submitted.

  Open file js/rgen.js and find below code than apply your thank you page path.

  						/*
  						URL OF SUCCESS PAGE ON FORM SUBMIT
  						*********************/
  						success_url: "thankyou.html"
  						

• Below is list of validation attribute settings on form field.

  data-label="Name" is use as label in mail content.

  required attribute make field mandatory.

  data-msg="Please enter name." is validation message if field is mandatory.

• All validation settings find in js/rgen.js file

  						rgen.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

• R.Gen Landing pages 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

  						
  						
  
  							
  
  								
  
  									
  
  										
  
  											
  
  												
  											
  										
  										
  
  											
  
  												
  											
  										
  										
  
  											
  
  												 SUBSCRIBE NOW
  											
  										
  									
  								
  							
  
  						
  
  						

• 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