[Larakit HtmlMakeup] инструмент верстальщика

###Для начала обозначу проблемы, которые решает данный инструмент:

• соблюдение корректности отображения верстки для разных разрешений (путем установки необходимого количества брейкпоинтов)
• возможность добавления тем оформления
• возможность просмотреть отдельный блок (это очень важно и для самого верстальщика, и для программиста)
• возможность легкой кастомизации (темы оформления), вы, например, можете запросто сделать темы оформления для Android, iOS, Windows
• отсутствие необходимости сжимать и разжимать браузер, чтобы быстро продемонстрировать адаптивность страницы
• упрощение процесса "натягивания верстки", так как все логически разделено на маленькие блоки, которыми удобно оперировать
• рабочий интерфейс понятный и верстальщику, и принимающей стороне
• возможность скачать готовую верстку одним архивом (HTML включая JS/CSS/images/fonts)
• возможность изменить сверстанный блок, без необходимости внесения правок во всех страницах (например, при 30 макетах изменение копирайта в footer - это убийство времени, обычно забивают на это).
• ну, и самое главное лично для нас - возможность работать над одним проектом сразу нескольким верстальщикам, причем разной квалификации (начинающим дать простые блоки в работу, опытным - доверить сборку страниц и сложные адаптации)

###Теперь о том, чем придется пожертвовать:

• придется верстальщику настроить рабочее место (поставить LAMP или OpenServer для Windows, а также установить Laravel)
• придется изучить некоторые базовые функции шаблонизатора Twig (в дальнейшем это СИЛЬНО облегчит жизнь)
• придется соблюдать некоторые соглашения (естественно, в обмен на упрощение работы)

###Оговорка: Чтобы не отвлекаться на верстку, в качестве примера возьмем готовый шаблон START BOOTSTRAP, разобьем на блоки и покажем как правильно организовывать код и статику. Для того, чтобы было проще работать и иметь возможность сборки страницы из кусочков воспользуемся шаблонизатором Twig. Сразу обращу внимание на то, что на выходе мы получим примерно такую страницу со ссылками на сгенерированные страницы и блоки, причем для каждой темы оформления, т.е. можно будет таким образом верстать для проектов хоть с использованием Laravel, хоть Joomla.

Итак, начнем!

###1. Установка Считаем, что с установкой окружения (веб-сервер, PHP>=5.4, composer) вы справились на отличненько, поэтому сразу перейдем к установке самого инструмента.

В директории, где лежат ваши домены, произведем установку последней версии laravel (на момент написания статьи это v5.2.31)

$composer create-project --prefer-dist --stability=dev larakit/larakit startbootstrap
$cd startbootstrap
$composer require larakit/lk-makeup

где startbootstrap - это название проекта.

Проверяем работоспособность страницы инструмента, для этого перейдем на страницу http://startbootstrap/makeup/, там мы должны увидеть следующую картинку: Если до этого момента у вас все получилось, установка считается законченной. Поздравляем!

###2. Определимся со структурой и зададим основные стили проекта Вам придется работать со следующей файловой структурой:

Путь | Описание ------------ | ------------- ./app/Http/page.php | тут все настройки страницы ./app/Http/page.php | тут все настройки страницы ./public/!/static/blocks/ | блоки ./public/!/static/blocks/BLOCK_NAME/ | один блок ./public/!/static/blocks/BLOCK_NAME/block.twig | шаблон блока ./public/!/static/blocks/BLOCK_NAME/block.css | стили блока ./public/!/static/blocks/BLOCK_NAME/.css | брейкпоинт на пикселей ./public/!/static/blocks/BLOCK_NAME/.css | брейкпоинт на пикселей ./public/!/static/common/ | общесайтовая статика ./public/!/static/common/css/ | стили (любое содержимое внутри, подключается вручную) ./public/!/static/common/js/ | скрипты (любое содержимое внутри, подключается вручную) ./public/!/static/common/img/ | картинки ./public/!/static/common/fonts/ | шрифты ./public/!/static/pages/ | страницы ./public/!/static/pages/PAGE_NAME.twig | шаблон страницы ./public/!/static/themes/ | темы оформления ./public/!/static/themes/.css | темы оформления

Подключим их, для этого в файле

./app/Http/page.php

пропишем

<?php
\Larakit\StaticFiles\Manager::package('common')
    //подключим шрифты
    ->css('//fonts.googleapis.com/css?family=Montserrat:400,700')
    ->css('//fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic')
    //укажем зависимость от twitter bootstrap
    //это будет означать то, что он будет подключаться до этого пакета
    ->usePackage('larakit/sf-bootstrap')
    //подключим локальные common-стили
    ->css('/!/static/common/css/common.css')

    //подключим скрипты библиотек из CDN
    ->js('//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js')
    ->js('//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js')
    ->js('//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js')
    //подключим локальные common-скрипты
    ->js('/!/static/common/js/classie.js')
    ->js('/!/static/common/js/cbpAnimatedHeader.js')
    ->js('/!/static/common/js/jqBootstrapValidation.js');

###3. Формируем первый блок "navbar"

HTML-код шаблона сохраняем в файле

./public/!/static/blocks/navbar/block.twig

обновляем страницу и видим, что в разделе блоки автоматически появился наш блок. Выбираем его.

Уже симпатично, но как то дефолтно, добавим ему стилей.

Для этого в файл

./public/!/static/blocks/navbar/block.css

запишем CSS данного блока

Снова обновляем страницу

Уже лучше!

Но в макете для этого блока дизайнер нарисовал адаптивность на 768 пикселях.

С "Larakit HtmlMakeup" это очень просто: добавляем новый файл стилей в папке статики блока с названием брейкпоинта:

./public/!/static/blocks/navbar/768.css

и обновляем страницу

Заметили разницу? Верно: вверху инструмента появилась кнопка с брейкпоинтом 768px. Кликнем на нее.

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

Главный разработчик сайта Kremlin.ru Артём Геллер давая интервью сайту https://vc.ru/p/kremlin-ru, сказал:

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

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

смотрим результат

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

На этом с блоками закончено. Переходим к сборке страниц из блоков.

###4. Собираем страницу "index"

Считаем, что все блоки уже сверстаны к этому моменту.

Шаблоны страниц у нас хранятся в директорию

./resources/views/!/static/pages/

Код страницы добавляем в файл

Смотрим:

#5. Работа с темами оформления Остался неохваченным еще один момент - темы оформления. Это тоже делается достаточно просто:

в директорию

./public/!/static/css/themes/

положить файлы с именем тем оформления, например,

./public/!/static/css/themes/android.css
./public/!/static/css/themes/windows.css
./public/!/static/css/themes/ios.css

Темы автоматически зарегистрируются.

Все, вы ожидали сложностей?

Для демонстрации механизма "темизации" внутри каждой темы сделано небольшое изменение, чтобы показать принцип работы - раскрашен navbar & header.

А принцип заключается в том, что элементу BODY добавляется класс "theme-*", где вместо звездочки пишется название темы, а затем кастомизируются элементы лежащие внутри

###6. Результат верстки в одном архиве После того, как вы убедились, что все сделано корректно, показываете дизайнеру, чтобы он убедился, что именно так он и видел свой макет - готовую работу надо отдать заказчику, чтобы тот отдал ее серверным программистам для "натягивания верстки".

Естественно, они будут не в восторге, если для того, чтобы посмотреть работу им придется также поставить LAMP, Laravel, Twig, etc... - поэтому в инструменте есть кнопка "скачать", при нажатии на которую вы получите готовый архив со всеми вариантами использования блоков и страниц, всеми стилями и скриптами, а также темами оформления.

Ну и бонусом к этому архиву - вы получите рубрикатор всех сверстанных страниц:

Результаты проименованые по следующему принципу:

• блоки: block_{name}--{theme}.html
• страницы: page_{name}--{theme}.html

Позабыты хлопоты, остановлен бег,
Вкалывают роботы, а не человек.

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

У нас уже подключен пакет-хелпер larakit/hlp-beerhold

Заменяем ссылки на картинки

<img src="{{ beerhold(900, 650) }}" class="img-responsive" alt="">

где 900 - ширина, а 650 - высота

и получаем:

Смотрим исходные задачи, со всеми справились - плюс удовольствие от проделанной работу получили.

Кстати, текущий результат можно выкладывать на свой сервер и показывать заказчику по мере работы - это сильно мотивирует.

А также просить дизайнера доработать не совсем понятные моменты не запариваясь с объяснениями - просто дав ему ссылку на страницу или блок в нужном брейкпоинте и нужной теме оформления - это сильно экономит время.

###P.S.: уже дописав статью и сделав все скриншоты и анимашки увидел, что не подключились иконки из font-awesome, потому, что забыл их подключить.

Это не сложно, выолним установку пакета со статикой, после которой он сам подключится где надо:

$composer require larakit/sf-font-awesome

сделаем еще раз скриншот последней страницы

все иконки на месте.