MiniGO - Uber Minimal Flat Coming Soon Page Crafted with care in 2014 by Premio Themes

Greetings and welcome to our MiniGO coming soon html template. I’m Octavian Chelaru, the founder of Premio Themes, and I’d like to thank you for purchasing one of our products, your support is much appreciated.

Please drop us a line and let us know what you think of this template, if you have any suggestions for improvements or extra features, if there’s something you don’t like or you just want to say “Hello”.

We count on your help to constantly improve the quality of our products and bring more value to you and all of our other customers.

Now, let’s get to the help part.

First of all, customization of this template will, of course, require minimal knowledge of HTML and CSS. Chances are you’re already quite familiar with them but in the off chance you’re not, here’s a really good place to get you started: TutsPlus.

File Structure

After purchasing this product and unpacking the zip file you will see the following folders:

  • 1-HTML-Template - This is the actual template you will be uploading to your server
  • 2-SASS - We included the SASS sources here for advanced users
  • 3-PSD - This folder contains the Photoshop PSD designs of the template
  • 4-Help - Here you can find the help file

Now, in order to get started using this product you need to open up the 1-HTML-Template folder. Here’s what it contains:

  • images
    • bg - The background images used in the slideshow
    • patterns - The optional pattern overlay images
    • logo.png - The logo image file
  • inc
  • scripts - Here you can find all the Javascript files
    • flipclock.min.js - The FlipClock.js library. Used for controlling the countdown
    • jquery.easypiechart.min.js - The Easy Pie Chart library. It’s part of the circular countdown style
    • jquery.placeholder.min.js - jQuery Placeholder. Helps fix form usability in older browsers
    • main.js - This is our custom Javascript code, uncompressed
    • main.min.js - This is our custom Javascript code, compressed
    • modernizr.custom.min.js - Custom build of Modernizr containing only the parts we needed.
    • respond.min.js - Respond.js. Adds responsive capabilities to older browsers
  • styles - Here you can find all the CSS files
    • custom.css - Holds your custom CSS if you need it
    • loader.css - Styles the loader, uncompressed
    • loader.min.css - Styles the loader, compressed
    • main.css - Holds most of the styling code, uncompressed
    • main.min.css - Holds most of the styling code, compressed
  • video - Holds the demo video files. Only needed if you use a self hosted video as background (not youtube)
  • .htaccess - Optional but recommended. This configures your server to allow better caching etc
  • 404.html - Optional but recommended. The file displayed when someone visits a URL pointing to a missing file or folder
  • config.php - Configuration file for the Mailing list and Contact forms
  • demo-1.html - HTML file for the first preview demo
  • demo-2.html - HTML file for the second preview demo
  • demo-3.html - HTML file for the third preview demo
  • demo-4.html - HTML file for the forth preview demo
  • favicon.ico - Optional but recommended. Replace with your own customized icon.
  • index.html - This is the home page which display all the text content, images and so on.
  • mail-list_FJdfjfk4FGeWR.txt - Demo file for the mailing system
  • mailListHandler.php
  • robots.txt - Optional, it explicitly allows any type of search bot to visit and index your site
Quick Tip: The demo-1.html through demo-4.html files are demonstrational and contain the configurations we used for the products live demo. They can be disgarded if you don’t need them. If you want to use one of these straight out of the box, just rename it to index.html.

Installation

To install MiniGO on your server copy the required files and folders mentioned in the previous section to the root folder of your web server. Make sure you set chmod 777 for the mailing list text file if you choose to use it. However we recommend you use the mailchimp option.

If you don’t know how to use an FTP client to upload file and change file permissions (usually not needed) refer to your hosting provider’s help section or use this quick guide.

Settings (Options)

We have provided a small number of options that should help most users quickly set up and customize our product.
If you need to customize the styling even further refer to the Visual Customisation section of this help file.

The settings can be changed by editing the index.html file.
They can be found close to the beginning of the file and are also commented in the code:

<script>
    var miniGoOptions = {
        theme: {
            // Set to true to add a translucent background behind each page
            contentBackground: false
        },

        countdown: {
...
...
        }
    }
</script>

The settings are structured by category and the categories are as follows:

Theme

Here you can choose whether or not you want your content sections to have a translucent background.

contentBackground: false

Countdown

Settings for the countdown display.

Countdown Style

Possible options are 'default' or 'piechart'.

type: 'default',

Start/Target Date

The date when the countdown started. Used by the progress bars. 24 Hour format (00 to 23): Month Day, Year Hours:Minutes

startDate: new Date("November 1, 2013 00:00"),

The target date we’re counting down to. 24 Hour format (00 to 23): Month Day, Year Hours:Minutes

targetDate: new Date("March 20, 2014 11:13")

Background

  • Main background color

    color: '#000',
  • Pattern Overlay

    You can use a pattern image as overlay over the background slideshow/video. Set it to the path of the image file or '' if no pattern is desired.

    patternOverlay: 'images/patterns/oblique-l-5.png',
  • Pattern Overlay Opacity

    Sets the opacity of the pattern overlay. 0 is completely transparent, 1.0 is fully opaque.

    patternOverlayOpacity: 0.3,
  • Background type

    Here you can choose what type of background you want. Possible options are 'slideshow' or 'video'. Enter '' if no slideshow/video is desired as background in which case the background color selected above will be visible.

    type: 'slideshow',
    • Slideshow options

      • Slideshow effect

        Type of transition effect. Possible options are 'kenburns', 'fade' or 'continuousFade':

        type: 'continuousFade',
      • Slide duration

        Time in seconds between image changes:

        duration: 15,
      • Ken Burns options

        Options for the Ken Burns transition type.

        Minimum and maximum scaling of the image. This value will be randomized for every slide within these limits. Use a minimum of 1.0

        minScale: 1.2,
        maxScale: 1.7,

        Minimum and maximum movement of the image, in percentages. The actual value will be randomized for every slide, all within these limits. Note that this is also limited by the scale because the image needs to stay within the viewport bounds.

        minMove: 5,
        maxMove: 15
    • Video options

      This sets up the video source. Possible options are 'local' or 'youtube'. If you choose 'local' you will need to encode a MP4 video (and other formats for compatibility if desired) and host it on your own server.

      Important notice: Videos don’t auto-play on iOS devices (iPhone, iPad, iPod). Apple disabled this on purpose. Also, videos will not be loaded on slow network connections on touch devices.
      source: 'youtube',

      Fallback image for browsers that can’t play video (such as mobile devices). Set it to the path of the image file.

      imageFallback: 'video/bg.jpg',

      Sets the audio volume of the video. Value range 0 to 100.

      volume: 0,
      • Local video options

        Configure the video files if you selected 'local' as video source

        localFiles: {...}

        H.264 (mp4) video format file. This one is required because we use it to fall back to Flash playback when HTML5 video support is missing. For example, Firefox only supports this format natively on Windows so on other systems it will fallback to Flash playback which is a bit slower.

        mp4: 'video/bg.mp4',

        Optional WebM format. WebM files are generally smaller and faster than H.264 and are played by Chrome, Firefox, Opera and Android browsers (which also support H.264). Enter '' if you don’t have this format.

        webm: 'video/bg.webm',

        Optional OGG format. OGG Video is optional but useful because it’s played natively by Firefox on OSX and Linux. Enter '' if you don’t have this format.

        ogg: 'video/bg.ogv',
      • Youtube video options

        youtube: {...}

        The URL of the Youtube Video or Playlist

        url: 'http://www.youtube.com/watch?v=ab0TSkLe-E0',

        The options below allow you to play only a part of a video. For playlists it will only work for the first video.

        If you dont’t want the video to start from the very beginning, enter the time offset in seconds.

        startAt: 0,

        If you dont’t want the video to end at the very end, enter the time offset FROM THE BEGINNING of the video, in seconds. Otherwise leave it at 0.

        endAt: 200,

Mail Settings

These settings can be found in config.php

Mailing List Settings

If you want to use MailChimp to collect emails, set this option to true. Otherwise, set it to false.

$use_Mailchimp = true;

When set to false the emails are saved in a text file on your server. Make sure you use a very random file name for this file so it’s not possible for anyone to guess it and get access to the email addresses saved inside.
Also, make sure the file is writable by the server.

Add the name of this file here:

$maillist_file = 'mail-list_FJdfjfk4FGeWR.txt';

MailChimp Settings

In order to use MailChimp you’ll need an API Key. You can generate API Keys by going to Account settings -> Extras -> API keys
Paste your MailChimp API Key here:

$mailchimp_API_Key = 'abc123abc123abc123abc123abc123-us1';

Next you need to create a List in MailChimp and paste it’s ID here. The List ID can be found in the List’s Settings, on the right hand side.

$mailchimp_list_ID = 'b1234346';

If set to true, it enables Double Opt-in. See the following link for reference on how it works: http://kb.mailchimp.com/article/how-does-confirmed-optin-or-double-optin-work/

$mailchimp_double_optin = false;

If Double Opt-in is disabled, you can still send a Welcome message by setting the following to true.

$mailchimp_send_welcome = false;

Contact Form Settings

This is the email address where you’ll receive the contact form messages:

$target_address = 'minigo@example.com';

By default, the Contact form FROM email is the same as the $target_address. However, some hosting providers won’t allow email being sent from an address that isn’t configured on the host’s Mail service.
If you are not getting emails from the form try setting this to an address that is properly configured on your host.

$from_address = '';

Prefix for the email subject. Useful for filtering mail.

$subject_prefix = 'MiniGo message from - ';

MailChimp Issues

There are two common mistakes that people make when using the MailChimp feature:

  1. Using the List Name instead of the List ID which leads to the form submission to fail.
  2. Using an email such as email@test.com to test the form. MailChimp rejects such addresses.

Contact Form Issues

If you have problems receiving email from the Contact Form, first check your Spam folder.

If the email isn’t there either, please contact your hosting provider and ask if any special settings need to be applied for the PHP mail() function to work properly. You can email us with this information if you believe there are changes that need to be done.

Visual Customisation

In the sections below we’ll describe how you can customise your Logo, Loader, Slideshow and also how to use custom CSS to change any visual aspect of your site.

Loader

Use the Custom CSS guide to learn how to customise your CSS styling.
To customize the background color of the loader add the following to your custom.css file:

.loader {
    background: #000000;
}

This sets the loader background to black or #000000.

Refer to the section below to learn how you can change or remove the logo from the loader.

To change your logo you’ll need to edit the index.html file. In your editor search for this bit of code:

<div class="loader">
    <img class="loader-logo" src="images/logo.png" width="141" height="141" alt="MiniGO">
    <div class="bubblingG">
        <span id="bubblingG_1"></span>
        <span id="bubblingG_2"></span>
        <span id="bubblingG_3"></span>
    </div>
</div>

This is where you change the logo within the loader.

Also search for this code:

<div class="grid__item one-whole push--bottom">
    <img src="images/logo.png" width="141" height="141" alt="MiniGO">
    <!-- <div class="minigo-logo"><span>MiniGO</span></div> -->
</div>

This is the logo on the main page.

We’re interested in the src="images/logo.png" part of that code. Just change that to the path of your own logo or replace the logo.png file.
Also, change the alt="MiniGO" part to your site name. This is good for SEO purposes so that search engines know what the logo image is.

Don’t forget to change the width="141" height="141" bit to the size of your logo. This can be removed if you wish. We recommend you create a logo file with twice the resolution you are using on the site so that it looks great on high density displays like retina. For example if you want to show your logo at 141x141 the actual image should be 282x282 pixels.

If you want to use our preset logo style and just change the text, look for this in the second code block:

<img src="images/logo.png" width="141" height="141" alt="MiniGO">
<!-- <div class="minigo-logo"><span>MiniGO</span></div> -->

and change it to this by removing the <img> tag and uncommenting the next line:

<div class="minigo-logo"><span>My Brand</span></div>

Replace My Brand with whatever you want.

Unfortunately, this won’t work for the Loader logo because it needs the CSS and fonts that load after the Loader is displayed so the effect wouldn’t be visually appealing. Therefore you should remove the logo from the loader for this use case.

Slideshow

If you decide to use an image slideshow as your background, follow the following steps to add your own images to it.

Find this code section inside the index.html file:

<figure class="bg-wrapper">
    <img src="images/bg/bg1.jpg" alt="Optional alt text goes here">
    <img data-src="images/bg/bg3.jpg" alt="">
    <img data-src="images/bg/bg2.jpg" alt="">
    <img data-src="images/bg/bg5.jpg" alt="">
    <img data-src="images/bg/bg4.jpg" alt="">
    <img data-src="images/bg/bg6.jpg" alt="">
</figure>

The <img ... > lines inside the <figure> tag are the images currently displayed by the slideshow. Change the "images/bg1.jpg" bits to the paths of your own images or simply replace the default ones.

You’ll notice that the first image path is written in a src attribute while the next ones are in data-src attributes.
This is optional but it speeds up load times because all the images except the first one will start loading only after the site is fully displayed.
If you want your images to be found by search engines you’ll have to use the src attribute for all the images.

Quick Tip: If you want a static photo background just keep one of the images and delete the rest, the slideshow will be disabled.

Icons

If you want to change any of the icons used you can pick them out by visiting the Font Awesome website.
Say for example that you want to change the icon for the Contact button. Find the following code block in the index.html file:

<div class="nav-right">
    <a href="#contactPage" title="Contact" class="site-page__trigger"><i class="fa fa-envelope"></i></a>
</div>

Replace the fa-envelope bit with the icon you chose from the Font Awesome website. Save the file and you’re done!

Custom CSS

In this section we will explore the methods used to customize the styling of the pages via custom CSS.

To change the look of your site, we recommend the following software:

  • The Google Chrome browser. While the steps described in this section will mostly be the same in Mozilla Firefox, this guide uses Chrome.

  • A code editor. You can get away with a simple text editor (like Notepad) but we recommend using a real code editor. Our choice is Sublime Text but there are many to choose from.

Because this is a general guide, as a quick exercise we will be changing the color of the section titles in this help file.

First, some preparations. We recommend that you use a separate CSS file for your changes in order to seamlessly integrate future updates from our developers without losing your changes.
We have provided an empty file for you in the styles folder, named custom.css. Look in the File Structure section of this help file if you can’t find it.

Quick tip: You can modify the main CSS file, but future updates will overwrite your changes. If you want to do this, you’ll need to replace the minified in index.html:

<link rel="stylesheet" href="styles/main.min.css">

to this:

<link rel="stylesheet" href="styles/main.css">

Then skim through the steps below to find out how to locate the CSS properties you need to change. Once you know what to change just do the following:

  • Spot the line number mentioned to the right of the selector you are interested in. For example main.css:9306 means line number 9306 of the main.css file.
  • Open styles/main.css in your editor, scroll to that line number, and make your changes.

Now, let’s change some styling!

  1. Right click one of the orange titles and select “Inspect Element”

    The Developer Tools panel will open.
    On the left side of the Developer Tools, the HTML tag of the title is selected. On the right side, you will see all the CSS properties assigned this element.

    To change the color of the titles, we’re interested in the color property of the h1 tags.

  2. To change the color, we need to use the same CSS selector used to set the original color. In this example, the selector is h1. Click on the selector in the Developer Tools and copy the text.

  3. Now, in your code editor, open custom.css and type this (by pasting the previously copied selector):

    h1 {
     color: #ff0000;
    }

    Then, save the file and reload the page. The section titles should now be a bright red color, the #ff0000 part being the actual color value.

Page Content

To change the content of pages search the index.html file for these HTML tags and edit the text inside.

The front page

<div class="site-page site-front site-page--active">
    ...
    ...
</div>

The about page

<div id="aboutPage" class="site-page site-page--from-left">
    <h1>Who we are</h1>
    ...
    ...
</div>

The contact page

<div id="contactPage" class="site-page site-page--from-right">
    <h1>Get in touch</h1>
    ...
    ...
</div>

Countdown labels

To change the labels find this HTML tag and edit the data-labels attribute:

<div class="clock" data-labels="Days,Hours,Minutes,Seconds"></div>

Assets Used

Fonts

Google Fonts were used to create this template in order to insure easy implementation with great browser compatibility. The fact that they’re free and gorgeous also helps.

So here are the fonts we used and their download links:

Lato (thin, light, normal, bold, ultra-bold)
http://www.google.com/fonts#UsePlace:use/Collection:Lato

Icons

We used the lovely Font Awesome font icons for this theme to ensure flexibility, easy color changing, quick loading,
browser compatibility and, most importantly, great look on high density displays (like retina).

You can download Font Awesome font icons here:
http://fontawesome.io/

Javascript Libraries

jQuery - It needs no introduction.

FlipClock.js - Used for controlling the countdown.

Easy Pie Chart - Leightweight plugin to draw simple, animated pie charts.

jQuery Placeholder - Helps fix form usability in older browsers.

Modernizr - JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

Respond.js - Adds responsive capabilities to older browsers.

CSS Libraries

normalize.css - Makes browsers render all elements more consistently and in line with modern standards.

inuit.css - A lightweight CSS framework.

Images & Video

Some of the images used in the template preview have been purchased from Fotolia. Unfortunately due to license limitations these images can’t be included in the product you purchased so placeholder images were used instead. If you are specifically interested in one particular photo please shoot me an e-mail and I’ll send you the image id so that you can purchase it.

http://www.fotolia.com

The video we used within the package is a modified version of this free After Effects template: Bokeh Background.

Credits

Octavian Chelaru

Octavian Chelaru

VIBE CRAFTER

E-mail Linkedin Facebook
Octavian Chelaru

Bogdan Gribincea

CODE ARTIST

E-mail Linkedin Facebook Twitter