PHPackages                             larakit/lk-makeup - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. larakit/lk-makeup

ActiveLibrary[Utility & Helpers](/categories/utility)

larakit/lk-makeup
=================

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

11991PHP

Since Oct 3Pushed 9y ago2 watchersCompare

[ Source](https://github.com/larakit/lk-makeup)[ Packagist](https://packagist.org/packages/larakit/lk-makeup)[ RSS](/packages/larakit-lk-makeup/feed)WikiDiscussions master Synced 4w ago

READMEChangelog (1)DependenciesVersions (1)Used By (0)

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

[](#larakit-htmlmakeup-инструмент-верстальщика)

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

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

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

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

\###Оговорка: Чтобы не отвлекаться на верстку, в качестве примера возьмем [готовый шаблон START BOOTSTRAP](http://startbootstrap.com/template-overviews/freelancer/), разобьем на блоки и покажем как правильно организовывать код и статику. Для того, чтобы было проще работать и иметь возможность сборки страницы из кусочков воспользуемся шаблонизатором 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 - это название проекта.

Проверяем работоспособность страницы инструмента, для этого перейдем на страницу , там мы должны увидеть следующую картинку: [![](https://camo.githubusercontent.com/b4eba5521d7644d32082ef3e0db1f5890e7f0ae21ddce350e96841b219887ec7/68747470733a2f2f686162726173746f726167652e6f72672f66696c65732f3766622f3934372f3030642f37666239343730306438333734343061613463396163383265663865303739332e706e67)](https://camo.githubusercontent.com/b4eba5521d7644d32082ef3e0db1f5890e7f0ae21ddce350e96841b219887ec7/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

```

пропишем

```