README

###首先，我将指出该工具解决的问题

• 确保布局在不同分辨率下的正确显示（通过设置必要的断点数量）
• 能够添加主题样式
• 能够查看单个块（这对布局师和程序员来说都非常重要）
• 能够轻松定制（主题样式），例如，您可以轻松地为 Android、iOS、Windows 创建主题样式
• 无需压缩和解压浏览器即可快速展示页面的响应性
• 简化“拉伸”布局的过程，因为所有逻辑都被划分为小块，便于操作
• 界面直观，布局师和接收方都易于理解
• 能够一键下载完整的布局（包括 HTML、JS/CSS/images/fonts）的压缩包
• 能够修改已布局的块，而无需修改所有页面（例如，在 30 个布局中修改页脚的版权信息，这通常很耗时，通常人们会忽略这一点）
• 对我们来说最重要的是，能够由多个布局师同时在一个项目上工作，而且这些布局师的资格不同（为初学者提供简单的块进行工作，为经验丰富的布局师提供页面组装和复杂适配的信任）

###现在，让我们谈谈必须做出的牺牲

• 布局师必须设置工作环境（安装 LAMP 或 OpenServer for Windows，以及安装 Laravel）
• 必须学习一些基本的模板引擎 Twig 功能（这将在以后大大简化生活）
• 必须遵守某些约定（当然，为了换取工作简化）

###注意：为了不分散对布局的注意力，我们以 START BOOTSTRAP 的现成模板 为例，将其分解为块，并展示如何正确组织代码和静态资源。为了简化工作和能够从块中组装页面，我们将使用模板引擎 Twig。请注意，输出将是一个包含指向生成页面的链接和块的页面，对于每个主题样式，这意味着可以以这种方式为使用 Laravel 或 Joomla 的项目进行布局。

那么，让我们开始吧！

###1. 安装 我们假设您已经非常出色地完成了环境的安装（Web 服务器、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

写入以下内容

<?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的主要开发者Artem Geller在接受网站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等才能查看工作，他们会感到不高兴 - 因此，在工具中有一个"下载"按钮，点击后您将获得包含所有块和页面变体的完整存档，所有样式和脚本，以及主题样式。

此外，这个存档还包括所有排版页面的分类

命名规则如下

• 块：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

我们再次截图最后一页。

所有图标都在正确的位置。