Jetstrap, Ultimate bootstrap interface builder.
I am working on bootstrap for a long time. There is no need to tell how good bootstrap is. You might have seen many posts of mine praising bootstrap. It already gives you an amazing platform to kick-start with your web interface (or mock-up you can say). We don’t have to start from scratch anymore. Just download bootstrap and start developing layouts and mock-ups.
Now, how if I tell you, we can boost bootstrap development too. Yes, there is a service that provides a very impressive interface which helps us to build web designs, interfaces, layouts or mock-ups. Basically you have to drag and drop elements. I am talking about Jetstrap. It is a web tool developed by a small start-up Drifty.
Do you hate creating new account everywhere? Don’t worry, you don’t necessarily have to create a new account to use Jetstrap. You can log in using your Twitter, Google or Github account. If you don’t have either any of these (and I hope nobody counts in that case) you can create one dedicated account there. Registration takes less than one minute. You just have to tell your name, email address and password. That’s it!
When you log in to Jetstrap, it will redirect you to ‘Your Projects’ page. You will see all your existing projects and a big plus button to add a new project. I am very impressed with simplicity of the user interface. Nothing complex, nothing fancy. Only useful stuff.
Development workspace is divided in to five panels.
Like the layers panel we have in Photoshop or any similar panels, Screens shows how many HTML pages you have in selected project.
Workspace is where you drop elements, customize them and see live preview. Just like workspace in designing applications.
This panel displays all the bootstrap components. You just have to drop them in workspace. That’s it, no coding nothing.
When you click an element in workspace, container will allow you to set ID of the container, fluid behavior and alignment and various other settings for respective elements (such as progress bar, buttons, forms etc.)
When you click on Code link at the bottom of the workspace, code panel will popup. Here you will see all the code. Of course you can edit it and see live preview in workspace. I actually liked live preview feature. It comes very handy when you are editing something heavily.
- Clean and neat structure : When you use drag and drop to design your mock-up. Code is neatly formatted. Which makes it easy to read.
- Live Preview : When you are formatting the code manually, you will see changes being made in a workspace. You will always have your layout in front of you.
- Minimalist and smooth UI : Builder interface is very minimalist, easy to understand and pretty smooth. I have used web-based editors before but this one is smoothest and fastest of them all.
- Test it on different device emulators : You can test your page on Desktop, Laptop, Tablet and Mobile that too within workspace itself.
- Less learning curve : Learning curve is very little. You will get used to the user interface within 10-15 minutes only (Provided you are familiar with Bootstrap)
- Easy to download HTML and share the preview with friends
What is missing?
- Ability to change column grid size (span) : It will be better if Jetstrap offer facility to choose number of columns in one row (span). I had to do this manually using Code panel. It will be better if they provide this feature out of the box.
Jetstrap is free to try which includes one project, three screens (HTML pages) and HTML/JS/CSS editing and exporting.
Premium plan costs $8/month which includes 10 projects, unlimited screens. With enterprise plan you will be able to enjoy everything unlimited from premium plan. Moreover, you will get private hosting, API Developer access and better support.
Pricing is really good. If your projects are heavily dependent on bootstrap. Jetstrap will definitely save your time and efforts.
Official Website : Jetstrap