It seems every week there is a new custom editor coming out. I have been a big proponent of Macaw, even with its faults. Pinegrow has been an editor that I have been delving into a great deal lately as well. Recently a new editor came that I went through and tested: Bootstrap Studio.

The basic gist of Boostrap Studio is that it’s a desktop application for creating websites using the bootstrap framework. That’s it. It can be installed on Windows 7 and up, Linux, and OSX 8 and up. What is really nice about it is that you buy it outright, no monthly payments, usage fees or premium upcharges. Buy it, own it, use it as you see fit.

Bootstrap Studio is built for folks who really, really enjoy using Bootstrap and all of its components. I’ll repeat that; it’s for Bootstrap, only. No Foundation by ZURB, no Skeleton CSS, no Pure CSS. Is this a limiting factor? Of course, but you will want to take into consideration that there are plenty of folks who can work with Bootstratp and create amazing results. So as a tool, it’s incredibly focused.

From an interface standpoint, it uses a very familiar user interface that we know and understand with Adobe products, albeit more flat. Looking at the interface for the web browser demo version, let’s at how the editor is setup.

Bootstrap Studio Setup1

1) Your top menu. In order you have New Project which will give you a few prebuilt page options or a blank page. Open is standard, so is Save. Save literally just saves your project. It doesn’t create a repository of your fonts, css, and images. That happens on Export. Theme is an interesting button. This will let you pick a variety of Bootstrap template themes. Handy for inspiration, but sort of a cheap fix. Then there are buttons for Undo and Redo. This is a pretty minimal menu for sure, but it’s extremely easy to understand.

2) The stage. Here is your stage in which you can start to drag and drop elements from the components panel and begin to visually style them. As someone who uses Macaw and Pinegrow, this stage is instantly recognizable. Unfortunately, it comes with a lot of trepidation as well; nesting elements into weird arrangements and getting lost in your own design can be troublesome at best and a nightmare when passing off code to a developer for further work.

3) The Component Panel: Here is where you drag and drop prebuilt elements to the stage. The elements are broken up into logical organizations (Text, Image, Controls, Grid, Containers, Page, Pagination, Table, Form and Misc). As you drag and drop your elements to the page, you can begin to move them around and arrange them logically, which will be reflected in the Overview Panel. The Components elements in this panel are where you will begin to see the page design take shape on the stage.

4) The Overview Panel shows you how your components are organized and nested on the stage. This panel will correlate to your HTML and Active CSS panel.

5) The HTML and Active CSS panel is be default hidden and for good reason; when it’s open it’s hard to see the stage as the panel is a double pane panel that shows you the HTML on the left and CSS on the right, effectively reducing the height of the screen. By clicking on HTML or Active CSS will open the window, and you will have to drag the panel closed to view the whole stage.

6) The Assets panel shows you a library of what images and fonts you are using for your project. You can import images into the assets panel and upon export, you will get an assets folder with nested folders such as CSS, Images, and Fonts.

7) Options let you edit a selected component on the page instead of having to run the code right first.

8) Here we have the various screen with options that you can test your design against. Simply click on the different screen width to work with reflowing your project to the correct layout.

9) Lastly, we have Preview and Export. Preview does exactly that, preview your design live in the browser. The Export function takes all of your assets and files and creates a folder on your desktop of your entire project.

What do I like about Bootstrap Studio

Admittedly, I have used Foundation more than I have used Bootstrap, but I found the experience of creating a mock ups and production code extremely easy and intuitive. I stated before, this is a dedicated tool, therefore it lacks the bloat that many programs have. From a design standpoint, the UI made sense and the experience of using the application was mostly positive. I was able to create a basic landing page with a form inside three minutes. Exporting these files and then extending the function using Javascript and tying this into a .NET environment is pretty easy if you know what exactly you are doing. It’s not a stretch of the imagination to build web page templates for WordPress and export them out and begin to hack in the WordPress Loop. Again, if you are a front end Bootstrap fan, this a solid tool to use. Being that it’s anywhere from $25 – $50 depending on sales, that’s an easy entry into an application that will let you install on three machines with no questions asked.

What I don’t like about Bootstrap Studio

Alas, I am not solely reliant on Bootstrap for all of my needs. Like Macaw, it will only get you so far. The biggest fault I see with Bootstrap Studio is not being able to add Javascript libraries natively and writing my features. I would achieve this by exporting the site and taking it into a code editor like Atom or Brackets and beginning tweaking the items I need to make more interactive. One of the other big things that Bootstrap Studio doesn’t allow you to minify your CSS, and forget touching the LESS files. Like Macaw, this program has a lot of potential, but at this point, I wouldn’t recommend using it in a production setting or even in a learning environment. The best bet would be to stick with a code editor of your choice and go from there with your projects. In the future, they may have fixed more of the bugs and over the clunkiness but for now, it’s a bit dead in the water. But tell me what you think. Try out the demo editor or purchase it yourself and tell me what you think about it.