Download Protostrap

Setup


Setting up is the hardest part of getting into Protostrap. It is not a single tool that comes in a nicely wrapped box. It is more like a DIY instrument that needs to be assembled.

Once you are up and running you will have overcome the biggest obstacles.

Requirements


You need
  • A local webserver with any recent version of PHP.
  • A decent text editor - we recommend Sublime Text
  • A modern, up-to-date Web-Browser like Chrome or Firefox. There's no Internet Explorer support for Protostrap
  • Some basic knowledge of how websites work under the hood:
    HTML, CSS, JavaScript
  • A tiny bit of PHP, just the basics will get you far.
    There are great online courses to learn php in no time.

Installing a local webserver: MAMP

Do you have a local webserver?

If you are not sure, if you have a local webserver or not, do this simple test:

Look at the green box :
This is your http;//localhost
If you see something that looks like a working website:
Congratulations, you have a running webserver! It can be called via http://localhost

If you see an error message you need to install a webserver.


We recommend to use MAMP as a local webserver. MAMP is available for free for macOS and Windows. It is the easiest way to have a running webserver.

To get MAMP running:
  • Download and install MAMP
  • Go to Applications, open the MAMP folder and start MAMP
  • Open the MAMP preferences
  • Open to the Ports tab
  • Click on the Set Web & MySQL port to 80 and 3306 Button.
    Mamp Preferences
  • Restart the server. It will not work without restart!
  • You now have a local webserver running under http://localhost

If you need help with getting MAMP running, check out the "Installing MAMP and Protostrap" video.

Installing Protostrap

  • Download Protostrap
  • Unzip it.
    This will give you a folder called Protostrap-master
  • You can rename it something that makes more sense for you. For example the name of a project.
  • You now have to move the folder onto the local webserver: inside the MAMP "htdocs" folder which is located in the MAMP Application directory /Applications/MAMP. This folder is called "Document Root". (You can change the path for the Document Root in the MAMP application's Preferences Panel)
  • You're done! You can access Protostrap in the browser via: http://localhost/protostrap
    (assuming you have named the folder protostrap.)


A short tutorial on setting up MAMP and Protostrap

A word of caution

  • Do NOT use Protostrap in a production environment
    Protostrap is prototyping software and therefore lacks all security features needed for production.
    Make this also clear to your customers.

Using Sublime

Sublime Text is an awesome text editor well worth the money it costs.
It has ridiculously great features like multiple selection or the ability to move lines up or down in a document (great for reorganizing lists!)

The best thing about Sublime Text though is how extensible it is.
There are two types of extentions we recommend for working with Protostrap:
  • Packages that help you with writing code in general
  • Snippets that are customized to Protostrap

Recommended Sublime Packages

There are a few Packages that we strongly recommend you to use in order to write code quickly and with as few errors as possible.
These are:
  • Emmet
    Emmet's superpower is in expanding abbreviations of HTML/CSS terms.

    For example the abbreviation
    div.page
    expands to this
    on hitting the tab key:
    <div class="page"></div>
  • Text Pastry
    Text Pastry expands Sublime's great multiselect feature even further. It let's you insert different items for each selection, be it words or numbers.

    In the example below we multiple-select li-tags for a navigation and insert all navigation keywords at once.


To add Packages to Sublime Text you first have to install Package Control, which is a package manager to... manage packets.
With Package Control installed you hit Shift+Cmd+P, enter "Package Control" and Select "Install Package". This will present you a live-search like interface where you can look for the extentions.

Protostrap snippets

Sublime Text let's you define snippets that can be called with shortcuts. These snippets are small pieces of code that save you a lot of typing and reduce the number of errors you make.

There are quite a few snippets available and you can even make your own. The snippets come with every Protostrap installation, you just have to move them to the folder that Sublime scans for snippets.
  • Go to your Protostrap installation
  • Open the addons folder
  • Rename the sublime folder to Protostrap
  • Move the renamed folder into Sublime Text's data directory.
    The data directory is a platform-dependent location:
      - Windows: %APPDATA%\Sublime Text 3
      - OS X: ~/Library/Application Support/Sublime Text 3
You now have the snippets at your disposal:
Open any php file in sublime, enter testsnippet and hit the tab key.
You should now see this text:
«This is the test snippet. If you can see this it worked!»

  • Heads up!
    Make sure to check out or Cheatsheet for an easy start with snippets.

Key bindings for Protostrap snippets

To make things even faster we have a series of Key Bindings you can add to your Sublime configuration.
Add the Key Bindings:
  • Copy the following Binding Codes:
  • In the Sublime Text Main Menu go to Sublime Text > Preferences > Key Bindings
  • Paste the code in the file that opens and save the file.