Какие инструменты вы используете при создании разметки из макетов?

Question

Поэтому я стараюсь проводить большую часть времени на стороне сервера приложений, но время от времени мне нужно пачкать руки и генерировать разметку /css/js из каркаса или макета. Что касается инструментов, я нашел полезными браузерные снимки и приложение Litmus, и, конечно же, виртуальные машины также для проверки вживую в ie-{6,7,8}. В противном случае я делаю тяжелую работу в VIM.

Для создания новой разметки, которая не привязана к целевому дизайну, я думаю, что некоторые из фреймворков и инструментов css, такие как sass, выглядят полезными, но я скептически отношусь к их полезности при необходимости генерировать разметку в соответствии с дизайном фотошопа.

Итак, какие советы / инструменты вы держите в своем поясе, генерирующем разметку, когда создаете надежную разметку из дизайнов?

Мой список пока:

• Browsershots
• Browserlab.adobe.com
• Haml / Less / Sass (не используется, но, вероятно, будет исследовать)

Answer 1

• TextMate/Firebug/MAMP Pro - мой общий инструментарий
• CSS сбрасывает (Эрик Мейер и Aardvark.legs мои любимые)
• xScope
• ВМ в различных комбинациях для поддержки браузеров класса А
• Smush.it и YSlow в целом
• Концепции ОО CSS

Поскольку мне все еще может понадобиться использовать случайный CSS-хак, я обычно собираю свой CSS-код за несколько проходов. Сначала цвета, затем типографика, затем макет. Проверка всего (в частности IE6) после каждого прохода. Лучше пресечь проблемы в зародыше, чем пытаться проследить все позже!

Хотя это не обязательно связано с разметкой, jQuery и TYPOlight - бесценная экономия времени. Я больше никогда не размещаю сайт без CMS. Дополнительный день для настройки рабочего сайта в TYPOlight и обучения клиента экономит дни головных болей обновления в долгосрочной перспективе.

Answer 2

Я использую 960 Grid System (с сбросом Мейера и сбросом текста). Я разрабатываю свои макеты в фотошопе таким образом, чтобы я мог использовать 960 Grid System. Это не требует квадратного расположения, но требует мысли и порядка, а не произвольных расстояний между графическими элементами и т. Д.

Мой код всегда написан от руки; Я не верю программному обеспечению, чтобы думать за меня. Таким образом, я полностью контролирую происходящее. Я никогда не использую взломы только для IE. Если я не могу сделать то, что я хочу, одним способом, я буду искать другой. Хаки придают форму нестабильности дизайну / макету / функциональности, и я не большой поклонник этого.

Я запускаю все современные браузеры вместе с IETester для тестирования IE6, но я уверен, что довольно скоро откажусь от поддержки IE6. Вы можете решить столько проблем, связанных с PNG, сколько вам захочется, чтобы вы ударили монитор о стену.

И мой инструмент номер один, Stackru. Без чудесных умов и альтруистических личностей я остался бы один на один с каждой проблемой, с которой столкнулся. Это удручающая идея.