Перенос макета сайта в HTML

21-12-2020Время чтения ~ 4 мин.CSS, HTML, LESS, SASS 6483

Расскажу про одну методику, которая позволяет достаточно быстро перевести макет страницы в HTML-код прототипа.

Например у нас есть лендинг. Как правило на первом этапе происходит сбор информации, а потом рисуется графический прототип. Это может быть обычный Ворд, или гугл-документы, но часто это сервис wireframe.cc. Мне он очень нравится, поскольку не содержит ничего лишнего и прост для работы. Ну и бесплатный, что тоже важно.

Иногда работу в wireframe.cc выполняет сам копирайтер. Там он не только пишет тексты, но и размечает блоки, которые по его мнению можно скомбинировать определённым образом. Когда всё готово, этот макет получает html-верстальщик, который должен перенести тексты (это простое копирование) и разверстать блоки, только уже в HTML-код.

Здесь есть очень важный момент — первая версия вёрстки должна повторять макет wireframe.cc (это может быть любой другой сервис — я привожу его только как пример). То есть не нужно верстать в цвете, задавать все изображения, настраивать отступы: нет — это будет тоже черновой вариант, но только выполненный в html-коде.

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

Но при этом, полученный html-код должен содержать только самый минимум css-классов и html-тэгов, потому что на следующем этапе (приведение к дизайну) это всё возможно придётся переделывать.

Итак, пусть у нас есть вот такой макет от копирайтера.

Исходный макет

Нам нужно перенести его на HTML. Я покажу на примере Albireo, но вы можете сделать это даже вручную и под свой фреймворк. Мы будем использовать классы Berry CSS и парсер Simple.

Делаем страницу, где в параметрах указываем класс для BODY:

parser: simple
body: class="prototype"

Дальше пропишем css-стили прямо в тексте страницы:

<style>
.prototype .layout-center-wrap {margin-bottom: 50px;}
.prototype .flex > div {padding: 10px; border: 1px dotted lightgray; margin: 10px 10px 20px 10px; flex-grow: 1;}
.prototype p {margin: 0 0 5px 0;}
.prototype .img {background: lightgray; padding: 20px; text-align: center; width: 200px; height: 200px;}
.prototype .block {margin: 20px 0; padding: 30px; text-align: center; border: 1px dotted lightgray;}
</style>

Смысл в том, что они сработают только тогда, когда у BODY будет указан класс .prototype. В них мы добавляем простые отступы, цвета, то есть всё то, что может пригодится при прототипировании. Когда нужно будет начать чистовую верстку, то этот класс и стили достаточно будет удалить — они никак не скажутся на результате.

HTML-код можно писать с помощью Simple.

div(layout-center-wrap) || div(layout-wrap)
    div
        h2 Описание
    /div
 
    div
        ul
        * Для lorem
        * Для lorem lorem
        * Для lorem lorem lorem 
        /ul
    /div
/div || /div

Все блоки я заворачиваю в layout, чтобы ограничить их широту (это классы Berry CSS). А внутри каждый блок макета обрамляется в DIV. И здесь мы стараемся не использовать классы, чтобы не создавать лишней работы на будущее.

Когда стоит задача разместить колонки, то используется flex.

div(layout-center-wrap) || div(layout-wrap flex)
    div
        h1 Оффер оффер оффер оффер оффер оффер оффер
        
        ul
            * Для lorem
            * Для lorem lorem
            * Для lorem lorem lorem 
        /ul
    /div
 
    div
        __(img) картинка
    /div
/div || /div

В исходном макете в 99% случаев используется всего три элемента:

текст
блок
изображение

Для изображений мы сделали класс .img, который формирует пустой прямоугольник (см. стили).

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

В некоторых случаях на макете может быть блок без конкретики. Например гугл-карта или блок фотографий галереи. Копирайтер просто его отмечает пустым блоком, а мы можем сделать так:

div(layout-center-wrap) || div(layout-wrap)
    __(block) Галерея
/div || /div

На выходе получается такой простенький вариант:

Итоговый вариант в HTML

Поскольку html здесь очень простой, то файл можно вообще передать копирайтеру для правки, чтобы «отвязаться» от графического макета.

При желании, можно ещё больше упростить написание кода, если предусмотреть замены в тексте. Например можно сделать так:

[boxf]
    div
        _ Название сайта
    /div
 
    div
        _ Телефон: +38 012 345 67 89
        _ понедельник - пятница: 9.00-18.00 
        _ суббота: 9.00-16.00
        _ Киев, Крещатик, 25
    /div
 
    div
        _ Аварийная служба: +38 012 345 67 89
        _ Круглосуточно
        _ Иконки соцсетей
    /div
[/boxf]
 
[box]
    div
        h2 Описание
    /div
 
    div
        _ Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.
    /div
[/box]

Здесь мы оставляем все те же DIV, но вместо классов layout и flex используем замены в виде [box] и [boxf].

В Albireo это делается достаточно просто. В параметры страницы добавляем:

init-file: _proto.php
text-function: proto

Делаем файл _proto.php (в каталоге albireo-data):

<?php if (!defined('BASE_DIR')) exit('No direct script access allowed');
 
function proto($text) {
    $text = str_replace('[box]', '<div class="layout-center-wrap"><div class="layout-wrap">', $text);
    $text = str_replace('[/box]', '</div></div>', $text);
    
    $text = str_replace('[boxf]', '<div class="layout-center-wrap"><div class="layout-wrap flex">', $text);
    $text = str_replace('[/boxf]', '</div></div>', $text);
    
    return $text;
}

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

После того, как все тексты и блоки расставлены и утверждены, верстальщик удалит стили и класс .prototype и начнёт делать вёрстку согласно дизайна.

Перенос макета сайта в HTML

Проекты

Ссылки