Как вы начинаете вёрстку сайта?

Сначала описываете полностью структуру сайта, а потом пишите CSS стили, или пишите стили постепенно, например написали разметку header'а - написали для него CSS, написали контентную часть - написали для него CSS и т.д.?
  • Вопрос задан
  • 46312 просмотров
Решения вопроса 1
dunmaksim
@dunmaksim
Быдлокодер
  1. Создаю каталог для проекта
  2. Инициализирую Bower
  3. Устанавливаю нужные пакеты, например, Twitter Bootstrap, Angular, jQuery и т.д.
  4. Ставлю Grunt, плагины для него и т.д.
  5. Запускаю EMACS и создаю index.html
  6. С помощью Emmet создаю шаблон, который уже начинаю заполнять.
  7. В каталоге src создаю папки less, js и т.д.
  8. Попутно пишу задачи для Grunt
  9. Если в выбранном фреймворке не хватает какого-либо класса для стилизации элемента, сначала описываю стили прямо в шаблоне, в свойстве style. Затем при необходимости выношу их оттуда в LESS в виде одного или нескольких классов.
  10. ??????????
  11. PROFIT!!!
Ответ написан
Пригласить эксперта
Ответы на вопрос 29
torrie
@torrie
Всё знаю, всё умею
В первую очередь делаю сброс css-стилей.
Затем делаю вёрстку общих блоков - просто структура из div'ов с нужными ширинами, высотами согласно макету, залитых разными цветами. Стараюсь все div'ы(когда что-то в строчку) делать inline-block'ами. Получается цветная такая структура будущего сайта. Каркас готов.
NDrl9VkCyDvemP.jpg

Начинаю углубляться в каждый блок - располагать в нём нужные элементы. В зависимости от сложности их расположения делаю какие-то блоки position:relative, но чаще всего всё упирается просто в отступы.
Ответ написан
increment_of_panfil
@increment_of_panfil
Программист, разработчик, дизайнер
Создаю минимальную разметку с базовыми элементами и пишу для них CSS.
Потом добавляю в разметку остальные элементы и пишу CSS.
И так далее.
Ответ написан
Комментировать
Обычно все начинается с критики в адрес дизайнера...это единственное отличие моей методики от вышеуказанных способов)
Ответ написан
Комментировать
Ronnie_Gardocki
@Ronnie_Gardocki
Я у мамы фронтендщик.
1) Захожу сюда codepen.io
2) Жмякаю New Pen
3) Создается новый пен где уже все настроено под меня (SASS/отступы/лайвапдейт и так далее).
4) Верстаю
5) ...
6) PROFIT!
Если верстка многостраничная, то один пен делаю глобальным (SASS переменные/общий JS код) и линкую его в другие пены. + можно все это дело форкать до потери пульса, и показывать ссылки заказчику (ссылки все приватные, если имеется PRO аккаунт). Особенно удобно, когда имеется несколько вариантов анимации, то просто делаю 2-3 форка и даю ссылки, а человек наглядно сравнивает все.
Ответ написан
@cccr85
Мой первый ответ здесь, постараюсь помочь, имею опыт верстки около 5ти лет. Все что написали выше, интересно, и безусловно полезно. Я напишу о другом. О скорости. Я пришел к выводу, что чтобы ускорить верстку, нужно по возможности работать в одной программе, и постараться минимизировать переключение между ними. Работаю на двух мониторах, и все равно такой принцип значительно помогает ускорить процесс. Работаю так:

1. Открываю макет в PS, и нарезаю его, попутно думаю как и что я буду делать, как я назову элементы.
-- У меня есть макет и набор картинок --
2. Копирую весь текст из макета в текстовый файл, и в нем делаю html. Написал строку для zen, развернул, перенес текст из файла ниже. На втором мониторе открыт макет, туда я просто смотрю.
-- У меня есть макет, набор картинок и html --
3. Копирую весь html в css, и удаляя создаю болванку для стилей. Например у меня есть такой участок:

<ul class="b-pages">
    <li class="b-pages-item m-active"></li>
    <li class="b-pages-item"></li>
</ul>


и с этого html я делаю такую болванку:

.b-pages {  }
.b-pages-item {  }
.b-pages-item.m-active {  }
.b-pages-item:hover {  }


-- У меня есть макет, набор картинок, html и файл стилей с не заполненными правилами --

4. Этот шаг самый не оптимизированный, и занимает наибольшее время. На одном мониторе у меня открыт PS на втором браузер с консолью, мне приходится работать с двумя программами, с PS и браузером, я копирую стили из макета, и вставляю в css. Попутно поправляю отступы, размеры до PixelPerfect. + пишу js.

-- работа готова --

Буду надеяться, что мой опыт будет вам полезен.
Ответ написан
@altra
Сначала все на бумаге. Иногда с применением цветных карандашей для background'ов или border'ов.
А вообще, делаете сетку с минимальной ячейкой и от нее погнали. Идеально подойдет excel.
Ответ написан
RainMEN
@RainMEN
HTML/STYLUS/JADE/JS/Laravel/Joomla/DLE и т.д.
Верстаю не так давно, верстаю не так часто, но все же верстаю.

Раз все начали с нуля, а именно с PSD макета, тоже начну с этого момента.

1. Оцениваю макет, составляю для себя базовую разметку, определяюсь какие главные блоки присутствую, и что должно происходить если их нет.
2. Оценив какие блоки необходимы, и прикинув структуру сайта иду csstemplater.com/ генерирую по своей структуре HTML/CSS шаблон, если это конечно не LP
3. Создаю директорию c названием сайта в openserver, в ней создаю директорию HTML , а внутри по шаблону
  • psd- что бы не потерялись, мало ли когда нужно дорисовать что то.
  • css
  • js
  • less
  • fonts
  • img - для компонентов шаблона
  • image - для временного наполнения (слайдеры, изображения в статьях и т.п.)
  • shop/личный кабинет - иногда делю макет на интерфейсы, и раскидываю по папочкам для дельнейшей навигации

4. Закидываю скачанный шаблон по папкам, вырезаю оттуда reset-ы, так как уже имеется отредактированный и перенесенный в less
5. Создаю main_site.less - подключаю сюда все все нужные мне less файлы, template.less- прописываю сюда все структурные элементы (header, footer и т.д.), ui.less - обычно если проект не сложный сую сюда все оформление, иногда разделяю все на отдельные блоки, menu/portfolio/modal/btn/ и т.д.
6. Настраиваю компилятор Less в PHP шторме для текущего проекта, что бы компилировался только файл main_site.less в папку css
7. В основном использую getuikit.com, ну больше он мне по душе чем бутстрап, скачиваю и раскидываю файлы по папкам, правлю пути в index.html, попутно добавляю комментарии
8. Открываю и смотрю PSD шаблон сайта на наличии не стандартных шрифтов, если шрифты есть в www.google.com/fonts, то подключаю их, иначе www.fontsquirrel.com, и раскидываю файлики по папкам
9. Дальше используя Emmet создаю базовую разметку если это LP(header/footer/slider и т.д.), если нет, то начинаю с самого верха делать разметку элементов (logo/slogan/phone/login-widjets и т.д.) попутно добавляю less код в нужные из файлов.
10. Верстаю до конца все, что есть в макетах. Затем по необходимости создаю шаблон для CMS.

ЗЫ: Файлики что сделал не минимизирую, только по желанию заказчика, ибо все нормальные фремворки и CMS умеют объединять css и js файлы в 1, попутно минимизируя на лету. Заказчику отдаю все что сделал включая исходники.
Ответ написан
Комментировать
denegny
@denegny
с чашечки кофе), идея должна торкнуть
Ответ написан
Комментировать
@AndreyMyagkov
Для несложных классических сайтов:

1. Создаю HTML - каркас сайта (шапка, сайдбары, подвал итд)
2. Прорабатываю шапку и подвал. Режу картинки для шапки и подвала. На этом этапе HTML шапки и подвала готовы.
3. Быстренько выдираю названия стилей из HTML (использую сервисы типа bearcss.com , html2css итп)
4. Начинаю CSS: сброс стилей + из пункта 3
5. Быстренько выдираю CSS для шапки и подвала из PSD (использую плагин CSSHAT), остальное ручками
6. Шапка и подвал готовы! На этом этапе посути готов каркас как для главной, так и для внутренних страниц, причем очень быстро и уже можно что то показать!
7. Прорабатываю контентную часть поблочно (выполняю пункты 1-5 для каждого блочка)
8. Все иконки, декор запихиваю в спрайт, фотки и большие изображения можно прогнать через сервисы сжатия типа tinypng tinyjpg
9. Проверяю готовый макет на pixelperfect, в разных браузерх, вношу правки
10. PROFIT!
Ответ написан
Комментировать
Igor-Maf
@Igor-Maf
Senior Front End developer
1. Настраиваю gulp на основные таски (конкатенация, минимизация, удаление неиспользуемого, кросс-браузерность, sass и т.д.)
2. Подключаю через bower необходимые "модули", например, normalize.css или фрэймворк
3. Выстраиваю архитектуру кода (просто независимые блоки в отдельную директорию, например, "modules", или "pages" для стилей особенностей отдельных страниц), в корне css главный файл стилей, в котором осуществляется импорт всех модулей (например, файл с переменными цветовой палитры или файл с mixin-ами).
4. Подключаю необходимые шрифты, в основном, через специальный миксин.
5. В главном файле стилей описываю основные стили для типографики, в общем всё, что связано с селекторами типа.
6. Если дизайнер предоставляет styleguide, то начинаю верстать страницу именно с него, а именно, по независимым блокам (где это возможно, от меньшего к большему) используя БЭМ методологию.
7. По ходу дописываю задачи для менеджера задач, например, для скриптов или картинок, собираю необходимый package.json, bower.json.
8. Собственно этап по-блочной верстки.
9. Собираю конструктор из готовых блоков и элементов соответственно макету.
10. Проверяю кроссбраузерность, pixel perfect.
11. Этап исправления деталей

Исходя из формулировки вопроса ответ:
поэтапно, сначала описываю структуру одного блока, пишу ему стили, перехожу к следующему.
Ответ написан
Комментировать
darkrain
@darkrain
У меня есть уже своя html+css заготовка.

1) Копирую заготовку в новый проект
2) Долго и нудно пишу html, ненавижу когда много мелких элементов на макете
3) Режу картинки, спрайты
4) пишу css, попутно иногда правлю html

Но у меня уже опыта много, лет 9 уже как. Поэтому я заранее знаю что где и как будет, не гадаю, этот опыт позволяет мне не писать css вместе с html. Получается очень быстро. И я использую всякие бутстрапы только по требованию. Считаю излишними во многих случаях.
Ответ написан
@dimash07
Просто устанавливаю будущий дизайн (черно-белый) на фон сайта(background: url('###') center top). Вписываю все нужные html теги. Добавляю классы CSS. Открываю эту странцу в Google Chrome где установлен плагин DevTools Autosave. И тупо верстаю прямо в браузере. Очень легко и быстро!
Ответ написан
Для чего юзать bower и тп. Главное либу установить ленятся, а bower ставить не ленятся, jQuery и прочие либы лучше ставить с яши или гугла. Использовать среду типа NetBeans, WebStorm, Eclipse и тп. Каким то хламом типа "первого ответа" проекты засорять жесть. Twitter Bootstrap можно использовать как пример для реализации, а не лепить на нем основу)

Есть БЭМ отлично сохраняет проект на годы, двигло можно не использовать, сама идея годится чтобы не делать из проекта помойку.
Ответ написан
Комментировать
serjikz
@serjikz
web-developer
Верстаю часто, верстаю много (дизайнерю тоже, но чуть меньше). 7 лет занимаюсь этим. Работал и с table-вёрсткой, и все косяки float, inline-block и тп уже давно знал, хотя и не считал это всё косяками, а воспринимал как должное. Надеюсь, кому-то помогу своим опытом (не только техническая сторона)

1. Необходимо чётко узнать требования по проекту (будет ли он адаптивным, подразумеваются ли на нём какие-либо динамические блоки и тд и тп)
2. Если проект - ленд на 12 экранов и за него платят 2000 рублей - заказчика вежливо отправляю куда-нибудь по-дальше, чтоб хотя бы денег накопил и совести набрался.
3. Смотрю на дизайн (в основном достаточно быстро, минут за 10) для того, чтоб понять, какие элементы реально сделать, а какие нет (смотря какие условия опять же, явно все тутошние читатели знают про адаптивку). Если что-то unreal - чётко расписываю заказчику что не реально и почему, если контактирую с дизайнером и есть относительная свобода - прошу перерисовать конкретные элементы.
4. Открываю ФШ и начинаю приводить в порядок все слои (с режимами наложения, с составными фонами для 1 блока и тд и тп). Если есть режим наложения на какой-то элемент (обычно Умножение чтоб не было видно белого фона) - топаем к дизайнеру и начинаем ему выносить мозг если изображение сложное (если нет - сам вырежу, если есть подобное в интернете - нахожу png и далее...) Все слои для блока конкретного сливаю воедино, тогда и макет меньше весит и вырезать проще будет (конечно зависит от ТЗ всё, мож там где-то параллакс и надо двигать туда-сюда всё)
5. "Обрезанный" psd ложу на Creative Clound
6. Пока всё это дело заливается - запускаю Brackets и пишу весь необходимый html вместе с текстом.
7. Залился psd, а html уже написан. Топаем в css, открываем Extract и понеслась по стилям гонка
8. Проверка на адаптивность и кроссбраузерность
9. Продакшн

P.S. Стараюсь всегда минифицировать html и css. Если есть хоть чем-то одинаковые блоки на страницах - один класс для них и только отталкиваясь от расположения меняем их. Напимер: .btn с градиентом, тенью, цветом и смещением текста, а также :hover пишу всё ближе к началу css дока, а дальше если кнопка где-то больше по отступам либо по шрифту: nav .btn {необходимые отступы}
P.P.S. 100% комментарии. Чаще всего в css.

Пожалуй, всё.
Ответ написан
talgautb
@talgautb
front-end developer
1 - создаешь свой шаблон 1 раз и надолго (и по мелочи добавляешь в него плюшки) (готовый набор - структура, настроенный bower и gulp, к примеру) можно сразу в yoman сделать
2 - выкачиваешь шаблон (копируешь/sublime fetch plugin/ yo my_template)
3 - устанавливаешь зависимости, плагины (1 строчка в консоли - bower i && npm i)
4 - начинаешь верстать
5 - ???
6 - PROFIT!!
Ответ написан
Комментировать
jMas
@jMas
Full stack developer
Разбиваю макет по модулям (элемент списка + список, шапка, навигация, форма, кнопка). Определяю пересечения модулей (например два блока на разных страницах очень похожи - для них один модуль и просто у одного из них в HTML будет указан дополнительный класс .module.module-supermodule).

Завожу несколько файлов:
app.css - только импорты для модулей.
@import "base.css";
@import "icon.css";
@import "btn.css";
/* ... */
@import "some-module.css";

base.css - любые базовые стили не привязанные к классам, обычно стили для тегов, никаких намеков на классы или id.

Верстаю сначала помодульно. Модуль обычно включает в себя только классы ограниченные определенным префиксом, например .nav- или .sidebar-.

Распространенные модули, которые кочуют из проекта в проект .btn-, .icon-, .form-, .nav-. Принцип организации модуля прост: внутри строго использовать классы с определенным префиксом. Искать такой модуль в списке CSS файлов очень просто - префикс и есть название файла, в верстке понять что элемент принадлежит к определенному модулю тоже достаточно просто - у всех классов этого модуля есть этот префикс. Если модуль - это список, допустим .list: в модуле сначала будет идти .list-item, а затем .list .list-item - для того чтобы можно было использовать .list-item отдельно от родителя .list, иногда бывает очень полезно.

В целом по структуре организации проекта все. Дальше - выбор определенного шага сетки (отступы, размеры элементов) должны быть кратны выбранному значению шага.

Для сборки модулей в один файл использую конкатенатор, умеющий смотреть импорты и вытаскивать CSS файлы по ним. Если использовать LESS или SASS задача вообще элементарная. Я просто знаю, что люди которым я отдаю верстку не часто знакомы с LESS и SASS, чтобы отдавать стили в таком виде.

По сути премудрости старта заканчиваются. Дальше все зависит сугубо от вашего профессионализма.

P.S.: Кстати, почему то все сбрасывают стили - я этого никогда не делаю. Достаточно знать особенности стандартных стилей, тщательное тестирование в разных браузерах. Получается на деле стандартные отступы заданные браузером наоборот помогают. Тем более прошли те времена, когда был ощутимый разброс в стандартных значениях. В общем странно.
Ответ написан
seregali
@seregali
  • Создаю проект на локале
  • Изучаю дизайн сайта
  • Пишу структуру html
  • После используя плагин perfectPixel - начинаю прописывать стили прямо в браузере (затем уже переношу в отдельный файл css)

Основной браузер у меня chrome.
Ответ написан
Комментировать
PiSaiK
@PiSaiK
IT куратор
Жесть какая, читаю комментарии и понимаю, что современный верстальщик это не профессия, недопрограммист, а как тот кот, который занимает себя лизанием.
Ответ написан
leto2015
@leto2015
Веб-разработчик
Спасибо добрые люди за подробные комментарии. Очень много полезного и интересного узнал.
Ответ написан
@maxyc_webber
Web-программист
smacss.com
Ответ написан
Комментировать
yar-ikarus
@yar-ikarus
Аномалия
1) Завожу чистенький scss-проект (уже заранее подготовленный)
2) добавляю проект в prepros
3) собственно, верстаю, необходимые миксины добавляю по мере их надобности
4) пишу js-ники
Готово
Ответ написан
Комментировать
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
1. CSS - Сброс параметров по-дефолту.
2. Последовательный вывод списком всех базовых типов (h1,h2 и т.д.)
и нужных блоков с настройкой верстки на каждый новый тип/объект/блок.
Проверка вложенности и прочие "грабли". Запуск в разных браузерах.
3. Верстка сеток страниц с подготовленными стилями (в п.2)
4. Профит! (js - добавляю после, если необходим...)
Ответ написан
Комментировать
YuriMolotov
@YuriMolotov
Дизайн и вёрстка сайтов — Molotov.pro
Т.к. в первую очередь дизайнер, верстаю поэтапно по визуальным разделам, сразу со стилями, изображениями, страницами и пр.:
1. Шапка и главное меню.
2. Футер.
3. Баннеры/виджеты/боковое меню.
4. Вся главная.
5. Карточки товара.
6. Каталог.
7. Страницы товара.
8. Корзина и контакты.
9. Окна/лайтбоксы.
10. Информационные страницы.

Каждый этап сразу полностью тестируется и правится.
Ответ написан
Комментировать
@vvrider
Ikeya TK
1) Смотрю сайты которые есть по данной тематике
2) Смотрю на чем сайты выше реализованы
3) Выбираю : использовать CMS или Верстать с нуля
4) Если CMS - устанавливаю на хостинг и тестирую ; Редактирую под себя / Если обычная верстка - Создаю структуру папок , делаю style.css, index.html подключаю Bootstrap и Jquery и го ебашить в Sublime код
5) Настариваю CMS , редактирую код / Для обычной верстки тестирую код в браузере
Ответ написан
Комментировать
makecode
@makecode
В зависимости от задачи, нужен ли работающий сайт сразу на PHP (ну, например элементарная отправка формы или если данные в базе и т.п.).
Если не надо PHP, создаю папку и в ней папки style, i, script. Просто верстаю.
С вариантом PHP тоже самое, только на локал домен или где-нибудь создаю тестовый домен на своем хостинг-провайдере.
Ответ написан
Комментировать
gunlinux
@gunlinux
Freelancer
stark_workflow $projectname
#start_workflow_code примерно такой код
cd ~/git/works/
git clone ~/git/workflow newproject
cd newproject
npm install


subl .src/base.html
grunt watch

Одна проблема, еще не выработал единый подход к организации grunt проекта.
Для верстки Jinja2 шаблонизатор + less, ну и всякие lint
Ответ написан
Комментировать
@Kindzoku
Как многие уже говорили:
1) Gulp
2) reset.css, bourbon, neat (скорее всего вам не нужен bootstrap)
3) обязательно БЭМ. Без БЭМ всё будет плохо. Это лишь вопрос времени. Верстать нужно по компонентам.
4) повторяющиеся мелочи в atomic. В ВЭМ не нужны правила типа cursor: pointer, text-align: center. Создаём .pointer, .text-center.
Ответ написан
Комментировать
HelenStar
@HelenStar
Начинающий frontend
У меня все проще:

1. Открываю макет, затем изучая его, мысленно разбиваю его на основные блоки (составляю базовую кодовую разметку), определяю повторяющиеся блоки, заранее отмечая в голове у себя где мне понадобятся общие классы, а также быстренько прикидывая как это все будет выглядеть на мобиле (увы, но всегда просят сделать адаптив или мобильную без макетов). На этом с изучением макета все. Уходит на все где-то пара минут, если простой ленд. Если это многостранничник или интернет-магазин, то тогда изучаю сразу все макеты, чтобы также определить для себя, что из блоков и стилей отправится в general.css, а что будет в персональных файлых стилей отдельных страниц, чтобы потом не объединять файлы стилей, не убивать лишнее время.
2. Открываю breckets, набрасываю сразу базовую разметку всей страницы с учетом того, что это будет адаптив (или респонсив) с помощью удобного и любимого emmet'а.
3. Стилизую верстку (также сверху вниз блок за блоком).
4. Делаю адаптив. С учетом того, что уже при верстке декстопа я сразу прикидываю какой у меня будет мобильная версия и верстаю с учетом адаптива или респонсив, то адаптив могу сделать и за рабочий день на все страницы, если только не появятся какие-нибудь сюрпризы с кроссбраузерностью на всяких iOS Safari (которую как front я уже просто ненавижу за какие-то полгода со всеми ее сюрпризами).
5. Тестирю, допиливаю все, что только можно допилить.

Это если просто верстка. Если под ключ с админкой (в моем случае modx), то:
1. Прикидывая и набрасывая верстку также прикидываю какие элементы вынесу в общие чанки, какие будут выводиться всевозмножными сниппетами и т.д.
2. Делаю верстку, после утверждения переносу в админку, разбиваю все на чанки, доп поля, ставлю необходимые компоненты и т.д.

В общем, как-то так. :-)
Ответ написан
Комментировать
Amirez
@Amirez
В чем секрет кота Бориса?
  1. Начинаю с клонирования своего репозитория с github, в нем всё есть, файловая структура, демо-файлы, миксины, сбросы, зависимости для разработки(gulp и т.д.).
  2. Пишу в консоли npm i и понеслась.
  3. Изучают макет, выбираю основной цвет, все шрифты, строю структуру(почти всегда на бумаге), выделяю одинаковые блоки и элементы, думаю как их стилизовать, чтоб не повторять код.
  4. Начинаю верстать
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
05 февр. 2023, в 21:04
500000 руб./за проект
05 февр. 2023, в 20:19
500 руб./за проект
05 февр. 2023, в 19:42
1000000 руб./за проект