larakit/lk-makeup

This package is not installable via Composer 1.x, please make sure you upgrade to Composer 2+. Read more about our Composer 1.x deprecation policy.

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

dev-master 2016-10-03 12:01 UTC

This package is auto-updated.

Last update: 2021-06-15 18:34:50 UTC


README

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

  • соблюдение корректности отображения верстки для разных разрешений (путем установки необходимого количества брейкпоинтов)
  • возможность добавления тем оформления
  • возможность просмотреть отдельный блок (это очень важно и для самого верстальщика, и для программиста)
  • возможность легкой кастомизации (темы оформления), вы, например, можете запросто сделать темы оформления для 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/, там мы должны увидеть следующую картинку: 68747470733a2f2f686162726173746f726167652e6f72672f66696c65732f3766622f3934372f3030642f37666239343730306438333734343061613463396163383265663865303739332e706e67 Если до этого момента у вас все получилось, установка считается законченной. Поздравляем!

###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

68747470733a2f2f686162726173746f726167652e6f72672f66696c65732f6265352f3331322f6532312f62653533313265323135623334333962383933323531666164373336383330612e706e67

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

68747470733a2f2f686162726173746f726167652e6f72672f66696c65732f6663352f6136392f6262302f66633561363962623032366434663463613864613964353163363564316535332e706e67

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

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

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

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

68747470733a2f2f686162726173746f726167652e6f72672f66696c65732f3030392f3666392f6231652f30303936663962316532663034663964626664646135643564663662336236302e706e67

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

68747470733a2f2f686162726173746f726167652e6f72672f66696c65732f6232622f3631642f6237342f62326236316462373462633134303265386439633733376436633466316139332e706e67

Уже лучше!

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

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

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

68747470733a2f2f686162726173746f726167652e6f72672f66696c65732f3362362f6637612f3236642f33623666376132366435373834373535616364663737326165343265336563392e706e67

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

68747470733a2f2f686162726173746f726167652e6f72672f66696c65732f3934392f3433372f3761332f39343934333737613338393234366239393935336239623030343035393537612e706e67

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

68747470733a2f2f686162726173746f726167652e6f72672f66696c65732f6537662f3461342f6139332f65376634613461393336356634393439613136623133656539303237626431302e676966

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

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

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

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

68747470733a2f2f686162726173746f726167652e6f72672f66696c65732f6430642f3732302f6666322f64306437323066663230613234656161623436613530646363626466366635322e706e67

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

68747470733a2f2f686162726173746f726167652e6f72672f66696c65732f3064622f6363662f6464342f30646263636664643431373634346665383430363261373538616266643562352e676966

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

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

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

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

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

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

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

68747470733a2f2f686162726173746f726167652e6f72672f66696c65732f6631362f3231362f6265372f66313632313662653762616634643632383061623261636165643534316630312e706e67

Смотрим:

68747470733a2f2f686162726173746f726167652e6f72672f66696c65732f3561392f6435632f3764312f35613964356337643165656434323333383066633331323338323231646235362e676966

#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.

68747470733a2f2f686162726173746f726167652e6f72672f66696c65732f6534312f3937362f3439622f65343139373634396266313334376139623961373933303933353065343931622e676966

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

68747470733a2f2f686162726173746f726167652e6f72672f66696c65732f6537662f3264652f3263622f65376632646532636236333334353066623734656361653536306363316434392e706e67

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

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

68747470733a2f2f686162726173746f726167652e6f72672f66696c65732f3933642f6536632f3064622f39336465366330646236636434363638396634316561643237313633623037312e706e67

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

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

68747470733a2f2f686162726173746f726167652e6f72672f66696c65732f3433312f3036652f3238632f34333130366532386338623534363738623537353732306232313337316133392e706e67

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

  • блоки: block_{name}--{theme}.html
  • страницы: page_{name}--{theme}.html
Позабыты хлопоты, остановлен бег,
Вкалывают роботы, а не человек.

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

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

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

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

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

68747470733a2f2f686162726173746f726167652e6f72672f66696c65732f3832392f3130622f3363352f38323931306233633566323434383437393539306661396438343964633164612e706e67

и получаем:

68747470733a2f2f686162726173746f726167652e6f72672f66696c65732f3638342f3239362f6136662f36383432393661366632376134386139623833343936366233643738386233652e706e67

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

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

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

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

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

$composer require larakit/sf-font-awesome

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

68747470733a2f2f686162726173746f726167652e6f72672f66696c65732f3535392f3237322f6162322f35353932373261623235653934313161393139303561626131646364356439372e706e67

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