Владислав Спиридонов

https://zeit.co/now
Now — это крайне простая система развёртывания кода, созданная Zeit.

Now — это лучшая из существующих в наши дни систем развёртывания проектов, если учитывать такие факторы, как простота, надёжность и функционал. Она отлично подходит для различных ситуаций и хорошо масштабируется при росте потребностей проекта. И, кстати, она бесплатна до тех пор, пока вам не нужны её возможности по масштабированию.

Есть возможность подключения репозитория с проектом на github

Суть в том, что при верстке в bootstrap по умолчанию в css свойствах прописано «box-sizing: border-box». Это свойство - «Применяется для изменения алгоритма расчета ширины и высоты элемента. Согласно спецификации CSS ширина блока складывается из ширины контента (width), значений отступов (margin), полей (padding) и границ (border). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.»

К примеру у нас есть блок с width: 600px, padding: 20px и еще (обводка) border: 2px в итоге ширина этого блока пересчитается и станет 644px, а со свойством box-sizing: border-box она останется 600px, но при этом внутренний контент будет подстраиваться с увеличением padding'a например.

Собственно в чем заключается решение? Учесть то что общий контейнер будет 1200px (1170px – контент + 15px отступы справа и слева.

Ответ кроется в подходе к работе, а не в функционале инструмента. Для начала спросите себя и заказчика, зачем второму нужен исходник в psd?
Обычно ответ будет таким - «Верстальщику нужен исходник, так как он пользуется Photoshop».
В этом случае вам стоит немного скорректировать свой дизайн процесс и рассмотреть такие инструменты как https://zeplin.io (сам использую) или https://avocode.com и др. Суть этих сервисов заключается в том, что вы загружаете туда свой исходник и передаете ссылку верстальщику / заказчику. Он может экспортировать оттуда картинки, текст, иконки, создаются автоматически код-сниппеты и стайл гайды. Это значительно ускоряет верстку и решает проблему с совместимостью исходников.

Как вариант PT Serif
Georgia

Не знаю насколько это вам поможет, но расскажу как делаю я.
Составляю гайдлайны для каждого нового проекта:

1. Сетка: 960 bootstrap (для стандартных проектов), либо составляю сам ориентируясь на объём контента modulargrid.org/#app, можно взять хорошие готовые сетки тут www.cssauthor.com/bootstrap-grid-system-psd-templates

2. Типографика: сразу даёт набор (h1, h2, h3, h4, параграф, список + размеры кегля, интерлиньяж и т.д. + набор стилей css, scss, less, styl, но это больше для верстки) www.gridlover.net/app/. (Также есть множество готовых пресетов в разных пропорциях. Ну и конечно всё можно настроить вручную)
Как более слабая альтернатива pearsonified.com/typography

3. Шрифты: https://www.google.com/fonts/ + www.fontsquirrel.com + подбор шрифтовых сочетаний: www.typegenius.com, goo.gl/mp4IJD (подборка с designmodo.com/), ну и посерьёзней https://www.typewolf.com/

4. Цветовая палитра (если у клиента нет брендбука, что чаще бывает): www.materialpalette.com, www.colourlovers.com, https://color.adobe.com/ + color.romanuke.com (чаще им пользуюсь, выбираю ключевой цвет бренда и подбираю подходящую палитру ориентируясь на него)

5. Кнопки и ссылки: ну тут понятно, размеры кнопок, форма, состояния, размер текста, цвет ссылок и их стиль.

6. Иконки: если есть готовый прототип сайта, то можно сразу составить набор иконок www.flaticon.com, dribbble с пометкой free и т.д. и т.п.

Конечно всё зависит от проекта, иногда можно добавить ко всему этому ещё: набор функциональных блоков (которые постоянно повторяются), но зачастую достаточно и этого набора. Дальше из этого всего собирается макет.

В процессе дизайна:

1. Фотографии: thestocks.im, и отличный плагин для PS — uberstock

2. Паттерны: subtlepatterns.com

Ну собственно и всё.