PHPackages thanhhua/magento2-basic-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. thanhhua/magento2-basic-style-guide ActiveMagento2-module thanhhua/magento2-basic-style-guide =================================== Magento 2 Basic Style Guide 1.0.1(1y ago)08MITHTMLPHP ^7.4 || ^8.1 Since Jun 10Pushed 1y ago1 watchersCompare [ Source](https://github.com/HuaZilly/Magento2StyleGuide)[ Packagist](https://packagist.org/packages/thanhhua/magento2-basic-style-guide)[ RSS](/packages/thanhhua-magento2-basic-style-guide/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (1)Dependencies (3)Versions (3)Used By (0) Magento 2 Basic Guide Module ============================ [](#magento-2-basic-guide-module) by \[Thanh Hua\] 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 includes: - All elements follows core theme - Generic blocks, widgets and HTML elements. - 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. 2. Installation --------------- [](#2-installation) The recommended way to install this package is through [Composer](https://getcomposer.org/). ``` composer require thanhhua/magento2-basic-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 `ThanhHua\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. ``` ``` `ThanhHua\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: `ThanhHua_StyleGuide/layout/thanhhua_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 `ThanhHua_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 thanhhua 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 25 — LowBetter than 37% of packages Maintenance32 Infrequent updates — may be unmaintained Popularity4 Limited adoption so far Community4 Small or concentrated contributor base Maturity50 Maturing project, gaining track record 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 ~0 days Total 2 Last Release 699d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/17e855b47d3731e0df6776110a0ce5eef7354787b0c5ba8955c201d7f713b381?d=identicon)[HuaZilly](/maintainers/HuaZilly) ### Embed Badge ![Health badge](/badges/thanhhua-magento2-basic-style-guide/health.svg) ``` [![Health](https://phpackages.com/badges/thanhhua-magento2-basic-style-guide/health.svg)](https://phpackages.com/packages/thanhhua-magento2-basic-style-guide) ``` ### Alternatives [dotdigital/dotdigital-magento2-extension Dotdigital for Magento 2 50374.2k18](/packages/dotdigital-dotdigital-magento2-extension)[mollie/magento2 Mollie Payment Module for Magento 2 1121.6M10](/packages/mollie-magento2)[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)[pagbank/payment-magento PagBank - Payment for Magento and Adobe 2128.3k7](/packages/pagbank-payment-magento)[fredden/magento2-module-javascript-error-reporting A Magento 2 module which captures JavaScript errors for later review by website administrators 3138.1k](/packages/fredden-magento2-module-javascript-error-reporting)[opengento/module-category-import-export This module add the capability to import and export the categories from the back-office. 119.1k](/packages/opengento-module-category-import-export) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)