Oceanside documentation

Introduction

Oceanside is a creative HTML template with modern design. It is suitable for every type of your business. Fully responsive, it is extremely beautiful on any device and is perfect in all window sizes. Template is packed with jquery countdown timer, mailchimp subscription form and ajax contact form and has extra pages – About, Services and Contacts.

Oceanside is easy to use and is great as a starting point for your custom projects. Powered with Bootstrap framework, designed with HTML5 and CSS3 technology. Enjoy its unique features!

Please do not forget to rate Oceanside on ThemeForest. This can be done in Downloads area. Just select Oceanside in the Download list and rate it. We really appreciate your feedback and will be grateful for your opinion.

Getting Started

This guide is targeted at people, who have at least basic knowledge of html markup language. Furthermore css and javascript knowledge is advised. If you do not feel yourself well with understanding these technologies you should consider finding someone to assist you.

This template can't be installed into any of available CMS (Wordpress, Drupal, etc.).

This documentation will demonstrate the custom elements used in template and help you with their customization.

Installation

Template installation is pretty easy. All required files are in every version so you can delete unused. Here are the required steps:

Unzip the HTML folder
Choose the desired variant
Rename it to index.html
Upload it through FTP

Files Structure

lib/css/ - CSS styles folder
lib/fonts/ - webfont icons folder
lib/img/ - folder for images
lib/js/ - JavaScript files folder
lib/php/ - PhP files for your contact/mailchimp form
lib/Video/ - folder with video
/sass/ - Syntactically Awesome Stylesheets files folder
index.html - main HTML file

Preloader

Each page of this template contains a preloader code by default.

									<div class="preloader"><span class="preloader"></span></div>

Structure Of The Site

The obligatory structure of the site:

											<body>
  <div class="page-preloader"><span class="spinner"></span></div>
  <div class="bg-box">
    <div class="color-bg"></div>
    <div class="layer"></div>
  </div><!-- .background -->
  <header class='container'>
    ...
  </header><!-- .site-header -->
  <main>
    <section>
      ....
    </section>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

Light/Dark typography

To make the light typography, add class="light" for body

											<body class='light'>
  ... 
</body>

Header

Header consists of 2 elements – Logo and Navigation.

									<header class='container'>
  <figure class='brand pull-left'>
    Logo
  </figure>
  <div class="nav pull-right">
    Menu
  </div>
</header>

								

Logo

Logo is located at the top-left of the template.

									<figure class='brand'>
  <a href="index.html">
    <img src="lib/img/logo-dark.svg" alt="logo" width="160" height="30">
  </a>
</figure>

Navigation

Navigation switches between the page sections. The attribute meaning href="#link1" must respond to the section id and data-menuanchor="id" must respond to the section data-anchor="id".

									<div class="nav pull-right">
  <nav>
    <ul class="section-menu">
      <li data-menuanchor="id">
        <a href="#id">
          Link 1
        </a>
      </li>
    </ul>
  </nav>
  <div class="bt-nav">
    <div class="line line1"></div>
    <div class="line line2"></div>
    <div class="line line3"></div>
  </div>
</div>

Main

You should add main class="fullpage" to activate one page mode.

										<main class='fullpage main'>
  <section>
    ...
  </section>
  ....
</main>

Footer

										<footer>
  <div class="copyright">
    <p>© Oceanside, 2015</p>
  </div>
</footer>

Elements

Our template provides different html elements, which can be used in any way with any customization.

Notify Me
Contact Form
Map

Carousel
Full Video
Countdown
Corner of section

Notify Me

By default all the information from this form is collected into the file emails.txt which is located in the PHP directory.

This file also must have 'Write' permissions.

									<form method="post" action="../lib/php/notify-me.php" class="notify">
  <div class="btn">
    <label for="exampleInputEmail1">NOTIFY ME</label>
    <input class="form-control" id="exampleInputEmail1" name="subscribe" placeholder="Email" >
    <button class='btn-reset' type="submit" value='Submit'>
      <i class="notify-btn-send"></i>
    </button>
  </div>
</form>

Warning! For better data security, it is recommended to change the name of the file and change this string $file = fopen('../emails.txt','a+'); in the file /php/u-c.php

Contact Form

All data from this form is sent to the email, which can be edited in the file php/mailConfig.php.

										<form action='../lib/php/contact-form.php' class='contact-form'>
  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="name" name='name' >
      </div>
    </div>
    <div class="col-sm-6">
      <div class="form-group">
        <input class="email form-control" placeholder="email" name='email' >
      </div>
    </div>
  </div>
  <div class="form-group message">
    <textarea class="form-control" rows="1" wrap='off' placeholder="message" name='comment'>
    </textarea>
  </div>
  <button class='btn' type="submit">send</button>
  <span class="form-message" style="display: none;"></span>
</form>

Map

<p data-toggle="modal" data-target="#map-address">
  Yout address
</p>

Map should be in modal after body

<div class="modal fade" id="map-address" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body">
          <button class='btn' type="button" data-dismiss="modal" aria-label="Close">
            <img src="lib/img/close-light.svg" alt="close" width="12" height="12">
          </button>
          <div id="map-canvas"></div>
        </div>
      </div>
    </div>
  </div>

GoogleMap element requires API_KEY for correct work.

Detailed information about getting API_KEY could be found here: https://developers.google.com/maps/documentation/javascript/get-api-key

Just replace YOUR_API_KEY in the 'html' file with yours, that you will get by the link above:
https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize

Carousel

The carousel may contain full view of team or portfolio.

<div class="preview-team-portfolio" >
  <a href="#" data-toggle="modal" data-target="#preview-team-portfolio-modal">
  </a>
</div>

It should be in modal after body

										<div class="modal fade" id="preview-team-portfolio-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <button class='btn' type="button" data-dismiss="modal" aria-label="Close">
          <img src="lib/img/close-light.svg" alt="close" width="12" height="12">
        </button>
        <div class="team-portfolio-list">
          <div class="item">
            <figure>
              <img  class='replace-2x img-responsive' src="lib/img/Oceanside/buisness-element-1.jpg" width='360'>
              <div class="img-layer"></div>
              <figcaption>
                <p class="social-team">
                  <a href=""><i class="fa fa-dribbble"></i></a>
                  <a href=""><i class="fa fa-facebook"></i></a>
                  <a href=""><i class="fa fa-twitter"></i></a>
                </p>
              </figcaption>
            </figure>
            <h4>Felicity Novak</h4>
            <i>Support Staff</i>
          </div>
          
             .......
 
 
        </div>
      </div>
    </div>
  </div>
</div>

Video Block

<div class="video-block col-md-8 col-md-offset-2"  data-toggle="modal" data-target="#video-block-modal">
  <a href="#">
    <img src="lib/img/app-video.jpg" alt="">
    <span class="icon-play">
      <i class="fa fa-play"></i>
        <span></span>
    </span>
  </a>
</div>

Video should be in modal after body

										<div class="modal fade" id="video-block-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <button class='btn' type="button" data-dismiss="modal" aria-label="Close">
          <img src="lib/img/close-light.svg" alt="close" width="12" height="12">
        </button>
        <iframe width="100%" height="100%" src="..." frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>

Countdown

Insert the final date, to which the timer will count, in the data-attibute data-date="Date".

									<div class="countdown-box">
  <h3 class="countdown days-left" data-date="Y, M, D"></h3>
</div>

Corner of section

Apply necessary color for corner in _elements.scss in the class rect.

Animation

You can choose the animation type for every page element – how it will appear after page downloading and how it will disappear after switching page sections. For this you will need to use the necessary attribute:

data-animation - animation while downloading
data-animation-delay - animation delay while downloading
data-out-animation - animation while switching to other page section
data-out-animation-delay - animation delay while switching to other page section

You can check how these animation types look like here.

								<a href="#"
  data-animation="fadeInDown"
  data-animation-delay="600"
  data-out-animation="fadeOutUp"
  data-out-animation-delay="600">Link</a>

Backgrounds

Our template supports different types of background. Image, Slider, Blur, Video and Gradient Backgrounds are at your disposal. So, how we can insert our background into the html code? Have a look:

								<div class="bg-box">
    <div class="...">
    </div>
    <div class="layer"></div>
  </div>

Image Background

Apply necessary background image in the file _background.scss for the class static-bg.

									<div class="bg-box">
    <div class="bg-image static-bg"></div>
    <div class="layer"></div>
  </div>

Slider Background

To apply the Slider Version, you must add class="slider-bg" after <div class="bg-box"> and than add items.

									<div class="bg-box">
  <div class="slider-bg">
    <div class="item" style="background-image: url(lib/img/background-2.jpg);"></div>
    .....
  <div class="layer"></div>
</div>

Blur Background

You can change radius of blur image in main.js function blurBg().

									<div class="bg-box">
  <div class="bg-image blur-bg">
  </div>
  <div class="layer"></div>
</div>

Video Background

Video background effect doesn't work on tablets and phones. To enable the video background you should insert the class video-bg into the background block and write the path for the videos. For different web-browsers we need to upload different types of video. .mp4, .ogg, .webm are the needed ones.

									<div class="bg-box">
  <div class="video-bg">
    <video autoplay="" loop="" muted="">
      <source src="lib/video/buisness.mp4" type="video/mp4">
      <source src="lib/video/buisness.ogv" type="video/webm">
      <source src="lib/video/buisness.webm" type="video/ogg">
    </video>
  </div>
  <div class="layer"></div>
</div>

Gradient Background

Apply necessary background (Gradient Version) in the file _background.scss: for the image .gradient-bg and for gradient color .gradient-bg + .layer.

									<div class="bg-box">
  <div class="bg-image gradient-bg">
  </div>
  <div class="layer"></div>
</div>

Background Overlay

Apply necessary color in the file _background.scss fo the class="layer" .

									<div class="bg-box">
  <div class="...">
  </div>
  <div class="layer"></div>
</div>

Retina

Retina Ready is a feature for displaying the high resolution images on the modern devices. It is created to show the true view of the HD images.

In our template to enable the Retina for images you should have two images:

first one has the standard size and a standard name (slide-2.jpg)
second one must be twice bigger then the origin and have additional annex @2x (slide-2@2x.jpg

Both images must be in the same folder!

So, how we can enable it in our html template? You should insert a class replace-2x into the 'img' tag. Example:

<img class="replace-2x" src="images/slide-2.jpg" alt="">

This is an example of CSS code that displays how we can connect our Retina image to the original image of the background:

.part-2 {
  background-image: url('../images/slider/slide-2.jpg');
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .part-2 { background-image: url('../images/slider/slide-2@2x.jpg'); 
  background-size: cover; }
}

SCSS

All SCSS files are located in the folder /sass/. SCSS is a CSS preprocessor that adds many features like variables, mixins, imports, color manipulation, functions and tons of other powerful features.

The entire compiler comes in a single class file ready for including in any kind of project in addition to a command line tool for running the compiler from the terminal.

The configuration of the paths for compilation is located in the file config.rb. The structure:

custom.scss - imports all styles
_variables.scss - file with variables used in theme styles
_typography.scss - the customization of fonts
_background.scss - file with background styles
_header.scss - file with header styles
_footer.scss - file with footer styles
_main.scss - file with main styles
_preloader.scss - file with preloader styles
_elements.scss - file with some elements styles
_intro.scss - file with intro page styles
_underconstruction.scss - file with underconstruction page styles
_light.scss - file with body.light styles
ie9.scss - file with IE9 styles

CSS Files

Name	Description	Location
Animate.css	Just-add-water CSS animations	lib/css/animate.css
Font Awesome	Styles for Font Awesome	lib/fonts/font-awesome/css/font-awesome.min.css
Bootstrap	Defines main Bootstrap classes	lib/css/bootstrap.css
Countdown	jQuery Countdown styles	lib/css/jquery.countdown.css
OWL Carousel	Styles for OWL Carousel	lib/css/owl.carousel.css
jQuery custom content scroller	Styles for jQuery custom content scroller	lib/css/jquery.mCustomScrollbar.min.css
FullPage	Styles for jQuery Fullpage plugin	lib/css/jquery.fullPage.css
SmoothDivSCroll	Styles for team/portfolio slider	lib/css/smoothDivSCroll.css
Theme styles	Contains all of the specific stylings for the theme.	lib/css/custom.css lib/css/ie9.css

JavaScript Files

Name	Description	Location
jQuery	Core Javascript library	lib/js/jquery-1.11.2.min.js lib/js/jquery-ui-1.10.3.custom.min.js
Bootstrap	Sleek, intuitive, and powerful front-end framework for faster and easier web development	lib/js/bootstrap.min.js
Blur.js	jQuery plugin that produces psuedo-transparent blurred elements over other elements	lib/js/blur.js
FullPage.js	Create full screen pages	lib/js/jquery.fullPage.min.js
SmoothDiv Scroll	jQuery plugin that scrolls content horizontally left or right	lib/js/jquery.smoothdivscroll-1.3-min.js lib/js/jquery.mousewheel.min.js lib/js/jquery.kinetic.min.js
jQuery Countdown	A jQuery plugin that sets a div or span to show a countdown to a given time.	lib/js/jquery.countdown.min.js lib/js/jquery.plugin.min.js
jQuery custom content scroller	Highly customizable custom scrollbar jQuery plugin.	lib/js/jquery.mCustomScrollbar.concat.min.js
OWL Carousel	Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.	js/owl.carousel.min.js
carouFredSel.js	A circular, responsive carousel plugin built using the jQuery.	lib/js/carouFredSel.js
Form styler	jQuery-plugin for styling HTML form	lib/js/jquery.formstyler.min.js
Theme scripts	Contains all of the specific scripts for the theme.	js/main.js