Скоростная верстка

#html #вёрстка #css

Вопрос в следующем: хочется научиться верстать быстро. Реально быстро, при этом,
не "нарабатывая опыт годами". Что я имею в виду?
Например, есть стандартный шаблон для трехколоночного сайта. 

ШАПКА
ЛЕВАЯ_СТОРОНА
ПРАВАЯ_СТОРОНА
ЦЕНТР
ПОДВАЛ

С этим шаблоном почти никто не спорит, почти все его используют. Вот хотелось бы
узнать таких шаблонов побольше. Лучше, в виде онлайн руководства с примерами (ведь
большинство дизайнов содержат общие элементы).
Что интересует в первую очередь.

Отцентрованное горизонтальное меню в резиновой верстке с переменной шириной кнопок
и выпадающими подменюшкми.
Без подменюшек легко: display: table-cell. 
Блок, отцентрированный по вертикали относительно пустой страницы. Точнее, почему
иногда он может не центроваться.
Затемнение от модального диалога.

По отдельности, эти примеры найти несложно. Хотелось бы все вместе (или ответа, что
всего вместе нет), притом, чтобы оно было "правильно" сверстано.    

Ответы

Ответ 1

http://csstemplater.com/ и, если не подошло, http://www.google.ru/search?q=html+generator.
Это первая часть вопроса.


Ответ 2

Emmet значительно повышает скорость вёрстки.


Ответ 3

Советую поискать по фразе css framework. Скорее всего то, что нужно.


Ответ 4

ну вам значит повезло с одинаковыми по структуре макетами, лично у меня в работе
структура постоянно меняется, и стандартных шаблонов я уже почти не вижу, везде куча
динамики скриптов, нестандартные расположения, и уже наверно за последний год я не
видел ни одного стандартного шаблона, никто не хочет быть как все, всем нужна оригинальность.
Так что отвечая на ваш вопрос могу сказать что быстро научится верстать не получится.


Ответ 5

"Архитектура" сайта, как и паттерны проектирования всегда зависит от потребностей.
Например, сайт-визитка или сайт-"ларёк" не нуждаются в шаблонах вообще, так как парочка
фоток и несколько абзацев текста не нуждаются в сложной структуре, да и структуре вообще...


Ответ 6

Использование flexbox вместо хаков float, clear и т.д.
Методология BEM сильно повышает создание (за счёт простоты) и дальнейшее сопровождение.


Ответ 7

Единственное, что реально повышает скорость разработки, так это использование продвинутой
IDE и препроцессоров. Для HTML - это Pug (бывший Jade), А для CSS - Stylus.

Препроцессоры мало того, что сокращают написание кода, так еще и улучшают его восприятие.
Да и запутаться с написание закрывающих конструкций в Pug и Stylus тяжело - ведь их
там попросту нет. Ну и "прорекламирую" свою разработку, в которой настроены по-умолчанию
компиляции препроцессоров, генерации шрифтов и оптимизация графики.