Startuply — Responsive Multi-purpose Landing Page

HTML preview

Updated: 01/09/2015
Created: 01/06/2014
By: Vivaco
Email: office@vivaco.com

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Table of Contents

  1. HTML Structure
  2. CSS Files and Structure
  3. LESS
  4. JavaScript
  5. Forms
  6. Mailchimp
  7. Social networks
  8. Sources and Credits

Startuply theme comes in two flavours located in separate folders each of them completely isolated and can work withouteach other:

  1. Startuply_HTML
  2. Startuply_Builder

The first one is the plain HTML that works out of the box straight in your browser and is what you are looking for in most cases to start editing the template. The second one is a builder that requires some additional setup and PHP enabled webhosting to run, more info on it can be found in enclosed documentation in Startuply_HTML_v2.0/Documentation/Startuply_Builder

A) HTML Structure - top

This theme is a responsive one page layout with one column made on Bootstrap 3.0 foundation so please refer to original docs for more info (http://getbootstrap.com/css/). If you would like to place or make a full screen width element - please place it outside of this div. The general template structure is the same throughout the template.

The template consists of:

  1. Startuply_HTML/index.html - photo background
  2. Startuply_HTML/index-color.html - solid background
  3. Startuply_HTML/index-video.html - YouTube video background
  4. Startuply_HTML/index-video-vimeo.html - Vimeo video embed
  5. Startuply_HTML/index-video-youtube.html - Youtube video embed
  6. Startuply_HTML/index-waiting-list.html - email form and image
  7. Startuply_HTML/index-promo.html - text, no photos in header
  8. Startuply_HTML/index-fast-register.html - quick registration
  9. Startuply_HTML/index-clickthrough.html - gradient css background
  10. Startuply_HTML/blog.html - blog list
  11. Startuply_HTML/blog-post.html - blog post
  12. Startuply_HTML/product.html - single product
  13. Startuply_HTML/product-grid.html - product grid
  14. Startuply_HTML/product-list.html - product list
  15. Startuply_HTML/cart-checkout.html - eCommerce checkout
  16. Startuply_HTML/payment-confirm.html - eCommerce confirmation
  17. Startuply_HTML/register.html - registration
  18. Startuply_HTML/icons-reference.html - icon class names
  19. Startuply_HTML/shortcodes.html - design elements
  20. Startuply_HTML/signup.php - main form processing script, all forms data is submitted here
  21. Sources/Startuply_PSD.psd - main PSD template
  22. Sources/Content/ - content PSD templates

All of the boxed blocks within the main content area are nested within a div with an class of "container" Here is the general structure.

HTML Structure

If you would like to edit the color preset of the theme you should do "Replace all" this color #ff7701 with the desired one or use any of those predefined ones :

	
		*	Pink - ff5f9b
		*	Green - 39c8b7
		*	Blue - 59bbd7
		*	Berry - fe6760
		*	Orange - ff7200

B) CSS Files and Structure - top

This template is built on Bootstrap 3.1.1 foundation and uses several CSS files:

  1. assets/css/style.css - template styles
  2. assets/css/custom-animations.css - additional custom animations
  3. assets/css/lib/bootstrap.min.css - the main bootstrap styles
  4. assets/css/lib/animate.css - animations
  5. assets/css/lib/toastr.css - notification styles
  6. assets/css/lib/font-awesome.min.css - FontAwesome font styles
  7. assets/css/lib/font-lineicons.css - LineIcons font styles

While you can surely edit any file you want, please note that main template styles reside in styles.css file. If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

	

		/*==========================================================================
		  RESETS AND MASTER STYLES 
		  ========================================================================== */
		  
		  some code
		  
		/*==========================================================================
		  GENERAL & RE-USABLE ADJUSTMENTS
		  ========================================================================== */

		  some code
			
		  -------------
		  etc, etc.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

C) Less & Grunt support - top

Since version 2.0 we now have included all LESS files and Grunt packaging script this template to make it easier for everyone with advanced skills to edit the template even faster and easier!

  1. assets/Gruntfile.js - Grunt script
  2. assets/less/*.less - LESS styles

Less is a CSS preprocessor which drastically improves CSS development time and efifciency adding such things as CSS nesting, variables, mix-ins and more other cools things. Less documentation can be found here LESS Docs Apart from the Less itselft we also use very handy mix-in library for it named LessHat, some documentation for it can be found here LessHat Docs Modern browser cannot process less files directly so they should be compiled into default CSS files. There are a lot of ways doing so, we will list two of the most used ones:

First Option - is very fast and easy but can be used only as a temporary solution. Less files can be compiled into working CSS on the fly with less.js script. Just include less.js and styles.less inside your html document head, please do not change the inclusion order! 

	<link rel="stylesheet/less" type="text/css" href="styles.less" />
	<script src="less.js" type="text/javascript"></script>

Second option (preferred) is to setup Less compiler with Node.js and Grunt, please follow these steps in order to do so:

  1. Download and install node.js
  2. Launch Node.js command prompt for Windows or Terminal for Mac OS
  3. Install packages grunt-cli npm install -g grunt-cli
  4. Navigate to /Startuply_HTML_v2.0/assets/ and run npm install

All done, now you can use Grunt!

If you run grunt from your console the script will compile

  1. css/style.css from less/styles/style.less
  2. css/animations.css from less/animations.less

If you run grunt color from your console the script will compile

  1. css/style-blue-color.css from less/styles/style-blue-color.less
  2. css/style-green-color.css from less/styles/style-green-color.less
  3. css/style-pink-color.css from less/styles/style-pink-color.less
  4. css/style-berry-color.css from less/styles/style-berry-color.less
  5. css/style-orange-color.css from less/styles/style-orange-color.less

If you run grunt production from your console the script will compile all files as well as minified files:

  1. css/min/style.min.css from less/styles/style.less
  2. css/min/animations.css from less/animations.less
  3. css/min/style-blue-color.min.css from less/styles/style-blue-color.less
  4. css/min/style-pink-color.min.css from less/styles/style-pink-color.less
  5. css/min/style-green-color.min.css from less/styles/style-green-color.less
  6. css/min/style-berry-color.min.css from less/styles/style-berry-color.less
  7. css/min/style-orange-color.min.css from less/styles/style-orange-color.less

If you run grunt watch from your console (works only if you have local web server) the script will watch for all changes in your .less files and compile them real-time (greatly improves CSS development speed and convenience, no more refreshes every time!), also these scripts will be compiled:

  1. css/style.css from less/styles/style.less
  2. css/animations.css from less/animations.less

Also, if you install LiveReload (Chrome or Firefox) and have grunt watch running the webpage will be updated autiomatically in real-time when any .less script is updated, how awesome is that!

D) JavaScript - top

These scripts are the bare minimum for StartuplyHTML theme to work

  1. assets/js/jquery-2.1.4.min.js - jQuery
  2. assets/js/bootstrap.min.js - Bootstrap
  3. assets/js/startuply.js - Main theme JS script

All other scripts are not mandatory but are required for additional theme functionality:

  1. jquery.flexslider-min.js - used for testimonials
  2. jquery.appear.js - to initiate animations once element gets to the current viewport
  3. jquery.countdown.js - countdown script
  4. jquery.plugin.js - additional small scripts
  5. jquery.waypoints.min.js - secondary script for onePageNav
  6. jquery.validate.min.js - for validation uses ajaxedForms.
  7. toastr.min.js - for all kinds of notifications uses ajaxedForms.

The main theme JS script assets/js/startuply.js has several settings that we decided to move in the header for easier configuration

  1. log (default: false) - logs in console
  2. styleSwitcher (default: false) - enables style switcher (used only in our live demo)
  3. animations (default: true) - animations
  4. onePageNav (default: true) - one page navigation
  5. onePageNavHashChange (default: false) - url hash change when scrolling for onePageNav
  6. alwaysMobileMenuMode (default: false) - menu will always have mobile style
  7. mobileMenuMaxWidth (default: 768) - screen width in pixels when menu becomes mobile
  8. stickyMenuMode (default: true) - Sticky menu
  9. stickyMenuOffset (default: 500) - height offset in pixels to show sticky menu
  10. smoothScroll (default: false) - smooth scroll
  11. smoothScrollSpeed (default: 800) - smooth scroll speed
  12. ajaxedForm (default: true) - ajax form submit (does POST serialize on all forms and sends the data to form action attribute)
  13. ajaxedFormSuccessMsg (default: 'Success') - success message for forms
  14. ajaxedFormErrorMsg (default: 'An error occured. Please try again later.') - error message for rorms
  15. toastrPositionClass (default: 'toast-top-full-width') - toastr position

But there is more: startuply.js is made this way so it can also listen to data-attributes of html elements. These are the same parametrs as above but in camelcase e.g.: smoothScrollSpeed becomes data-smooth-scroll-speed. This way you can control the general setting in master config but then fine-tune the element behaviour per page!

  • Template's JavaScript assets/js/startuply.js is used mostly to initialize 3rd party plugins and libraries and pass default parameters to them 
    	
//Flexislider for testimonials
	if($('.testimonials-slider').length != 0) {
		$('.testimonials-slider').flexslider({
			manualControls: '.flex-manual .switch',
			nextText: "",
			prevText: "",
			startAt: 1,
			slideshow: false,
			direction: "horizontal",
			animation: "slide"
		});
};
    
// Headhesive for sticky menu init
    var options = {  // set options
            offset: '#showHere',
            classes: {
                clone:   'fixmenu-clone',
                stick:   'fixmenu-stick',
                unstick: 'fixmenu-unstick'
            }
};

    • E) Forms - top

    Startuply v2.0 comes with a lot of forms built it in found in forms.html file. You can copy paste them to any page you need and they will work. All forms found on other pages also do work and by default it just sends the form data to the specified email so if you need to edit the receivers email as well as the mail text you will need to edit signup.php file.

    1. Startuply_HTML/signup.php - add your email address, edit fields, edit email text
    2. Startuply_HTML/forms.html - all theme forms are found here

    The form is validated and then submitted on the register.html page which then sends the data to process-form.php file that just gets the variables and forards the data to your email

    F) Mailchimp integration - top

    ANY form in Startuply can have Mailchimp enabled, In order to do so please follow these steps:

    1. add mailchimp-form class to any form, this enables Mailchimp API for it
    2. make sure your form has the fields named: FNAME/LNAME (or FULLNAME) and EMAIL so it is properly forwarded to Mailchimp API and then saved
    3. edit assets/mailchimp/inc/store-address.php - add Mailchimp API key at line #36 and subscription list ID at line #40

    Please refer to the original script author if you need a deeper insight - http://stackoverflow.com/questions/5025455/some-basic-mailchimp-api-examples-required

    G) Social networks - top

    All links to social networks are hardcoded and should be changed directly in the code

    H) Sources and Credits - top

    I've used the following images, icons or other files as listed.

    We would be glad to help you if you have any questions relating to this theme. No guarantees, but we will do our best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item support" section.

    Vivaco Media

    Go To Table of Contents