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:

  1. Unzip the HTML folder
  2. Choose the desired variant
  3. Rename it to index.html
  4. 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.

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

Structure Of The Site

The obligatory structure of the site:

											
  1. <body>
  2. <div class="page-preloader"><span class="spinner"></span></div>
  3. <div class="bg-box">
  4. <div class="color-bg"></div>
  5. <div class="layer"></div>
  6. </div><!-- .background -->
  7. <header class='container'>
  8. ...
  9. </header><!-- .site-header -->
  10. <main>
  11. <section>
  12. ....
  13. </section>
  14. ...
  15. </main>
  16. <footer>
  17. ...
  18. </footer>
  19. </body>

Light/Dark typography

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

											
  1. <body class='light'>
  2. ...
  3. </body>

Header

Header consists of 2 elements – Logo and Navigation.

image
  1. <header class='container'>
  2. <figure class='brand pull-left'>
  3. Logo
  4. </figure>
  5. <div class="nav pull-right">
  6. Menu
  7. </div>
  8. </header>

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

									
  1. <div class="nav pull-right">
  2. <nav>
  3. <ul class="section-menu">
  4. <li data-menuanchor="id">
  5. <a href="#id">
  6. Link 1
  7. </a>
  8. </li>
  9. </ul>
  10. </nav>
  11. <div class="bt-nav">
  12. <div class="line line1"></div>
  13. <div class="line line2"></div>
  14. <div class="line line3"></div>
  15. </div>
  16. </div>

Main

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

										
  1. <main class='fullpage main'>
  2. <section>
  3. ...
  4. </section>
  5. ....
  6. </main>

Footer

image
										
  1. <footer>
  2. <div class="copyright">
  3. <p>© Oceanside, 2015</p>
  4. </div>
  5. </footer>

Elements

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


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.

									
  1. <form method="post" action="../lib/php/notify-me.php" class="notify">
  2. <div class="btn">
  3. <label for="exampleInputEmail1">NOTIFY ME</label>
  4. <input class="form-control" id="exampleInputEmail1" name="subscribe" placeholder="Email" >
  5. <button class='btn-reset' type="submit" value='Submit'>
  6. <i class="notify-btn-send"></i>
  7. </button>
  8. </div>
  9. </form>
image

Contact Form

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

image
										
  1. <form action='../lib/php/contact-form.php' class='contact-form'>
  2. <div class="row">
  3. <div class="col-sm-6">
  4. <div class="form-group">
  5. <input type="text" class="form-control" placeholder="name" name='name' >
  6. </div>
  7. </div>
  8. <div class="col-sm-6">
  9. <div class="form-group">
  10. <input class="email form-control" placeholder="email" name='email' >
  11. </div>
  12. </div>
  13. </div>
  14. <div class="form-group message">
  15. <textarea class="form-control" rows="1" wrap='off' placeholder="message" name='comment'>
  16. </textarea>
  17. </div>
  18. <button class='btn' type="submit">send</button>
  19. <span class="form-message" style="display: none;"></span>
  20. </form>

Map

  1. <p data-toggle="modal" data-target="#map-address">
  2. Yout address
  3. </p>

Map should be in modal after body

image
  1. <div class="modal fade" id="map-address" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  2. <div class="modal-dialog" role="document">
  3. <div class="modal-content">
  4. <div class="modal-body">
  5. <button class='btn' type="button" data-dismiss="modal" aria-label="Close">
  6. <img src="lib/img/close-light.svg" alt="close" width="12" height="12">
  7. </button>
  8. <div id="map-canvas"></div>
  9. </div>
  10. </div>
  11. </div>
  12. </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.

  1. <div class="preview-team-portfolio" >
  2. <a href="#" data-toggle="modal" data-target="#preview-team-portfolio-modal">
  3. </a>
  4. </div>

It should be in modal after body

image
										
  1. <div class="modal fade" id="preview-team-portfolio-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  2. <div class="modal-dialog" role="document">
  3. <div class="modal-content">
  4. <div class="modal-body">
  5. <button class='btn' type="button" data-dismiss="modal" aria-label="Close">
  6. <img src="lib/img/close-light.svg" alt="close" width="12" height="12">
  7. </button>
  8. <div class="team-portfolio-list">
  9. <div class="item">
  10. <figure>
  11. <img class='replace-2x img-responsive' src="lib/img/Oceanside/buisness-element-1.jpg" width='360'>
  12. <div class="img-layer"></div>
  13. <figcaption>
  14. <p class="social-team">
  15. <a href=""><i class="fa fa-dribbble"></i></a>
  16. <a href=""><i class="fa fa-facebook"></i></a>
  17. <a href=""><i class="fa fa-twitter"></i></a>
  18. </p>
  19. </figcaption>
  20. </figure>
  21. <h4>Felicity Novak</h4>
  22. <i>Support Staff</i>
  23. </div>
  24. .......
  25.  
  26.  
  27. </div>
  28. </div>
  29. </div>
  30. </div>
  31. </div>

Video Block

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

Video should be in modal after body

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

Countdown

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

									
  1. <div class="countdown-box">
  2. <h3 class="countdown days-left" data-date="Y, M, D"></h3>
  3. </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.

								
  1. <a href="#"
  2. data-animation="fadeInDown"
  3. data-animation-delay="600"
  4. data-out-animation="fadeOutUp"
  5. 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:

								
  1. <div class="bg-box">
  2. <div class="...">
  3. </div>
  4. <div class="layer"></div>
  5. </div>

Image Background

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

									
  1. <div class="bg-box">
  2. <div class="bg-image static-bg"></div>
  3. <div class="layer"></div>
  4. </div>

Slider Background

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

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

Blur Background

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

									
  1. <div class="bg-box">
  2. <div class="bg-image blur-bg">
  3. </div>
  4. <div class="layer"></div>
  5. </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.

									
  1. <div class="bg-box">
  2. <div class="video-bg">
  3. <video autoplay="" loop="" muted="">
  4. <source src="lib/video/buisness.mp4" type="video/mp4">
  5. <source src="lib/video/buisness.ogv" type="video/webm">
  6. <source src="lib/video/buisness.webm" type="video/ogg">
  7. </video>
  8. </div>
  9. <div class="layer"></div>
  10. </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.

									
  1. <div class="bg-box">
  2. <div class="bg-image gradient-bg">
  3. </div>
  4. <div class="layer"></div>
  5. </div>

Background Overlay

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

									
  1. <div class="bg-box">
  2. <div class="...">
  3. </div>
  4. <div class="layer"></div>
  5. </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:

  1. <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:

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

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

Code copied to clipboard