Divshot simplifies building web interfaces with Bootstrap

Web-based Divshot provides a visual environment for assembling Bootstrap-based applications.

I am a big fan of Bootstrap, because it offers an excellent framework for building powerful and responsive web applications. Bootstrap is relatively straightforward, though there is a learning curve, and it requires digging into the details of the code during design. This is where tools like Divshot enter the picture.

Seeing is believing

Divshot provides a visual, drag-and-drop interface for building web applications using Bootstrap. Figure A shows the basic Divshot interface for working with individual web pages. It has a large area for page layout, with a sidebar containing Bootstrap components along with tools and other options. The left portion of the screen shows project components: files, images, etc. Figure A shows a sample page with one component added: the Hero Unit with the TechRepublic.com text and button. The Divshot interface provides a split screen view with the visual design at the top and the code at the bottom, so you can edit the design in either area of the interface.

Figure A


Designing a web page with the basic Divshot interface.

Once you add Bootstrap elements and want to see the results, the Run Previous icon (it looks like a play button and is just below the Revert button) allows you to preview the current work. In addition, the icon to the right of the Run Previous icon allows you to show/hide the code pane (the icon looks like less than and greater than symbols). The two diagonal arrows allow you to choose the preview platform (Figure B); you can preview the design on various screen sizes including phone, tablet, and desktop. One useful feature that deserves mention is the Revert button at the top of the page; it allows you to revert to previously saved versions of the page.

Figure B


Divshot provides options for previous designs in various platforms.

When designing a page within the Divshot interface, the Inspector area of the screen (top right) provides granular control of specific design elements. Once an element is selected, the associated options will appear within the Inspector area. For example, Figure C shows a button selected with available options displayed -- among other things, you can change the style, size, width, and CSS behavior. Options like style, size, float, and visibility provide selections via dropdown menu, and all changes are immediately presented in the page layout so it is simple to test various settings.

Figure C


Inspector options depend on the element selected within the page.

The Components section of the Divshot interface (lower right) provides more than what is shown in Figure A. The dropdown field just below the components area allows you to choose what type of Bootstrap elements appear -- Figure D shows it expanded. It categorizes the elements as Forms, Layout, Media, Miscellaneous, Navigation, and Typography, and you can always choose Entire Library to see everything.

Figure D


Divshot categorizes components to make them easier to find.

You can add more web pages to the application as well as other file types. Divshot supports JavaScript, CoffeeScript, CSS, LESS, and more. In addition, you can upload other files to a project, and you can export your project as a compressed file.

Where do you sign?

Divshot is free for one developer working on one project, which is what I have used for the screen shots in this article. They offer other packages for those working on multiple projects, as well as organizations or teams collaborating on development efforts. Get details about Divshot's plans and pricing.

Great for quick mock-ups

I love Divshot for quickly mocking up designs for clients -- after all, nothing beats visual communication, and it is easy to share such designs with the client. Also, it is a great tool for assembling wireframes. Plus, since it is web-based, disparate teams can easily collaborate on a design.

While the interface is intuitive and easy to use, the online help is a good reference when there are issues. However, I admit that I revert to local development using my favorite tools when diving into the nitty gritty of building the application. Old habits are hard to break.

More options available

I prefer Divshot, though there are other options for creating and editing within the browser. Easel is a good example, but I don't think its interface is straightforward. Other options that I haven't explored as much are Pingendo, which is a tool installed locally, and Jetstrap.

I am sure there will be even more options as the Bootstrap following continues to grow.

By Tony Patton

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...