Skip to content
Snippets Groups Projects
Commit 67c4908d authored by Antonio De Marco's avatar Antonio De Marco
Browse files

Update documentation and provide update hook #80

parent a60704fa
No related branches found
No related tags found
No related merge requests found
......@@ -9,24 +9,31 @@ Define and expose self-contained UI patterns as Drupal plugins and use them seam
[panels](https://www.drupal.org/project/panels), [field groups](https://www.drupal.org/project/field_group), views,
[Display Suite](https://www.drupal.org/project/ds) view modes and field templates.
The module generates a pattern library page to be used as documentation for content editors or as a showcase for
business and clients.
The UI Patterns module also integrates with with tools like [PatternLab](http://patternlab.io/) or modules like
[Component Libraries](https://www.drupal.org/project/components) thanks to
[definition overrides](http://ui-patterns.readthedocs.io/en/8.x-1.x/content/patterns-definition.html#override-patterns-behavior).
![Showcase page example](https://raw.githubusercontent.com/nuvoleweb/ui_patterns/8.x-1.x/docs/images/pattern-library.png)
![Overview](https://raw.githubusercontent.com/nuvoleweb/ui_patterns/8.x-1.x/docs/images/patterns-overview.png)
## Project overview
The UI Patterns project provides 5 modules:
- **UI Patterns**: the main module, its purpose is to expose patterns to the Drupal rendering system and provide a pattern library overview page, available at `/patterns`. [Learn more](http://ui-patterns.readthedocs.io/en/8.x-1.x/content/patterns-definition.html)
- **UI Patterns Field Group**: allows to use patterns to format field groups provided by the [Field group](https://www.drupal.org/project/field_group) module. [Learn more](http://ui-patterns.readthedocs.io/en/8.x-1.x/content/field-group.html)
- **UI Patterns Layouts**: allows to use patterns as layouts provided by the [Layout plugin](https://www.drupal.org/project/layout_plugin) module. This allows patterns to be used on [Display Suite](https://www.drupal.org/project/ds) view modes or on [panels](https://www.drupal.org/project/panels) out of the box. [Learn more](http://ui-patterns.readthedocs.io/en/8.x-1.x/content/layout-plugin.html)
- **UI Patterns Display Suite**: allows to use patterns to format [Display Suite](https://www.drupal.org/project/ds) field templates. [Learn more](http://ui-patterns.readthedocs.io/en/8.x-1.x/content/field-templates.html)
- **UI Patterns Views**: allows to use patterns as Views row templates. [Learn more](http://ui-patterns.readthedocs.io/en/8.x-1.x/content/views.html)
The UI Patterns project provides 6 modules:
- **UI Patterns**: the main module, it exposes the UI Patterns system APIs and it does not do much more than that.
- **UI Patterns Library**: allows to define patterns via YAML and generates a pattern library page available at `/patterns`
to be used as documentation for content editors or as a showcase for business. Use this module if you don't plan to
use more advanced component library systems such as PatternLab or Fractal.
[Learn more](http://ui-patterns.readthedocs.io/en/8.x-1.x/content/patterns-definition.html)
- **UI Patterns Field Group**: allows to use patterns to format field groups provided by the
[Field group](https://www.drupal.org/project/field_group) module.
[Learn more](http://ui-patterns.readthedocs.io/en/8.x-1.x/content/field-group.html)
- **UI Patterns Layouts**: allows to use patterns as layouts. This allows patterns to be used on
[Display Suite](https://www.drupal.org/project/ds) view modes or on [panels](https://www.drupal.org/project/panels)
out of the box. [Learn more](http://ui-patterns.readthedocs.io/en/8.x-1.x/content/layout-plugin.html)
- **UI Patterns Display Suite**: allows to use patterns to format [Display Suite](https://www.drupal.org/project/ds)
field templates. [Learn more](http://ui-patterns.readthedocs.io/en/8.x-1.x/content/field-templates.html)
- **UI Patterns Views**: allows to use patterns as Views row templates.
[Learn more](http://ui-patterns.readthedocs.io/en/8.x-1.x/content/views.html)
## Try it out!
......
Use patterns with Layout Plugin
===============================
Use patterns as layouts
=======================
Patterns can be used as `Layout Plugin <https://www.drupal.org/project/layout_plugin>`_'s layouts thanks to the
``ui_patterns_layouts`` module.
Patterns can be used as layouts thanks to the ``ui_patterns_layouts`` module.
Once exposed as layouts patterns can be used to arrange fields on entities like nodes,
`paragraphs <https://www.drupal.org/project/paragraphs>`_, etc. or to place blocks on a page using
......
Define your patterns
====================
Patterns can be exposed by both modules and themes: all defined patterns are collected and managed by a centralized
plugin manager, this means that pattern IDs must be unique in order to avoid conflicts.
Patterns can be exposed by both modules and themes by enabling the ``ui_patterns_library`` module.
Defined patterns will be available at ``/patterns``, only accessible by roles having the ``access patterns page``
permission. Below an example of a pattern library page styled using the `Bootstrap Patterns <https://github.com/nuvoleweb/bootstrap_patterns>`_
theme:
.. image:: ../images/pattern-library.png
:align: center
Pattern definitions
-------------------
To define your patterns simply create a YAML file named ``MY_MODULE.ui_patterns.yml`` or ``MY_THEME.ui_patterns.yml``
and list them using the following format:
......
docs/images/patterns-overview.png

21.8 KiB

......@@ -5,31 +5,30 @@ The UI Patterns module allows developers to define self-contained UI patterns as
in their `panels <https://www.drupal.org/project/panels>`_, `field groups <https://www.drupal.org/project/field_group>`_
or `Display Suite <https://www.drupal.org/project/ds>`_ view modes.
The module also generates a pattern library page to be used as documentation for content editors or as a showcase
for business like the one shown below:
.. image:: images/pattern-library.png
.. image:: images/patterns-overview.png
:align: center
Project overview
----------------
The UI Patterns project provides 5 modules:
The UI Patterns project provides 6 modules:
* **UI Patterns**: the main module, its purpose is to expose patterns to the Drupal rendering system and provide a
pattern library overview page, available at ``/patterns``.
* **UI Patterns**: the main module, it exposes the UI Patterns system APIs and it does not do much more than that.
* **UI Patterns Library**: allows to define patterns via YAML and generates a pattern library page available at ``/patterns``
to be used as documentation for content editors or as a showcase for business. Use this module if you don't plan to
use more advanced component library systems such as PatternLab or Fractal.
`Learn more <http://ui-patterns.readthedocs.io/en/8.x-1.x/content/patterns-definition.html>`_
* **UI Patterns Field Group**: allows to use patterns to format field groups
provided by the `Field group <https://www.drupal.org/project/field_group>`_ module.
* **UI Patterns Layouts**: allows to use patterns as layouts provided by the
`Layout plugin <https://www.drupal.org/project/layout_plugin>`_ module. This allows patterns to be used on
* **UI Patterns Layouts**: allows to use patterns as layouts. This allows patterns to be used on
`Display Suite <https://www.drupal.org/project/ds>`_ view modes or on `panels <https://www.drupal.org/project/panels>`_
out of the box.
* **UI Patterns Display Suite**: allows to use patterns to format `Display Suite <https://www.drupal.org/project/ds>`_
field templates.
* **UI Patterns Views**: allows to use patterns as Views row templates.
By the way plugin definitions are handled the UI Patterns module also integrated with with tools like `PatternLab <http://patternlab.io/>`_
or modules like `Component Libraries <https://www.drupal.org/project/components>`_.
By the way plugin definitions are handled the UI Patterns module also integrates with with tools like
`PatternLab <http://patternlab.io/>`_ or modules like `Component Libraries <https://www.drupal.org/project/components>`_.
Try it out
^^^^^^^^^^
......
# UI Patterns Layouts
Integrates UI Patterns with the [Layout Plugin](https://www.drupal.org/project/layout_plugin) module.
Integrates UI Patterns with the **Layout Discovery** core module.
- To use pattern layouts on view modes install the [Display Suite](https://www.drupal.org/project/ds) module.
- To use pattern layouts with [Page Manager](https://www.drupal.org/project/page_manager)
install the [Panels](https://www.drupal.org/project/panels) module.
## Note
Integration with the [Layout Plugin](https://www.drupal.org/project/layout_plugin) module is supported only until
version 1.0-beta6 included.
name: UI Patterns Layouts
type: module
description: Use patterns as layout plugins.
description: Use patterns as layouts via the Layout Discovery module.
core: 8.x
package: User interface
dependencies:
......
<?php
/**
* @file
* Contains install file.
*/
/**
* Uninstall layout_plugin and install layout_discovery.
*/
function ui_patterns_layouts_update_8001() {
/** @var \Drupal\Core\Extension\ModuleInstaller $installer */
$installer = \Drupal::service('module_installer');
$installer->uninstall(['layout_plugin']);
$installer->install(['layout_discovery']);
}
......@@ -13,6 +13,7 @@ use Drupal\Core\Layout\LayoutDefinition;
*/
function ui_patterns_layouts_layout_alter(&$definitions) {
// @todo: Use layout deriver instead.
// @link https://github.com/nuvoleweb/ui_patterns/issues/94
$pattern_definitions = \Drupal::service('plugin.manager.ui_patterns')->getDefinitions();
foreach ($pattern_definitions as $pattern_definition) {
$definition = [
......
......@@ -12,7 +12,7 @@ use Symfony\Component\DependencyInjection\ContainerInterface;
*
* @package Drupal\ui_patterns\Deriver
*/
abstract class AbstractDeriver extends DeriverBase implements DeriverInterface, ContainerDeriverInterface {
abstract class AbstractDeriver extends DeriverBase implements ContainerDeriverInterface {
/**
* Typed data manager service.
......
......@@ -9,7 +9,6 @@
"drupal/core": "~8",
"drupal/console": "0.11.3",
"drush/drush": "~8.0",
"drupal/layout_plugin": "~1",
"drupal/ds": "~3",
"drupal/field_group": "~1",
"drupal/coffee": "~1",
......
......@@ -3,3 +3,5 @@ type: module
description: UI patterns
core: 8.x
package: User interface
dependencies:
- system (>=8.3.0)
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment