Spline
Coming Soon Page Template

Created: Apr 3, 2014
Author: Sergey Serafimovich
Email: slid@me.com

Thank you for purchasing my template. 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!

HTML Structure

Spline is a single-page template, however the package includes several different color schemes and usage examples. Here is the list of all HTML files and their descriptions:

File	Description
midnight.html	HTML template with default color scheme.
silver.html	HTML template with Silver color scheme.
berry.html	HTML template with Berry color scheme.
sky.html	HTML template with Sky color scheme.
grass.html	HTML template with Grass color scheme.
wisteria.html	HTML template with Wisteria color scheme.
hongkong.html	Customized HTML template Hong Kong.
retro.html	Customized HTML template Retro.
space.html	Customized HTML template Space.

All those files follow the same basic HTML structure with some minor changes. Let's take a look:

<html>
   <head>
      ...
   </head>
   
   <!-- Class attribute of body element defines the color scheme -->
   <body class="color-scheme-light">

      <!-- A background image -->
      <div id="bg-image"></div>
   
      <!-- Animated canvas in the background -->
      <canvas id="bg-canvas"></canvas>
      
      <!-- The first screen -->
      <div class="splash">...</div>

      <!-- The second screen -->
      <div class="overlap">...</div>
   </body>
</html>

As you can see there are a few basic elements. In fact all of them are optional except the <div class="splash" /> which appears as the first screen of your coming soon page. So, for instance, if you don't want any background animation you can simply remove the <canvas id="bg-canvas" /> element.

The code of each HTML file is well commented, so it is very easy to understand. You can also find more information about customizing it in the "How to make changes?" section.

CSS/LESS Structure

This template's CSS is built on LESS, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. So the best way to make changes in styles is to edit LESS files in /less/ folder. Here it the list of LESS files coming with the template:

File	Description
styles.less	The root LESS file that should be compiled. All other files are imported to that one.
variables.less	Contains all customizable variables like colors, font sizes, etc.
mixins.less	Commonly used mixins and functions.
animate.less	All CSS-animations used in the project.
grid.less	Grid styles.
layout.less	General layout related styles.
typo.less	Typography styles.
responsive.less	Styles for responsive behaviour.

In case if you are not familiar with LESS you can find the resulting CSS files in /css/ folder. Both minified and developer versions.

JavaScript Structure

This template imports 5 Javascript files. You can find all of them in /js/ folder.

File	Description
modernizr.js	JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
jquery.js	jQuery is a Javascript library that greatly reduces the amount of code that you must write.
countdown.js	JavaScript API for producing an accurate, intuitive description of the timespan between two Date instances.
bezierCanvas.js	A script that creates Bezier curves based animation in a canvas element. The script is wrapped as jQuery plugin.
notifyMe.js	A script for handling a "Send me an email when it's done" form. Sending AJAX requests, error handling, etc.

PHP Structure

This template includes a PHP script notify-me.php that handles AJAX requests from "Send me an email when it's done!" form. There is also a PHP library /lib/MailChimp.php with minimum abstraction MailChimp API v2 wrapper by Drew McLellan. It is required for proper work of notify-me.php script.

You can find more information about the setting up this functionality in Notify me section.

Color schemes

OK, now is the fun part. This template includes several different color schemes and usage examples, so the best way to start is to pick one of the HTML files and customize it the way you like.

To change the color scheme for the entire page you have to change class attribute for body element. For example:

<body class="color-scheme-light">
   ...
</body>

You can also change a color scheme for only a part of the document. To do so you need to add a class attribute with the name of color scheme to the parent element of this part.

<body class="color-scheme-light">
   <div class="splash color-scheme-grass">
      <!-- 'color-scheme-grass' would be applied for elements inside this DIV -->
      ...
   </div>
   <div class="overlap">
      <!-- Elements here would inherit colors from BODY -->
      ...
   </div>
</body>

Here are the color schemes that are available at the moment:

Class name	Description
Empty class name	Default scheme.
color-scheme-silver	Silver color scheme.
color-scheme-grass	Grass color scheme.
color-scheme-sky	Sky blue color scheme.
color-scheme-berry	Berry color scheme.
color-scheme-wisteria	Wisteria color scheme.

Countdown

There are two important things you have to know about the countdown element. The first one is how to change the end date for your countdown. At the very bottom of your HTML there is a piece of code like this:

<script type="text/javascript">
  $().ready(function(){
     // Activate countdownTimer plugin on a '.countdown' element
     var countdown = $(".countdown").countdownTimer({
           // Set the end date for the countdown
           endTime: new Date("April 21, 2014 11:13:00 UTC+0200")
        });
     ...
  });
</script>

Can you see a date there? Yep, this is it! Change it to whatever you like.

The second thing you need to know is that there are two styles for the countdown element. The default one when days, hours, minutes and seconds are separated with lines. And the second one when they are fitted in circles. Here is how to switch between them:

<!-- Default style -->
<div class="countdown">...</div>

<!-- Circled style -->
<div class="countdown circled">...</div>

Notify me

This template includes a script that helps you to create a mailing list for notifying visitors about the website launch. Email addresses can be stored in a file or in your MailChimp list.

File storage

To store emails in a file you should do the following:

Open notify-me.php file in your favorite editor
Set "file" as a value for $STORE_MODE variable
Set the name of file you wish emails to be stored in as a value for $STORE_FILE variable
Make sure that the script has write permissions on this file

// Set to "mailchimp" to store contacts in MailChimp or "file" to store in a file
$STORE_MODE = "file";

// Path to file
$STORE_FILE = $_SERVER["DOCUMENT_ROOT"]."noify-email-list.txt";

It is also a good idea to protect this file from reading. To do so add in your .htaccess file something like:

<Files "notify-email-list.txt">
Order Allow,Deny
Deny from all
</Files>

MailChimp

MailChimp is an online service that let's you to create, send, and track email newsletters.

If you want your coming soon page to store emails in your MailChimp account you need to know your API Key and Subscribers list ID.

How to get an API Key

Log in to your MailChimp account or create one
Go to Account Settings > Extras > API keys
In Your API keys section click Create A Key button
Copy and paste it to notify-me.php file

How to get a List ID

Log in to your MailChimp account or create one
Go to Lists and choose an existing list or create a new one
Go to list's Settings > List name & Defaults
Copy and paste your List ID to notify-me.php file

Make sure that $STORE_MODE value is set to "mailchimp". As result, the beginning of your notify-me.php should look like this:

// Set to "mailchimp" to store contacts in MailChimp or "file" to store in a file
$STORE_MODE = "mailchimp";

// Your MailChimp API Key
$API_KEY = "51ra5f777afa21047180b942187216a7-us8";

// Your MailChimp List ID
$LIST_ID = "f018q6dabc";

If you have more questions regarding MailChimp service you can check their Knowledge Base.

Changing error and success messages

You can also change error and success messages of the form. New message strings can be passed to notifyMe plugin as options when activating plugin at the bottom of page:

<script type="text/javascript">
  $().ready(function(){
     ...
     // Activate notifyMe plugin on a '#notifyMe' element    
     $("#notifyMe").notifyMe({
        msgError404: "Change",
        msgError503: "to",
        msgErrorValidation: "anything",
        msgErrorFormat: "you",
        msgSuccess: "want!"
     });
     ...
  });
</script>

Animated Background

Now, I would like to tell you about those animated Bezier curves in the background. This animation is created programmatically, which means that you can adjust it by playing with some parameters. Here is the list of available options:

Option	Values	Default	Description
`maxLines`	1..100	100	Number of animated lines.
`maxStyles`	1..100	10	Maximum number of different line colors.
`strokeWidth`	0.1..100	1	Stroke widht of lines.
`lineSpacing`	0.1..10	1	Base spacing between the lines.
`spacingVariation`	0.1..10	0	Maximum value of spacing that would be added to `lineSpacing`
`spacingMode`	'add' or 'multiply'	add	Describes the way of how the spacing between lines is calculated.
`coordinates`	Array	[]	Predefined array of points describing the curve path. In the format: Array( { x1: 100, y1: 0, x2: 20, y2: 50, x3: 500, y3: 30, x4: 1000, y4: 120, kx1: 10, ky1: 5, kx2: 10, ky2: 20 }, ... );
`loop`	Boolean	false	Defines if the animation is looped or endless (new random coordinates would be generated).
`colorBase`	Object	{r: 100,g: 100,b: 100}	The color base for lines.
`colorVariation`	Object	{r: 100,g: 100,b: 100}	Maximum value that would be added to each color channel.
`moveCenterX`	Number	0	Move the center of canvas over the X axis.
`moveCenterY`	Number	0	Move the center of canvas over the Y axis.
`delayVariation`	Number	0.3	Delay between movement of each line.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my 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 Discussion" section.

Spline Coming Soon Page Template