PHPackages                             orba/magento2-module-style-guide - 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. orba/magento2-module-style-guide

Abandoned → [lingaro/magento2-module-style-guide](/?search=lingaro%2Fmagento2-module-style-guide)Magento2-module[Utility & Helpers](/categories/utility)

orba/magento2-module-style-guide
================================

Magento 2 Style Guide Module

1.0.4(2y ago)529.3k3[1 issues](https://github.com/ORBA/magento2-module-style-guide/issues)BeerwareHTMLPHP ^7.4 || ^8.1

Since Mar 12Pushed 2y ago5 watchersCompare

[ Source](https://github.com/ORBA/magento2-module-style-guide)[ Packagist](https://packagist.org/packages/orba/magento2-module-style-guide)[ RSS](/packages/orba-magento2-module-style-guide/feed)WikiDiscussions master Synced today

READMEChangelogDependencies (3)Versions (5)Used By (0)

Magento 2 Style Guide Module
============================

[](#magento-2-style-guide-module)

by [Lingaro](https://lingarogroup.com/)

1. Introduction
---------------

[](#1-introduction)

This module was created to help Magento 2 developers in building consistent themes.

It adds the following page to the store: `/style_guide`. The Style Guide lists generic blocks, widgets and HTML elements. The idea is to style all these elements at first and then build specific theme pages on top of them. The Style Guide is also a place for any custom element that was designed for a specific theme, like fancy sliders, accordions, etc. Each item of the Style Guide is easily customizable thanks to DI and theme inheritance system. It is very easy to add or remove an item from the Style Guide.

The library is open sourced. Feel free to contribute!

2. Installation
---------------

[](#2-installation)

The recommended way to install this package is through [Composer](https://getcomposer.org/).

```
composer require lingaro/magento2-module-style-guide

```

3. Overview of Style Guide sections
-----------------------------------

[](#3-overview-of-style-guide-sections)

The main component of Style Guide is section. Each section has a label and a PHTML template. Section may have a view model if needed. Section may be marked as removed to not show it on Style Guide page.

Default sections are defined in `etc/frontend/di.xml` file as an argument of `Lingaro\StyleGuide\ViewModel\SectionBlocksProvider` type.

### 3.1. Layouts

[](#31-layouts)

This section provides links to exemplary pages, each set up with different page layout: 1column, 2columns-left, 2columns-right, 3columns. Use them to style things like: breakpoints, columns widths, margins and paddings, sidebar blocks headings.

### 3.2. Colors

[](#32-colors)

This section provides list of theme colors with nice visualizations. Its purpose is to show developers in one place the main theme color palette.

### 3.3. Headings

[](#33-headings)

This section provides HTML heading elements (h1, h2, h3, h4, h5, h6). Don't hesitate to add custom headings if the design of the theme requires different style of same level headings on different pages.

### 3.4. Paragraph

[](#34-paragraph)

This section provides HTML paragraph element (p). Don't hesitate to add custom paragraphs if they were designed for global usage.

### 3.5. Unordered list

[](#35-unordered-list)

This section provides HTML unordered list elements (ul, li). Don't hesitate to add custom unordered lists if they were designed for global usage.

### 3.5. Ordered list

[](#35-ordered-list)

This section provides HTML ordered list elements (ol, li). Don't hesitate to add custom ordered lists if they were designed for global usage.

### 3.6. Links

[](#36-links)

This section provides HTML links (a). Don't hesitate to add custom links if they were designed for global usage.

Remember to style hover, active, focus and visited states!

### 3.7. Buttons

[](#37-buttons)

This section provides HTML buttons (button). Don't hesitate to add custom buttons if they were designed for global usage.

Remember to style hover, active, focus and visited states!

### 3.8. Form

[](#38-form)

This section provides HTML form elements (form, fieldset, legend, label, text input, password input, textarea, select, radio, checkbox, submit button). Basic validation is added to the form. Each form input element is present also in disabled version. Don't hesitate to add custom form elements if they were designed for global usage (eg. inputs in different sizes).

Remember to style validation error messages and inputs hover, active, focus and error states!

### 3.9. Tabs

[](#39-tabs)

This section provides native Magento tabs widget. Don't hesitate to remove it, if your theme does not plan to use the widget, or change it to custom one.

### 3.10. Tabs

[](#310-tabs)

This section provides native Magento breadcrumbs block.

### 3.11. Tooltips

[](#311-tooltips)

This section provides examples of native Magento tooltips. Don't hesitate to remove it, if your theme does not plan to use tooltips, or change it to custom implementation / examples.

### 3.12. Messages

[](#312-messages)

This section provides native Magento flash messages.

Watchout: There are some Magento modules that use different message HTML structure in their template files. For consistency, in such cases you should override these templates and use standard HTML structure.

### 3.13. Pagination

[](#313-pagination)

This section provides native Magento paginator. Don't hesitate to remove it, if your theme does not plan to use paginators.

### 3.14. Popup

[](#314-popup)

This section provides native Magento popup. Don't hesitate to add custom popups if they were designed for global usage.

### 3.15. Colors

[](#315-colors)

This section provides list of theme icons with their visualizations. Its purpose is to show developers in one place the main theme icons palette.

4. Customizations
-----------------

[](#4-customizations)

Style Guide module allows creating highly customizable style guides for your themes. In this chapter customization techniques are presented.

### 4.1. Prerequisites

[](#41-prerequisites)

A custom module is required for creating custom style guides. You can name it whatever you want, but the convention is to use your project's vendor name followed by "StyleGuide", eg. "ProjectVendor\_StyleGuide".

Style Guide module relies heavily on Magento's DI system. For the customizations you will need to create `etc/frontend/di.xml` file. Below you can find a boilerplate.

```

```

`Lingaro\StyleGuide\ViewModel\SectionBlocksProvider` is the main view model of style guide page. All the customizations will be injected there.

The reason of defining `ProjectVendor\StyleGuide\ViewModel\SectionBlocksProvider\YourThemeName` virtual type on top of this class is that thanks to that you can have different style guides defined for each theme used in the project.

To apply custom view model to specific theme you need to create the following layout XML file in your theme folder: `Lingaro_StyleGuide/layout/lingaro_style_guide_index_index.xml`. Below you can find an example:

```

                ProjectVendor\StyleGuide\ViewModel\SectionBlocksProvider\YourThemeName

```

You can find the default style guide configuration in Style Guide module's `etc/frontend/di.xml` file.

### 4.2. Adding new section

[](#42-adding-new-section)

To add a new section to your theme's style guide you need to define it in `etc/frontend/di.xml` file and inject it into your custom sections view model. Below you can find an example:

```

            Your section name
            ProjectVendor_StyleGuide::section/your_section.phtml

            ProjectVendor\StyleGuide\ViewModel\YourSection

                ProjectVendor\StyleGuide\Model\Section\YourSection

```

Notice the "sortOrder" attribute of "sections" array. Thanks to it you can position your custom section towards already created sections.

When that's done, you need to create PHTML template file for your section, defined in DI XML file. For our example it should be located at `view/frontend/teplates/section/your_section.phtml` of `ProjectVendor_StyleGuide` module. Below you can find a boilerplate.

```

```

If you defined a view model for your section, of course you need to create it in your module. Below you can find a boilerplate.

```

            color_code
            label for visualization
            #000000

                ProjectVendor\StyleGuide\Model\Color\YourThemeName\ColorName

            ProjectVendor\StyleGuide\ViewModel\ColorsProvider\YourThemeName

                ProjectVendor\StyleGuide\Model\Section\Colors\YourThemeName

```

When that's done, you need to add some styles for your color visualization. Place the changes in `Lingaro_StyleGuide/web/css/source/_extend.less` file of your theme. Below you can find a bolierplate.

```
.style-guide-container {
  .style-guide-colors {
    .style-guide-color {
      &.style-guide-color-example {
        .style-guide-color-visualization {
          background-color: @color-color-name;
        }
      }
    }
  }
}
```

Remember to define `@color-color-name` in your theme's variables file.

Clean the following caches to see your changes: config, full\_page.

### 4.7. Adding an icon to icons set

[](#47-adding-an-icon-to-icons-set)

To add an icon to your theme's style guide icons set, you need to create custom icon provider in your `etc/frontend/di.xml` file, add a custom icon item to it and inject the provider into your custom theme view model. Below you can find an example.

```

        icon-name
        icon-css-class

                ProjectVendor\StyleGuide\Model\Icon\YourThemeName\IconName

            ProjectVendor\StyleGuide\ViewModel\IconsProvider\YourThemeName

                ProjectVendor\StyleGuide\Model\Section\Icons\YourThemeName

```

Of course, you need to also add proper styling of `.icon-css-class` in your theme.

Clean the following caches to see your changes: config, full\_page.

5. Magento versions supported
-----------------------------

[](#5-magento-versions-supported)

Currently Style Guide module supports the following Magento versions:

- 2.4.x

6. Screenshots
--------------

[](#6-screenshots)

### 6.1. Style Guide applied on Luma theme

[](#61-style-guide-applied-on-luma-theme)

[![Style Guide applied on Luma theme](docs/img/screenshot-luma.png "Style Guide applied on Luma theme")](docs/img/screenshot-luma.png)

### 6.2. Style Guide applied and customized for exemplary project theme

[](#62-style-guide-applied-and-customized-for-exemplary-project-theme)

[![Style Guide applied and customized for exemplary project theme](docs/img/screenshot-custom.png "Style Guide applied and customized for exemplary project theme")](docs/img/screenshot-custom.png)

7. Skeleton integration
-----------------------

[](#7-skeleton-integration)

You can automatically set up Lingaro Skeleton for module development. To do so, copy `Makefile.dist` to `Makefile` and fill in `SKELETON` variable with URL to Skeleton's GIT repository. Then, run `make`. This will set up a new Skeleton project in your current root directory and copy module files to `source/packages/module-style-guide`. To run a project, simply run `make up`.

###  Health Score

35

—

LowBetter than 79% of packages

Maintenance16

Infrequent updates — may be unmaintained

Popularity31

Limited adoption so far

Community16

Small or concentrated contributor base

Maturity64

Established project with proven stability

 Bus Factor1

Top contributor holds 60% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~270 days

Total

4

Last Release

1073d ago

PHP version history (3 changes)1.0.1PHP ~7.4.0

1.0.3PHP ~7.4.0 || ~8.1.0

1.0.4PHP ^7.4 || ^8.1

### Community

Maintainers

![](https://www.gravatar.com/avatar/13911a5750ce8b70677c6792e103f7fbb14670a9c0463f43000acb6472707080?d=identicon)[lingaro](/maintainers/lingaro)

![](https://www.gravatar.com/avatar/88e52d1984a4a5089d35d43dc0479bd58d29cedd17d531b90607c8252813ef7b?d=identicon)[pavlo.vasheniuk](/maintainers/pavlo.vasheniuk)

---

Top Contributors

[![aliasgarbharmallingaro](https://avatars.githubusercontent.com/u/213045156?v=4)](https://github.com/aliasgarbharmallingaro "aliasgarbharmallingaro (6 commits)")[![michalbiarda](https://avatars.githubusercontent.com/u/1135380?v=4)](https://github.com/michalbiarda "michalbiarda (3 commits)")[![chajr](https://avatars.githubusercontent.com/u/1511381?v=4)](https://github.com/chajr "chajr (1 commits)")

### Embed Badge

![Health badge](/badges/orba-magento2-module-style-guide/health.svg)

```
[![Health](https://phpackages.com/badges/orba-magento2-module-style-guide/health.svg)](https://phpackages.com/packages/orba-magento2-module-style-guide)
```

###  Alternatives

[baldwin/magento2-module-url-data-integrity-checker

Magento 2 module which can find potential url related problems in your catalog data

281773.3k](/packages/baldwin-magento2-module-url-data-integrity-checker)[dotdigital/dotdigital-magento2-extension

Dotdigital for Magento 2

50374.2k18](/packages/dotdigital-dotdigital-magento2-extension)[swissup/module-marketplace

One-Click modules and themes downloader/installer

18383.8k2](/packages/swissup-module-marketplace)[pagbank/payment-magento

PagBank - Payment for Magento and Adobe

2128.3k7](/packages/pagbank-payment-magento)[graycore/magento2-graphql-introspection-cache

1015.2k](/packages/graycore-magento2-graphql-introspection-cache)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)