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.
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
What I don’t like about Bootstrap Studio