smidl
@smidl
WordPress-разработчик

Как вы верстаете макет пошагово? Что за чем следует при верстке?

Всегда интересовало как верстают другие мастера? Какие шаги проделываете и в каком порядке?

1) Нарезаете всю графику сразу или постепенно?
2) HTMLкод сначала или css?) Весь HTML или только нужного блока и так постепенно опускаясь вниз?

Прошу описать процесс работы, хочу почерпнуть правильных практик. Спасибо
  • Вопрос задан
  • 531 просмотр
Решения вопроса 5
LucasKane
@LucasKane
Front-end Developer
1) Анализ макета - смотрю что есть в макете, представляю как буду верстать тот или иной элемент или блок, условно разбиваю макет на секции и блоки, записываю все на листочек.
2) Создаю под каждую секцию и блок свой scss файлик, настраиваю шрифты и размеры, отступы заголовков, все основные цвета сайта выношу в переменные за исключением белого, черного.
3) Нарезаю графику в ФШ по возможности все что могу, если что то пропущено дорезаю в процессе.
4) Дальше в отдельных html страничках верстаю секции и блоки входящие в них (сверху-вниз) + адаптивность элементов.
5) Построение общей сетки страницы и ее сборка из секций.

Использую для сборки проекта Gulp+Bower.
Ответ написан
SPAHI4
@SPAHI4
реактовцы - это не девы, а прокидыватели пропсов
1. Использую Brackets, который графику нарезает сам. И вообще, с ним верстать макеты одно удовольствие
2. Сначала html нужного блока
Ответ написан
@Artcl
Не скажу, что мастер, но делаю так:
  • Голый HTML, то есть каркас
  • Cетка
  • Далее сверху вниз всё остальное, по мере нужды нарезаю графику

Ну и желательно руководствоваться практикой mobile first
Ответ написан
Rou1997
@Rou1997
1. Постепенно.
2. Конечно, только нужного блока.
Ответ написан
Комментировать
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Для разных макетов бывает по разному.

В основном так:
1. Каркас из основных html блоков
2. Нарезаю картинки (стараюсь сразу все, в сложных макетах по частям)
3. Пипеткой основные цвета записываю в переменные.
4. Доверстываю статику подробненько все сверху вниз. Иногда бывает, что в странном порядке, если есть какие-то сложные или интересные блоки.
5. Прикручиваю слайдеры, модалки и т.д.

Два монитора существенно увеличили скорость и удобство п.1., теперь каркас выходит более подробный. На простых макетах получается написать весь или практически весь HTML, а потом уже "раскраску" CSS'ом.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы