larakit/lk-makeup

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

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

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

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

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

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

Оговорка:

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

Итак, начнем!, _(*2)

1. Установка

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

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

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

где startbootstrap - это название проекта., _(*5)

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

2. Определимся со структурой и зададим основные стили проекта

Вам придется работать со следующей файловой структурой:, _(*7)

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

./app/Http/page.php

пропишем, _(*9)

<?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-код шаблона сохраняем в файле, _(*10)

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

, _(*11)

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

, _(*13)

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

Для этого в файл, _(*15)

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

запишем CSS данного блока, _(*16)

, _(*17)

Снова обновляем страницу, _(*18)

, _(*19)

Уже лучше!, _(*20)

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

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

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

, _(*23)

и обновляем страницу, _(*24)

, _(*25)

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

, _(*27)

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

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

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

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

, _(*31)

смотрим результат, _(*32)

, _(*33)

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

На этом с блоками закончено. Переходим к сборке страниц из блоков., _(*35)

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

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

Шаблоны страниц у нас хранятся в директорию, _(*37)

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

Код страницы добавляем в файл, _(*38)

, _(*39)

Смотрим:, _(*40)

, _(*41)

5. Работа с темами оформления

Остался неохваченным еще один момент - темы оформления. Это тоже делается достаточно просто:, _(*42)

в директорию, _(*43)

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

положить файлы с именем тем оформления, например,, _(*44)

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

Темы автоматически зарегистрируются., _(*45)

Все, вы ожидали сложностей?, _(*46)

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

, _(*48)

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

, _(*50)

6. Результат верстки в одном архиве

После того, как вы убедились, что все сделано корректно, показываете дизайнеру, чтобы он убедился, что именно так он и видел свой макет - готовую работу надо отдать заказчику, чтобы тот отдал ее серверным программистам для "натягивания верстки"., _(*51)

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

Отдельное спасибо, я надеюсь, вы услышите от серверных программистов, которым придется интегрировать вашу верстку., _(*53)

Ну и бонусом к этому архиву - вы получите рубрикатор всех сверстанных страниц:, _(*54)

, _(*55)

Результаты проименованые по следующему принципу: * блоки: block_{name}--{theme}.html * страницы: page_{name}--{theme}.html, _(*56)

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

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

У нас уже подключен пакет-хелпер larakit/hlp-beerhold, _(*58)

Заменяем ссылки на картинки, _(*59)

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

где 900 - ширина, а 650 - высота, _(*60)

, _(*61)

и получаем:, _(*62)

, _(*63)

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

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

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

P.S.:

уже дописав статью и сделав все скриншоты и анимашки увидел, что не подключились иконки из font-awesome, потому, что забыл их подключить., _(*67)

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

$composer require larakit/sf-font-awesome

сделаем еще раз скриншот последней страницы, _(*69)

, _(*70)

все иконки на месте., _(*71)