@Pega

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

Сначала описываете полностью структуру сайта, а потом пишите CSS стили, или пишите стили постепенно, например написали разметку header'а - написали для него CSS, написали контентную часть - написали для него CSS и т.д.?
  • Вопрос задан
  • 29610 просмотров
Сложность: —
Пригласить эксперта
Ответы на вопрос 30
  • 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!!!
    Ответ написан
  • torrie
    @torrie
    Всё знаю, всё умею
    В первую очередь делаю сброс css-стилей.
    Затем делаю вёрстку общих блоков - просто структура из div'ов с нужными ширинами, высотами согласно макету, залитых разными цветами. Стараюсь все div'ы(когда что-то в строчку) делать inline-block'ами. Получается цветная такая структура будущего сайта. Каркас готов.
    NDrl9VkCyDvemP.jpg

    Начинаю углубляться в каждый блок - располагать в нём нужные элементы. В зависимости от сложности их расположения делаю какие-то блоки position:relative, но чаще всего всё упирается просто в отступы.
    Ответ написан
  • mccrush
    @mccrush
    Пишу код
    Смотрю на дизайн, знакомлюсь с ТЗ.
    Иду на кухню, делаю крепкий кофе.
    Выхожу на балкон, закуриваю.
    Курю, пью кофе и размышляю на тему "Нах я вообще полез в эту сферу".
    Верстаю.
    Ответ написан
  • 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, попутно минимизируя на лету. Заказчику отдаю все что сделал включая исходники.
    Ответ написан
  • Igor-Maf
    @Igor-Maf
    Web 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. Этап исправления деталей

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

    Есть БЭМ отлично сохраняет проект на годы, двигло можно не использовать, сама идея годится чтобы не делать из проекта помойку.
    Ответ написан
  • darkrain
    @darkrain
    У меня есть уже своя html+css заготовка.

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

    Но у меня уже опыта много, лет 9 уже как. Поэтому я заранее знаю что где и как будет, не гадаю, этот опыт позволяет мне не писать css вместе с html. Получается очень быстро. И я использую всякие бутстрапы только по требованию. Считаю излишними во многих случаях.
    Ответ написан
  • 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.
    Ответ написан
  • yar-ikarus
    @yar-ikarus
    Аномалия
    1) Завожу чистенький scss-проект (уже заранее подготовленный)
    2) добавляю проект в prepros
    3) собственно, верстаю, необходимые миксины добавляю по мере их надобности
    4) пишу js-ники
    Готово
    Ответ написан
  • xmoonlight
    @xmoonlight
    https://sitecoder.blogspot.ru
    1. CSS - Сброс параметров по-дефолту.
    2. Последовательный вывод списком всех базовых типов (h1,h2 и т.д.)
    и нужных блоков с настройкой верстки на каждый новый тип/объект/блок.
    Проверка вложенности и прочие "грабли". Запуск в разных браузерах.
    3. Верстка сеток страниц с подготовленными стилями (в п.2)
    4. Профит! (js - добавляю после, если необходим...)
    Ответ написан
  • YuriMolotov
    @YuriMolotov
    Дизайн и вёрстка сайтов — Molotov.pro
    Т.к. в первую очередь дизайнер, верстаю поэтапно по визуальным разделам, сразу со стилями, изображениями, страницами и пр.:
    1. Шапка и главное меню.
    2. Футер.
    3. Баннеры/виджеты/боковое меню.
    4. Вся главная.
    5. Карточки товара.
    6. Каталог.
    7. Страницы товара.
    8. Корзина и контакты.
    9. Окна/лайтбоксы.
    10. Информационные страницы.

    Каждый этап сразу полностью тестируется и правится.
    Ответ написан
  • @PiSaiK
    Жесть какая, читаю комментарии и понимаю, что современный верстальщик это не профессия, недопрограммист, а как тот кот, который занимает себя лизанием.
    Ответ написан
  • serjikz
    @serjikz
    web-developer, designer
    Верстаю часто, верстаю много (дизайнерю тоже, но чуть меньше). 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.

    Пожалуй, всё.
    Ответ написан
  • @vvrider
    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.
    Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
Вакансии с Моего Круга Все вакансии
Заказы с Фрилансим Все заказы