Basics

This is an overview of Protostrap's elements and it's structure to give you some orientation of what is where.

Protostrap's Elements

Protostrap is not a single tool but more a collection of tools that Protostrap ties together and extends.

It's composed of:

Bootstrap
Protostrap is based on Twitter Bootstrap. This means that in Protostrap you can do everything you can do in Bootstrap.
Font Awesome & Ionicons
Font Awesome is the go-to icon font and it comes with Protostrap by default.
All Font Awesome icons can be called with the default Font Awesome tag:

Copy Code
```
<i class="fa fa-search"></i> 
This shows: 
```
For more mobile-focused Prototypes we also added the Ionicons icon font. The syntax is slightly different and the icons are larger by default.

Copy Code
```
<i class="icon ion-ios-star-outline"></i> 
This shows: 
```

3rd Party Extentions
Protostrap comes with a series of 3rd party extentions to enable features not native to Bootstrap:

Name	Enabled By Default
Tablesorter Plugin	yes	Demo Website
Bootstrap Select Plugin	yes	Demo Website
Bootstrap Switch Plugin	yes	Demo Website
Bootstrap Datepicker Plugin	yes	Demo Website
Bootstrap File Input Plugin	yes	Demo Website
Twitter Typeahead Plugin	yes	Demo Website
Add to Home-Screen	no	Demo Website
Fastclick extentions	no	Demo Website
jQuery Sortable Plugin	yes	Demo Website
jQuery Hotkeys Plugin	yes	Demo Website
jQuery Masked Input Plugin	yes	Demo Website
noUiSlider - A mobile friendly slider	no	Demo Website

Protostrap Functions & Helper Classes
Protostrap adds a lot of functionality in PHP and JavaScript and like Bootstrap has a range of CSS classes that are handy helpers to make things easier or more interactive.

See the pages for CSS, JavaScript and PHP for a detailed documentation.
Protostrap Components
Protostrap has a few components of its own. These allow more advanced functionalities and are what makes Protostrap stand out.
These are:
- A simple Data Layer
- Fake Authentication Layer
- Multilinguality
- Fake Google: Simulate Google Searches
See the components page for more details.

Files and Folders

This is the default structure of Protostrap:

- assets
- core
- snippets
.htaccess
fileNotFound.php
functions_controller.php
index.php
google.php
testpage.php

Assets folder
This folder contains all assets. Most importantly the CSS and JS files:
- Add your CSS rules in the file assets/css/main.css
- Add your JS code in the file assets/js/main.js

The complete list of the folders in Assets:

Folder	Contains
css	All css files you add
data	All YAML files that contain the data of the Prototype. See the section Simple Data-Layer in Text Files for a detailed documentation
ico	The icons that allow having a Homescreen Icon on mobile
db	A sqLite Database - For expert users only
csv	A folder to store your CSV files to be processed by Protostrap
img	All your images
js	All the JavaScript files you add
webfonts	All the webfonts Protostrap uses

Core folder
Contains all the essential Protostrap files. Leave this folder alone.

Snippets Folder
A place to store all your snippets. Contains a series of snippets to get you started.

.htaccess
Handles "End of Prototype" situations when users click on links that have no corresponding page in the prototype. For this the module "mod_rewrite" has to be enabled on the server, which should be the case by default. If a file does not exists, Protostrap will show the file fileNotFound.php displaying the "End of Prototype" page.

index.php
The main file called when protostrap is opened.

fileNotFound.php
This file is called by .htaccess whenever a file is not found.

functions_controller.php
This file let's you add your own PHP functions. Adding them into functions_controller makes sure that you have the functions at you disposal in every page or snippet.

google.php
This is the file that contains a fake google search page that allows you to simulate google search scenarios.

testpage.php
This file contains examples of uses.

Default Filestructure

Pages that get called in the browser have to have a certain structure in order to work. There are only a few rules but these are important:

The first thing must be to include protostrap.php
Including meta_headTag.php loads all the CSS etc. Without it il will not look like anything.
Including meta_javascripts.php loads all the javascript libraries. Without it nothing will be interactive.

Below you find the minimal filestructure that Protostrap requires.

Copy Code

<?php
    // PROTOSTRAP
    // This file sets up project-wide things like authentication -
    // DO NOT REMOVE
    include('core/protostrap.php');

?><!DOCTYPE html>
<html lang="en">
    <head>
        <title>Your Page-Title</title>
        <?php
        // CSS, FONTS etc
        // This includes all the markup that loads css files and similar stuff,
        // If you have to add more CSS, do it here.
        // DO NOT REMOVE
        include('./snippets/meta_headTag.php');?>

    </head>
    <body>

        <?php
        // JAVASCRIPT
        // This includes the needed JavaScript files
        // If you have to add more JavaScript, do it here.
        // DO NOT REMOVE
        include ('./snippets/meta_javascripts.php');?>
    </body>
</html>
    <?php
    // PROTOSTRAP
    // This file sets up project-wide things like authentication -
    // DO NOT REMOVE
    include('core/protostrap.php');

?><!DOCTYPE html>
<html lang="en">
    <head>
        <title>Your Page-Title</title>
        <?php
        // CSS, FONTS etc
        // This includes all the markup that loads css files and similar stuff,
        // If you have to add more CSS, do it here.
        // DO NOT REMOVE
        include('./snippets/meta_headTag.php');?>

    </head>
    <body>

        <?php
        // JAVASCRIPT
        // This includes the needed JavaScript files
        // If you have to add more JavaScript, do it here.
        // DO NOT REMOVE
        include ('./snippets/meta_javascripts.php');?>
    </body>
</html>

Snippets

Snippets are Protostrap's way to make specific parts of your project reusable, for example your project's header or footer.
This reduces redundancy and the amount of work needed to change something that appears on several pages.

This is done by saving the code of the snippet to a separate file into the directory snippets.

The snippet can then be included into any page by using this function:

// This includes the contents of the file
// snippets/footer.php
<?php include("./snippets/footer.php");?>

The Admin Panel

The Admin Panel is where you can enable or disable 3rd Party extentions and can import spreadsheets to have your prototype's data available locally (great if you want to work offline)

You can reach the Admin Panel in the browser via
yourlocalhost/nameofyourproject/core

A screnshot of the Admin Panel:

Please Note:
The features of the Admin Panel will only work if the files in the assets directory can be written by the PHP script.