The Flow – Web Template – HTML5 – PHP – CSS

Overview

A simple, responsive theme with material design styles for use on your HTML/PHP site.

Let us the flow do the heavy lifting, so you don’t need to!

It’s as simple as 1,2,3! Simply unzip the files onto your site and let The Flow do it’s thing!

Features

The Basics

• Easy configuration & Setup
• Basic Responsive Design (With Mobile Menu)
• Material Design Styles
• 3 Pages Pre-Designed
• Empty Page Template (Easy to reuse)
• CSS Helper Classes
• PHP Contact Form

Requirements

Backend:

• HTML 5
• PHP
• CSS

Knowledge:

• HTML knowledge is a must
• Basic PHP knowledge will help
• CSS knowledge (using classes on elements)

Please note: This is not a CMS theme, this is an old-school HTML template to build your site with.

Instructions

Simple Setup (Just change a few variables) 

The Breakdown: (This is the ‘init.php’ file)

$site_title = “Title”;             //Your site title
$site_description = “Description”; //Your site description
$site_author = “Dylan Auty”;      //The author
$site_keywords = array();         //Array of site keywords
$navigation_links = array();      //Array of Nav links with URLs
$site_logo = “”;                  //Link to site logo
$site_color_primary = “”; //Used for headers and buttons                  
$site_color_primary_dark = “”;   //Used on button hover, and footer copyright bar                  
$site_color_secondary_dark = “”; //Used in footer and links                   
$site_footer_title = “”; //The title of your footer                  
$site_footer_info = “”;       //The ‘about us’ info for footer                  
$site_footer_copyrights = “”;    //The copyright info                  
$site_contact_email = “”;        //The email address for mail function                  

Create a new page with some simple PHP code 

site_start(); ?>
//Simply add some HTML here

 The Flow handles the rest by getting your site information from the init file! 

Material Design 

Use our helper classes (CSS) to create the site you’ve always wanted.

Flow Card (Based on Material Cards) 
Simply add the class to your element

class=”flow_card flow_strech flow_pad”

Flow Button (Based on Material Buttons) 

Simply add the following class to your element to show a notice
class=”flow_btn”

We will style input buttons, and button elements for you, don’t even worry 
 
Flow Columns (Simply Responsive Columns) 
30% Column – Nice! 
Simply add the following class to your element to show a notice

class=”flow_col_30″
 
70% Fancy – 100% Responsive 
Simply add the following class to your element to show a notice

class=”flow_col_70″

Flow Row (Like it, Love it) 
 Simply add the following class to your element to show a notice

class=”flow_row”

Elements (We’ll take care of things) 

The flow will handle all your standard elements, like images, spans, heading and paragraphs. No Stress. It’s all responsive, no worries. 
Look at our image, isn’t it as fancy as this template?
Heading 1
Heading 2
Heading 3
Heading 4
And so on… and so on..

Flow Tables (Good Ol’ Table) 

 It’s simple, create your HTML template, and let the flow do the rest. We have setup some style rules to style your templates. Easy!

Flow Input Fields (Based on Material Inputs) 

 It’s simple, create your HTML form/input field, and let the flow do the rest. We have setup some style rules to style your templates. Easy!
Also, use the following php function to use the built in contact form!

Flow Notice

Simply add the following class to your element to show a notice

//this is a notice by the way… 
class=”flow_notice”

That’s about it! I hope you enjoy using this very simple HTML 5, PHP, and CSS Web Template!

Have a great time!