Astonish

HTML5 Multipurpose Theme


All pages are designed in sections and are fully commented which allows you to easily build your own designs from the theme.

Example:

<title>Astonish - Multipurpose HTML5 Theme</title>

<!-- ================================== -->
<!-- ========== CSS INCLUDES ========== -->
<!-- ================================== -->
<link href="css/bootstrap.css" media="screen" rel="stylesheet" type="text/css">
<link href="css/buttons.css" media="screen" rel="stylesheet" type="text/css">
<link href="css/font-awesome.css" media="screen" rel="stylesheet" type="text/css">
<link href="css/icomoon.css" media="screen" rel="stylesheet" type="text/css">
<link href="css/parallax-slider.css" media="screen" rel="stylesheet" type="text/css">
<link href="css/prettyPhoto.css" media="screen" rel="stylesheet" type="text/css">
<link id="header-switch" href="css/headers/dark.css" media="screen" rel="stylesheet" type="text/css">
<link href="css/animate.css" media="screen" rel="stylesheet" type="text/css">
<link href="css/astonish.css" media="screen" rel="stylesheet" type="text/css">
<link id="style-switch" href="css/color-schemes/color1.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body data-offset="62" data-spy="scroll" data-target=".navbar" onload="initialize()">
<!-- ============================================= -->
<!-- ============ START TOP STICKY MENU ========== -->
<!-- ============================================= -->
<nav class="navbar navbar-default navbar-fixed-top nav-fadein" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->

As you can see it is very easy to find what you are looking for within our HTML documents.
This makes customizing the theme extremely simple.

All CSS Files are fully commented and cleanly designed to allow you to easily find and edit what you are looking for.

CSS Files Included:

1. bootstrap.min.css - Core Bootstrap 3 Styles
(Recommendation - Do not edit this file but rather copy the classes you wish to change and paste them into astonish.css)
2. font-awesome.css - FontAwesome Icons
3. icomoon.css - IcoMoon Icons
4. prettyPhoto.css - PrettyPhoto Gallery Styles
5. slider-settings.css - Revolution Slider Styles
6. buttons.css - Button Styles
7. animate.css - Includes all Keyframe Animations for Animation-Engine.js
8. parallax-slider.css - Parallax Slider Styles
9. astonish.css - All Custom ASTONISH Theme Styles

Special CSS Files:
10. color-schemes/ - Includes 11 pre-made color schemes + the original scheme = 12 color schemes
Feel free to copy one of the color scheme files and replace the hex codes to whatever colors you want.
Then edit this line on your pages to include your custom color scheme:
<link id="style-switch" href="css/color-schemes/color1.css" media="screen" rel="stylesheet" type="text/css">

11. headers/ - Includes 2 pre-made header files.
dark.css - The default dark header
light.css - Optional light header
Just edit this line on your pages to include the header of your preference:
<link id="header-switch" href="css/headers/dark.css" media="screen" rel="stylesheet" type="text/css">

Example of Organize CSS:

/* ================================ */
/* ======== TABLE OF CONTENTS ========= */
/* ================================ */
/*
1. GOOGLE FONTS
2. BASIC STYLES
3. HELPER CLASSES
4. HEADING STYLES
5. IMAGE STYLES
6. BLOG STYLES
7. SIDEBAR STYLES AND WIDGETS
8. SCROLL TO TOP BUTTON
9. TESTIMONIALS STYLES
10. IMAGE OVERLAYS
11. PRICING TABLE STYLES
12. ICON FEATURE BOXES
13. CONTACT PAGE MAP STYLES
14. FORM STYLES
15. TEAM MEMBERS
16. SOCIAL ICONS
17. COUNTER STYLES
18. ACCORDION AND TABS
19. STYLE SWITCHER
20. OWL CAROUSEL
21. PORTFOLIO STYLES
22. ISOTOPE FILTERING SCRIPT
23. BREADCRUMBS STYLES
24. PAGINATION STYLES
25. PROGRESS BAR STYLES
26. TABLE STYLES
27. FOOTER STYLES
*/

All Javascript files are also cleanly written and commented for easy editing and organization.

JS Files Included:
1. bootstrap.js / bootstrap.min.js - Core Bootstrap 3
Documentation: http://www.getbootstrap.com

2. animation-engine.js - Custom Animation Script created by us, CreativelyCoded
Documentation: Details for use are included below.

3. astonish.js - Core Astonish Theme Javascripts
Documentation: Details for use are included below.

4. counter.js - Countdown counter script created by us, CreativelyCoded
Documentation: Details for use are included below.

5. jquery.easing.1.3.js - Easing animations used in combination with the scroll to function
Documentation: http://gsgd.co.uk/sandbox/jquery/easing/

6. jquery.isotope.min.js - Filtering and Sorting Script
Documentation: http://isotope.metafizzy.co/

7. jquery.nicescroll.min.js / jquery.nicescroll.plus.js - Custom Scrollbar Styling
Documentation: http://areaaperta.com/nicescroll/

8. jquery.prettyPhoto.js - Photo Gallery Script
Documentation: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

9. jquery.superslides.js - Full Screen Slider used for Parallax Slider Effect
Documentation: http://nicinabox.com/superslides/

10. jquery.themepunch.revolution.min - The Incredible Slider Revolution
Documentation: Full Documentation is included in the Assets Folder

11. owl.carousel.js - Item Slider Script
Documentation: http://owlgraphic.com/owlcarousel/

12. stellar.js - Parallax Backgrounds Script
Documentation: http://markdalgleish.com/projects/stellar.js/

13. style-switcher.js - Custom Style Switcher Script created by us, CreativelyCoded
Documentation: Details for use are included below.

14. validation.js - Form Validation Script
Documentation: Details for use are included below.

We have included over 800+ Font Icons provided by FontAwesome and Icomoon.

http://fortawesome.github.io/Font-Awesome/
http://icomoon.io/

Icons can easily be added by using the "i" tag.

Example: To add FontAwesome Icons

<i class="fa-iconName"></i>

Replace "iconName" with the actual icon name you wish to display.
Icon names for Font Awesome can be found here: http://fortawesome.github.io/Font-Awesome/icons/


Example: To add Icomoon Icons

<i class="im-iconName"></i>

Replace "iconName" with the actual icon name you wish to display.
Icon names for IcoMoon can be found here: http://icomoon.io/app/
Select the icons you want and push the "Font" button which will display the icon names.

To edit the Google Map style and location marker please open "google.map-settings.js" in your favorite text editor.

Location Marker:
To edit the location marker you must enter in your Latitude and Longitude coordinates.
You can find your Lat and Lng by using this resource:
http://www.latlong.net/convert-address-to-lat-long.html

// ========== START GOOGLE MAP ========== //
var map;
var myLatLng = new google.maps.LatLng(43.26081,-79.933149);


Map Options:
Map options can be change or set on the following lines.

var mapOptions = {
    zoom: 14,
    center: myLatLng,
    disableDefaultUI: true,
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    mapTypeControlOptions: {
    mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'roadatlas']
    }
  };

We have included a form handler script, contact-form.php

To setup the contact-form.php, open the file in a text editor.
There are only 2 lines that need to be edited:

// ADD YOUR INFOMATION HERE
$recipient = "YourEmail@Domain.com";
$successPage = "index.html";

$recipient is the email address that you would like the form information sent to.
$successPage is the html page that the user will see after the form has been submitted.

Buttons can be added to either a "<button>" tag or a "<a href>" link tag.

To create a button add the following classes:
.btn - Must be added as a base for every button

Button Sizes:
.btn-sm
.btn-lg
There is also a medium button, which is the default button size.

Button Colors:
.btn-primary - Primary Color
.btn-default - Default Grey Color
.btn-dark - Dark Color
.btn-white - White Color
You can also use the variety of colors included in Bootstrap 3 or create your own.
Bootstrap 3 includes .btn-success, .btn-warning, .btn-danger

Other Button Options:
We've included the option to have your buttons outlined.
Just add .btn-outlined to any button and you will achieve the outlined effect.

Example Button:
<a href="#" class="btn btn-primary btn-lg btn-outline">Button Text</a>
This will generate a large outlined button in the primary color.
 

As you can see on the main(index.html) page, the navigation fades in as the user scrolls down the page.

This is achieved by adding the class "nav-fadein" to the nav tag.

Example:

<!-- ============================================= -->
<!-- ============ START TOP STICKY MENU ========== -->
<!-- ============================================= -->
<nav class="navbar navbar-default navbar-fixed-top nav-fadein" role="navigation">

If you wish to always have the nav shown, as it is on the blog and post pages. Then do not included the class "nav-fadein".

The Animation Engine is a new Javascript specifically written for the Astonish Theme.
It makes use of animate.css which you can see here http://daneden.github.io/animate.css/

We've added some of our own animations as well.

To add an animation to an element you must include the "ae" class on the element.
If you only include this, the Animation Engine will use default settings and automatically fadeIn the element as it scrolls into view.

Default Settings are as follows:
Animation: fadeIn
Offset: 90% (meaning when the element comes into view and is 90% away from the top of the viewport it will activate the animation)
Speed: 1000ms or 1 second
Delay: 0

You can also set a disable point. The default disable point is set to screensizes less than 1024px in width.
This is to improve performance on tablets and mobiles. You can change this disable point if you wish.

How to Set up an Element to Animate:
The Animation Engine uses data attributes to load the animation and various options.
You have the option of adding the following data attributes to the element.

1. Always add the "ae" class to the element first.
2. data-animation="animationName" is the type of animation you want to take place
3. data-speed="animationSpeed" in milliseconds
4. data-delay="animationDelay" in milliseconds this is useful for having multiple items on the same line animate in at different times.
5. data-offset="animationOffset" in percent. An offset value of 100% means the animation will fire as the top of the element hits the bottom of the viewport. An offset value of "50%" means the animation will fire as the top of the element reaches the center of the viewport.

That's it, happy animating.

We support our themes 100%.
Please contact us at support@creativelycoded.com

We will be happy to help you with our themes.
Please also report and bugs or concerns so we can address them.

Thanks