Getting Started

HTML Files

Each page that comes included with Pangaea is housed inside its own HTML file. You will find all these files residing in the root directory of the download package.

Note that index.html will be the file your browser defaults to when you navigate to the Pangaea directory in your web browser

CSS Files

Pangaea comes with a number of CSS files, many of which you will likely never touch. There are two however, that you will likely edit if you are changing the style of the site in anyway.

style.css
This is the main stylesheet for the template and includes all styles relating to the appearance of the elements you see inside each page. This stylesheets has been commented for ease of use and all style rules are grouped under particular headings such as /*** SLIDER STYLES ***/

responsive.css
As the name suggests, this is where you can find styles specific to devices other than desktop. The files is sectioned into smaller screened laptops, smartphones and tablets (both portrait and landscape) and any changes made to these sections will only be visible on the appropriate device (or at the target screen size)

Javascript Files

As with the CSS files, there are a number of JS files that you'll unlikely need to touch. They are mostly plugins such as isotope and smooth scroll. Unless you know what you're doing, don't touch the JS files as any tinkering could result in undesired behaviour back in the browser.

scripts.js
This is the main scripts file for the template that includes all functions specific to the theme such as control of the navigation and slider declarations among other things. You will see that the file is structured as $(document).ready(function(){}); followed by $(window).load(function(){});

Add the following class to your nav to achieved the desired appearance:

• nav-transparent is a white navigation with no background suitable for darker image backgrounds
• nav-transparent-dark is a dark navigation with no background suitable for light image backgrounds
• nav-light is a dark navigation with white background suitable for darker image backgrounds
• nav-dark is a white navigation with dark background suitable for light image backgrounds

Classic Footer (with widgets and all)

<footer class="dark">
		
		<div class="row">
			<div class="medium-3 columns">
				<img alt="Logo" src="img/logo-light.png" class="logo push-bottom" />
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
				</p>
			</div>
			
			<div class="medium-3 columns">
				<h6>Recent Posts</h6>
				<ul>
					<li><a href="#">How to create an awesome blog like this <i class="icon arrow_right"></i></a></li>
					<li><a href="#">Loving you is easy coz you're beautiful <i class="icon arrow_right"></i></a></li>
					<li><a href="#">Multi-purpose: Necessary evil? <i class="icon arrow_right"></i></a></li>
					<li><a href="#">What else is in the Teaches of Peaches? <i class="icon arrow_right"></i></a></li>
				</ul>
			</div>
			
			<div class="medium-3 columns">
				<h6>Recent Tweets</h6>
				<ul>
					<li><a href="#"><i class="icon social_twitter"></i> @craig800 Thanks, glad you like it!</a></li>
					<li><a href="#"><i class="icon social_twitter"></i> @james_h Yes, that is possible :)</a></li>
					<li>Follow <a href="#"><strong>@mediumrarethemes</strong></a></li>
				</ul>
			</div>
			
			<div class="medium-3 columns">
				<h6>Contact Us</h6>
				<p class="push-bottom-small">
					Level 7 - 26A<br />
					300 Collins St.<br />
					Melbourne, Vic 3000
				</p>
				<p>
					<i class="icon icon_phone"></i> +61 4823 4762<br />
					<i class="icon icon_mail"></i> hello@pangaea.net
				</p>
			</div>
		</div>
		
		<div class="footer-lower">
			<div class="row">
				<div class="medium-7 columns">
					<span>© 2014 Pangaea - Original Design by <a href="#"><strong>MediumRare</strong></a> - All Rights Reserved</span>
				</div>
				
				<div class="medium-5 columns text-right">
					<ul class="social-profiles">
						<li><a href="#"><i class="icon social_facebook"></i></a></li>
						<li><a href="#"><i class="icon social_twitter"></i></a></li>
						<li><a href="#"><i class="icon social_googleplus"></i></a></li>
						<li><a href="#"><i class="icon social_dribbble"></i></a></li>
						<li><a href="#"><i class="icon social_linkedin"></i></a></li>
					</ul>
				</div>
			</div>
		</div>
			
		
	</footer>

Creative Footer (with social links and a we love tagline)

<footer class="dark footer-alt">
	
			<div class="row">
				<div class="medium-12 columns text-center">
					<ul class="social-profiles">
						<li><a href="#"><i class="icon social_facebook"></i></a></li>
						<li><a href="#"><i class="icon social_twitter"></i></a></li>
						<li><a href="#"><i class="icon social_googleplus"></i></a></li>
						<li><a href="#"><i class="icon social_dribbble"></i></a></li>
						<li><a href="#"><i class="icon social_linkedin"></i></a></li>
					</ul>
					<span class="sub">Made with <i class="icon icon_heart"></i> in Melbourne</span>
				</div>
			</div>
		
			<div class="footer-lower">
				<div class="row">
					<div class="medium-7 columns">
						<span>© 2014 Pangaea - Original Design by <a href="#"><strong>MediumRare</strong></a> - All Rights Reserved</span>
					</div>
				
					<div class="medium-5 columns text-right">
						<a href="#top" class="inner-link button button-small">Top <i class="icon arrow_carrot-up"></i></a>
					</div>
				</div>
			</div>
	
		</footer>

You can find the appropriate class names for both icon packs here: Line Icons and Elegant Icon Set

Icon Usage:

<i class="icon icon-NAME"></i>

<i class="icon icon-flag"></i> will give you a flag icon, who would have guessed!?

Here are the JS declarations for the different slider types used in Pangaea: (note that you can add the class 'slider-fullscreen' to any slider to make it fullscreen)

• Hero Slider:
  

  
  $('.hero-slider').flexslider({
          start: function () {
              $('.slides li').each(function () {
                  $(this).find('.animated').addClass('animatedd fadeInUp');
              });
          },
          before: function () {
              $('.slides li').each(function () {
                  $(this).find('.animated').removeClass('animatedd fadeInUp');
              });
          },
          after: function () {
              $('.slides li').each(function () {
                  $(this).find('.animated').addClass('animated fadeInUp');
              });
          }
      });
  				

• Testimonials Slider:
  

  
  $('.testimonials-slider').flexslider({
          directionNav: false
      });
  				

• Client Logos Slider:
  

  
  $('.clients-slider').flexslider({
          animation: "slide",
          minItems: 1,
          maxItems: 5,
          itemWidth: 50,
          itemMargin: 0,
          move: 1,
          directionNav: false,
          controlNav: false
      });
  				

• Portfolio Slider:
  

  
  $('.work-carousel').flexslider({
          animation: "slide",
          minItems: 3,
          maxItems: 3,
          itemWidth: 350,
          itemMargin: 0,
          move: 1,
          controlNav: false
      });
  				

• Generic Image Slider:
  

  
  $('.slider').flexslider({});