DivShot: Creating a website using Twitter Boostrap

Browser Based WYSIWYG
With DivShot, the ability to see code changes on the fly is a huge time saver. I have used Firebug to try out CSS and HTML style changes with limited HTML DOM manipulation. JSFiddle is another website that I use to develop user interfaces. Both tools do not match DivShot’s level of abstraction from the interface’s source code. As the end goal is to create user interfaces faster, I would like to express my experience with DivShot in regards to other development methods, especially that of JSFiddle.

DivShot
DivShot is amazing as it pushes HTML5 to its limits with is drag and drop interface and its ability to update the HTML and CSS on the fly. Creating interfaces using WYSIWYG has always had connotation that the resulting code will be spaghetti code. Microsoft Frontpage is a prime example of this negative vibe. But somehow DivShot creates well indented clean code even when using the drag and drop capability.

Used the Drag and drop functionality to add a search form

Even if the resulting code is clean, the drag and drop functionality was not as precise as I had expected. Moving elements up and down the page smoothly was difficult. It seemed like there was a correlation between the HTML elements height and the amount of difficulty in moving the element. As such, I began to increasingly manipulate the HTML code rather than use the WYSIWYG feature. On the other hand, JSFiddle is pure programming, no interactive HTML manipulation.

Another feature I had a problem with is the code preview. It felt cumbersome to be run inside a popup window. But I am probably spoiled because JSFiddle will run any code changes in the same window once the run button is pressed.

DivShot code preview in a popup window

JSFiddle code preview in an iFrame

Bootstrap
This is my first time using Twitter Bootstrap to style an interface. I am impressed by how quickly I can create a clean layout.

CSS Class Convention Inconsistencies
It may be due to my lack of knowledge of the framework, but the CSS class names seem to be inconsistent especially for those class names with dashes. For example, hero-unit is inconsistent with other classes such as dropdown-menu. Where dropdown-menu assumes that there is a parent element called dropdown, hero-unit does not have a class name hero. If we follow the dash convention, then the row and span class names are also in violation.

On a side note, I wonder how much style is Bootstrap specific, since Bootatrap uses Normalize.CSS as its foundation. hm…

Less Bootstrap, more LESS!
I believe the Please stop embedding Bootstrap classes in your HTML! post sums up my frustration with CSS frameworks to the tee, albeit more eloquently. With my previous web development experience, I would create one class just to add one style. At first this allow me to quickly create a good, standardized user interface, but it became more unmanageable and verbose as I had to create a new class for every different style such as the problem shown in the blog. Compiled CSS is the future where beforehand or on the fly.

<a href="#" class="btn danger large">Click me!</a>

After Thoughts
I feel that DivShot has an opportunity to become successful as long as some usability issues are resolved. E ven if DivShot is not for me, I have already recommended DivShot to a coworker who does have much programming experience. For now, I will be sticking with JSFiddle to develop BootStrap based user interface by forking the BootStrap skeleton fiddle.

Thankfully the Play framework has LESS. It is the perfect time for me to dive into LESS as I have been eyeing the LESS framework for a while now (Sorry SASS).