Getting Started

HTML Files

As Attica is a one page template, all the content for the site is housed inside index.html. You will see the code used for each section resides within the <section></section> tags

If you are building your site with Variant you may choose to make several pages (ie. not a 'one pager' website) in which case you would save each page as it's own .html file

CSS Files

Attica 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 instafeed 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(){});

Nav with centered logo

<nav class="logo-center nav-overlay">
  
  	<div class="nav-toggle"><i class="icon icon_menu"></i></div>
  
  	<div class="row">
		<div class="medium-5 columns text-right">
			<ul class="menu">
				<li><a href="#">Home</a></li>
				<li><a href="#">Restaurant</a></li>
				<li><a href="#">Menu</a></li>
			</ul>
		</div>
	
		<div class="medium-2 columns text-center">
			<img alt="Attica" src="img/logo.png" class="logo medium-9" />
			<img alt="Attica" src="img/logo-dark.png" class="logo logo-dark medium-10" />
		</div>
	
		<div class="medium-5 columns text-left">
			<ul class="menu">
				<li><a href="#">Drinks</a></li>
				<li><a href="#">Reservations</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>
  	</div>
  </nav>

Off Screen Nav (with toggle button)

<nav class="off-screen">
  			<div class="nav-toggle"><i class="icon icon_menu"></i></div>
  
  			<div class="push-large">
				<img alt="Attica" src="img/logo.png" class="logo" /><br />
				<span class="sub-title text-white">Restaurant & Bar</span>
				<div class="line"></div>
			</div>

			<ul class="menu">
				<li><a href="#">Home</a></li>
				<li><a href="#">Restaurant</a></li>
				<li><a href="#">Menu</a></li>
				<li><a href="#">Drinks</a></li>
				<li><a href="#">Reservations</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
			
			<div class="bottom-content">
				<a href="#"><i class="icon social_twitter"></i></a>
				<a href="#"><i class="icon social_facebook"></i></a>
				<a href="#"><i class="icon social_instagram"></i></a>
				<ul class="contact-details">
					<li><span>Melbourne, VicM</span></li>
					<li><a href="mailto:hello@atticabar.net">hello@atticabar.net</a></li>
					<li><span>(03) 9837 2831</span></li>
				</ul>
			</div>

  </nav>

Top Bar Nav

<nav class="top-bar">
  	<div class="row push-small">
  		<div class="medium-12 columns text-center">
			<img alt="Attica" src="img/logo-dark.png" class="logo" />
		</div>
  	</div>
  	<div class="row">
		<div class="medium-12 columns text-center">
			<ul class="menu">
				<li><a href="#">Home</a></li>
				<li><a href="#">Restaurant</a></li>
				<li><a href="#">Menu</a></li>
				<li><a href="#">Drinks</a></li>
				<li><a href="#">Reservations</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>
  	</div>
  </nav>

Contact Details Footer

<footer class="footer-contact">
	  	<div class="row">
	  		<div class="medium-12 columns text-center">
				<div class="logo-holder">
					<img alt="Logo" src="img/logo-dark.png" />
				</div>
				<hr>
	  		</div>
	  	</div>
	  	
	  	<div class="row">
	  		<div class="medium-4 columns text-center">
	  			<span class="sub-title">Hours</span>
	  			<p>
	  				Mon: Closed<br />
	  				Tue - Thu: 1pm - Late<br />
	  				Fri - Sun: 8am - Late
	  			</p>
	  		</div>
	  		
	  		<div class="medium-4 columns text-center">
	  			<span class="sub-title">300 Collins St</span>
	  			<p>
	  				Melbourne, 3000<br />
	  				(03) 3726 3926
	  			</p>
	  		</div>
	  		
	  		<div class="medium-4 columns text-center">
	  			<span class="sub-title">Connect</span><br />
	  			<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_instagram"></i></a></li>
				</ul>
	  		</div>
	  	</div>
	  </footer>

Social Profiles Footer with Logo

<footer class="footer footer-social">
		<div class="row">
			<div class="medium-12 columns text-center">
				<img alt="Logo" src="img/logo.png" class="medium-1 push-small"/><br /><br /><br />
				<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_instagram"></i></a></li>
				</ul><br />
				<ul class="contact-details">
					<li><span>Melbourne, Vic</span></li>
					<li><a href="mailto:hello@atticabar.net">hello@atticabar.net</a></li>
					<li><span>(03) 9837 2831</span></li>
				</ul>
				<span>© Copyright 2014 - All Rights Reserved</span>
			</div>
		</div>
  
	  </footer>

Short Text Footer

<footer class="footer-text">
		<div class="row">
			<div class="medium-12 columns text-center">
				<h6>Humbolt Plaza - 200 Collins Place, Melbourne 3000  -  +614 332 093  -  hello@attica.net</h6>
				<span>© Copyright 2014 - All Rights Reserved</span>
			</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 Attica: (note that you can add the class 'slider-fullscreen' to any slider to make it fullscreen)

• Hero Slider:
  

  This is the main, fullscreen slider that appears at the top of the demo page.

  
  $('.hero-slider').flexslider({
          slideshow: false
      });
  				

• Testimonials Slider:
  

  You can see this slider in use in the 'Contact with testimonials' element

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

• Image Gallery Slider:
  

  You can view this gallery on the demo page

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

• Generic Image Slider:
  

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