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.
- 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:
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 on the right:
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.
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.
- 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.
- 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.
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 PackagesThere are a few Packages that we strongly recommend you to use in order to write code quickly and with as few errors as possible.
Emmet's superpower is in expanding abbreviations of HTML/CSS terms.
For example the abbreviation
div.pageexpands to this
on hitting the tab key:
- 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 snippetsSublime 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
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!»
Make sure to check out or Cheatsheet for an easy start with snippets.
Key bindings for Protostrap snippetsTo 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.