Как ускорить создание прототипов CSS / HTML для инженеров без сильных навыков CSS?

Question

Я уже некоторое время занимаюсь разработкой приложений на Ruby on Rails и часто находил помощь в разработке шаблонов HTML с сопровождающим CSS.Тем не менее, я хотел бы попытаться сделать это сам.

Первые эксперименты заставляют меня чувствовать, что мой процесс действительно медленный .Я пишу весь свой Rails-код в VIM, который, с сопровождающими псевдонимами для запуска набора тестов, довольно быстр для меня.Тем не менее, переход между браузером и VIM, чтобы увидеть новые изменения, кажется громоздким - я предполагаю, что поиск редактора со встроенным браузером, который постоянно видит новые изменения, идеален для этого (какие-либо предложения?)

До сих пор я экспериментировал с Blueprint, который в начале кажется, что это сэкономит мне кучу времени.Однако, какие еще инструменты помогли вам конвертировать PSD-> HTML / CSS так быстро, как вы можете?

Answer 1

Вы пробовали использовать http://jsfiddle.net/? Это изменило мой мир.

Answer 2

В настоящее время прототипирование может быть намного быстрее, чем в прошлом.Используя загрузчик Twitter, Foundation 5 позволяет людям быстрее бороться за создание эффективного пользовательского интерфейса.

Answer 3

CSS утомляет afai-know-it.Но используя силу vim, все идет намного лучше для меня.

Может быть, мои фрагменты css snipmate могут вам помочь.Я постоянно улучшал этот, чтобы сделать вещи намного проще и быстрее.

Примеры:

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/) */

Надеюсь, это поможет.Ура!

Answer 4

Как разработчик внешнего интерфейса, к сожалению, это может занять много времени.Вы разработаете некоторые трюки и ярлыки и тому подобное.Я начал адаптировать сеточную систему 960.gs для макетов, поскольку она позволяет мне создавать макеты намного быстрее.На самом деле, я использовал для этого - теперь у меня буквально есть шаблон для определенной компоновки, который я просто копирую и вставляю.Я рекомендую вам потратить полдня и получить все необходимое для типичного веб-приложения / сайта, которым вы можете часто пользоваться.

Использование CSS3 вместо изображений также помогает на начальном этапе.Я хотел бы сделать это, а затем вернуться к поддержке старых браузеров, использующих modernizr , как только вы настроите его на работу с «хорошими браузерами».

Надеюсь, это поможет!Если вам нужны какие-либо ресурсы, которые у меня есть, или у вас есть какие-либо конкретные вопросы, не стесняйтесь, напишите мне ... [имя] @ [wholename] .com.

Коннор