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:
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:<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.<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
Files and Folders
This is the default structure of Protostrap:
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:
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.
- 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 |
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.
<?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 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.
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.