Divshot: An Awesome Way to Design and Build Bootstrap Pages

by on 11th December 2012 with No Comments

screenshot

Recently, we took a close look at Easel, a web-based site builder that leverages Twitter Bootstrap. Today we’re following that up with a tour of a very similar tool: Divshot.

With Divshot, you can quickly and easily build clean, responsive web page layouts using a combination of visual tools and hand coding. It’s a really slick tool and I think you’re going to enjoy using it.

Meet DivShot

If you read our article on Easel, Divshot will seem super familiar. The concept here is exactly the same. You’re provided with a visual, drag and drop style interface that is built on top of Twitter’s wildly popular Bootstrap framework.

screenshot

As you can see, just like with Easel, we have a large canvas occupying most of the screen and a sidebar where all of the tools, UI elements and customization options reside. Everything you see here is super straightforward and quite easy to use. Let’s jump in and build a page.

Create a New Page

At the top of the interface, you’ll see a horizontal bar containing two controls: one to create folders and one to create files. First, create a new folder with drop down menu on the right, then a new page with the drop down menu on the right.

screenshot

Creating a new page brings up the screen shown below. Here you can choose from a few different starter layouts (a key feature missing in Easel), clone the current page or start from scratch.

screenshot

Let’s be adventurous and start a new blank page so that we can really get a feel for how it is to build something with this tool.

Add a Navigation Menu

Once you’ve started your new page, take a gander at the sidebar on the left and find the “Components” section. This is where you’ll find all of the Bootstrap UI pieces that you’re familiar with if you’ve ever used the framework.

Scroll through the various options until you find the Navigation Bar. Drag this out into the area with the dashed border (the Bootstrap page container).

screenshot

With that little bit of effort, we have ourselves a nice little pre-styled navigation menu at the top of our page. It comes with a space for a company name and two pages.

screenshot

Customizing this menu is easy. Double click on a piece of text to type in a replacement value and Option-drag a menu item to duplicate it. I changed the company name to “Design Shack” and copied out a few more menu items. Here’s the result:

screenshot

The Hero Unit

This is basically how the workflow goes. Now we’ll simply continue dragging and customizing elements from the sidebar. Next, let’s drag in a “Hero Unit.”

screenshot

Once again, customization is super easy. All I did was double click on the text and type in something new. Now we have a nice looking header for our page.

screenshot

Layout

Now let’s engage in a little more of a freeform layout exercise. I want to create three columns of content. To do this, I drag out a “Layout” module and this is what I get:

screenshot

As you can see, by default, this is split into two columns. If I check out the Inspector in the sidebar, I can customize this either by typing numbers in manually or by clicking one of the pre-fab layouts.

screenshot

I clicked the three column layout and checked the “Fluid Columns” box. Now my layout module looks more like what I want and is ready to receive some content.

screenshot

Core Content

Now that we have these nifty layout boxes that define where our content will go, we need only drag out some items into them. I tossed in a heading, paragraph and image into each, tweaking the available customization options as I went.

screenshot

Custom CSS

My favorite feature in Divshot is the ability to add in your own custom code. This is absolutely key if you’re going to get any real developers to even consider using some sort of WYSIQYG. If I can’t customize something that I don’t like, I’m simply not going to use your app.

One thing that I don’t like in my layout currently is the lack of space between those placeholder images and the paragraphs below them. This is easy to fix though. First, I’ll add a class to each of the boxes using the “Structure” options.

screenshot

Now if I hit the “Edit CSS” button in the bottom left, a bar will pop up from the bottom of the screen and allow me to add some custom CSS. I especially like that I can use preprocessors here. Everything is compiled live, complete with error reporting. Awesome!

screenshot

With this code, my navigation bar and my images now have a little room to breathe. Much better! If you need it, there’s also a module to add in custom HTML, so you really do have complete freedom to do what you want.

screenshot

More Tools

Near the top right of the screen, you have a few different tools that are worth mentioning. There’s a standard Undo/Redo, a code download, a live preview and a button to change your viewport

screenshot

Remember, this is all built on top of Boostrap, which means that your designs should be fully responsive. This is an amazing bonus that shouldn’t be glossed over. This is one of the easiest ways that I know of to build yourself a nice looking responsive websites. There’s even a menu that allows you to set whether an item is hidden or visible in a given viewport size.

Easel or Divshot? Which Is Better?

So now I’ve tried and reviewed two of these tools. The question is, which should you turn to if you’re looking to build a Bootstrap site? To be honest, there’s no clear cut winner overall. If we look at individual features though, I do have strong opinions about which is better.

Workflow & Layout: Divshot

In general, I found the workflow and layout process to be much better in Divshot than Easel. The Easel workflow was clunky and I made several suggestions for improving it in my review. Interestingly enough, when I tried Divshot, I found that it very closely matched what I imagined Easel should be like.

I loved the column layout module and how easy it was to tweak to suit my own needs. Easel has something similar, but it’s not as smooth or intuitive.

Type and Icons: Easel

This is one place where Easel is the clear winner. It has full Google Web Fonts support and allows you much greater customization over your type. In fact, even without the custom fonts, the type tools were far better in Easel.

screenshot

In addition, Easel also has integration with FontAwesome so you have access to tons of great icons that you can quickly toss into your work.

screenshot

One cool thing that Divshot does have though is a theme switcher, which allows you to change the overall look of the entire theme with a few clicks. There are currently thirteen themes and a “Custom” option.

screenshot

Code Export: Easel

Both apps have a code export feature, but the one for Easel was much more robust and impressive, allowing you to see all the various elements and download a .zip containing everything.

screenshot

Customization: Divshot

This is literally the most important feature to me as a user and I’m giving this one to Divshot. The custom code tweaking features here are really nice, especially the CSS module. I really felt like I could do just about whatever I wanted and I really appreciated that freedom.

Placeholder Images: Divshot

The placeholder image system was one of my biggest complaints about Easel. Their placeholder images seemed super buggy and difficult to work with. By comparison, Divshot’s are really straightforward and easy to use.

Pricing: ?

Divshot is currently in free public beta, so it’s impossible to tell how the two will compare in price until Divshot releases its pricing plans. They’ll have a lot to live up to because I really like the Easel pricing structure. It’s not super cheap but you do get quite a bit on the free plan:

screenshot

Divshot Complaints & Feedback

I thoroughly enjoyed using Divshot and think that it’s one of the best rapid prototyping tools that I’ve come across. Bootstrap lends itself so well to this type of app and I’m thrilled to see developers working hard to create tools that make using Bootstrap even easier. That being said, there are definitely some areas that need improvement.

Type Sucks

First, typography customization. Once again, Divshot needs to take a page out of Easel’s book on this one. Their text tools are much more intuitive and powerful.

Better Box Model Tweaking

I think that it’s currently too much work to tweak the spacing of various objects. It’s nice that I have the option to write my own CSS, but for something as simple as padding and margin, I should be able to enter the numbers into a field near where I insert the dimensions.

CSS Download

Currently, the code export feature only gives you the HTML. I definitely need to see an option to package everything together in a download like we saw with Easel.

Buggy Preview

I’m not sure why, but it seemed like my live preview was consistently one change behind, so it almost never reflected the actual current state of my document. This was quite annoying!

Give Me Some Room!

I found it very difficult to add items to the bottom of my layout if it stretched below the bounds of the viewport. Give me a little extra room down there to work with, even if it’s not in the actual output.

What Do You Think?

Divshot is a stellar app and I definitely think that you should give it a shot, especially if you’re a fan of Boostrap, Foundation and other similar all inclusive frameworks.

Now that you’ve seen what Divshot is all about, leave a comment and let me know what you think. Would you use this over Easel? Why or why not? What other similar tools have you come across and how do they compare?

Comments & Discussion

No discussion just yet... Get things started!

Leave a Comment

Subscribe
Membership
About the Author