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.

About 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...

Full Bio

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 production environment on a daily basis.