Magento2采用了非常“有争议”的前端架构方法。我们不会讨论这个问题，但是我们将尝试解释如何授权当前的Magento2 UI库来完成最常见的前端任务。
首先，什么是Magento UI库，在哪里可以找到它。如引言所述:
Magento UI库是一个灵活的模块化Magento前端库，旨在帮助Magento主题开发人员。它使用一组基本元素的混合来简化前端主题的开发和定制。Magento UI库为开发或定制Magento主题的用户提供了以下特性。
听起来不错，我们能从这个库中得到什么呢？
该库提供了自定义以下所有用户界面元素的功能：
- actions-toolbar
- breadcrumbs
- buttons
- components
- drop-downs
- forms
- icons
- layout
- loaders
- messages
- pagination
- popups
- ratings
- resets
- responsive
- sections – tabs and accordions
- tables
- tooltips
- typography
- utilities
- …
在我们继续之前，也许您会发现我们之前关于Magento2作为Magento 2 CSS预处理的博客很有用，这可以很有趣的验证Magento 2 验证自定义表单。
今天我将重点介绍与自定义表单相关的简单任务。外观，功能，验证等。
首先，我们需要找到库文档。如果您已经安装了Magento2，那么您可以访问指向浏览器的库文档
http://your-ip-installation-name-whatever/pub/static/frontend/Magease/workshop/en_US/css/docs/index.html在这里，您将找到所有与接口元素相关的文档。
Magento UI库
所以我们猜测你已经安装了Magento2，示例数据，创建自定义主题，使用回退机制，父主题是blank。我们可以从简单的任务开始。
打开
http://magento2install/customer/account/create/我们将看到注册表单：
在主题_theme.less文件下，我们可以通过添加下面代码来开始
@form-field-type-revert:block;保存，编译，我们将看到：
这对于从内联到块标签再到输入字段的所有表单都是全局的。同样的道理，如果你想改变颜色、边框、字体，只要遵循列出所有可能变量的文档即可。
在列中获取表单非常简单，这是一个很好的特性。我们将使用相同的注册表单并创建两列。
.form-create-account{
.fieldset {
.lib-form-fieldset();
> .field {
.lib-form-field(
@_column: true,
@_column-number:2
);
}
}
}
我们可以改变Form字段标签的颜色和Label“required”星号
.form-create-account{
.fieldset {
.lib-form-fieldset();
> .field {
.lib-form-field(
@_label-color:red,
@_label-asterisk-color:blue,
@_column: true,
@_column-number:2
);
}
}
}
我们可以尝试使用更多的全局变量，例如验证：
@form-validation-note-icon__use:true;
@form-validation-note-icon__font-color:blue;我们可以为验证消息，颜色，大小等添加自定义图标。
