How to make CSS/HTML prototyping faster for engineers without strong CSS skills?

I've been developing Ruby on Rails applications for some time, and have often found help to develop generate the templates of HTML with accompanying CSS. However, I'd like to make an attempt at doing this myself.

Initial experiments leave me feeling like my process is really slow. I'm writing all my Rails code in VIM, which, with accompanying aliases to run the test suite, is pretty fast for me. However, the back-and-forth between browser/VIM to see new changes seems cumbersome - I'm guessing finding an editor with an embedded browser that constantly sees new changes is ideal for this (any suggestions?)

So far I've experimented with Blueprint, which at the onset seems like it will save me a ton of time. However, what other tools have helped you do the P开发者_JS百科SD->HTML/CSS conversion as fast as you can?

---

Have you tried using http://jsfiddle.net/ ? It has changed my world.

---

As a front-end developer, unfortunately it can seem time-consuming. You'll develop some tricks and shortcuts and such. I've started adapting the 960.gs grid system for layouts, as it allows me to make layouts much quicker. Actually, I USED to do that - now I literally have a template for a specific layout built out that I just copy and paste. I recommend you spend half a day and get the barebones for a typical web app/site that you may use frequently.

Using some CSS3 instead of images helps, as well initially. I would do that, then fall back to support older browsers using modernizronce you've gotten it working with "good browsers".

Hope that helps! If you want any of the resources I have or have any specific questions, feel free to email me... [firstname] @ [wholename] .com.

Connor

---

CSS is tiring afai-knew-it. But using the powers of vim, everything is sailing much better for me.

Maybe my snipmate css snippets can help you. I've been continually improving this one to make things much easier and faster.

Examples:

b[press Tab key] /* means border */
/* will produce */
border: 1px solid #999;

bra[press Tab key] /* means border-radius */
/* will produce */
-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;

=ir /* means Image Replacement */
/* will let you choose from 6 IR methods */
/* Below is one method, namely Leahy/Langridge Method */
#image {height: 0 !important; overflow: hidden; padding-top: 0px; width: 0px; background: url() no-repeat}

=reset /* means Reset.css */
/* will produce the latest reset.css (taken from http://html5boilerplate.com/) */

Hope this helps. Cheers!

---

Nowadays the prototyping can be much faster than it done in past. Just using Twitter bootstrap, Foundation 5 make it pretty faster for people to struggle less to make effective UI.