{"id":33993468,"url":"https://github.com/haariga/craft-gonzo","last_synced_at":"2025-12-13T07:21:35.126Z","repository":{"id":29209537,"uuid":"115894029","full_name":"haariga/craft-gonzo","owner":"haariga","description":null,"archived":false,"fork":false,"pushed_at":"2023-11-10T16:11:15.000Z","size":5286,"stargazers_count":12,"open_issues_count":11,"forks_count":1,"subscribers_count":3,"default_branch":"develop","last_synced_at":"2025-10-14T09:23:59.685Z","etag":null,"topics":["craft-plugin","craftcms","craftcms-plugin","pattern-library"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/haariga.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-01T01:41:23.000Z","updated_at":"2024-01-11T20:44:31.000Z","dependencies_parsed_at":"2023-01-14T14:30:51.122Z","dependency_job_id":null,"html_url":"https://github.com/haariga/craft-gonzo","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/haariga/craft-gonzo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haariga%2Fcraft-gonzo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haariga%2Fcraft-gonzo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haariga%2Fcraft-gonzo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haariga%2Fcraft-gonzo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/haariga","download_url":"https://codeload.github.com/haariga/craft-gonzo/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haariga%2Fcraft-gonzo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":27701946,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-13T02:00:09.769Z","response_time":147,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["craft-plugin","craftcms","craftcms-plugin","pattern-library"],"created_at":"2025-12-13T07:21:30.422Z","updated_at":"2025-12-13T07:21:35.115Z","avatar_url":"https://github.com/haariga.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Gonzo — Pattern Library\n\n\n![Screenshot](resources/img/plugin-logo.png)\n\n```\n*** BETA **********\n\n!IMPORTANT NOTE!\nThis plugin is currently under development and requires a special structure in your templates folder to be used.\nPlease scroll to the Structure example to learn more.\nIf you have any recommendations on how to improve it please create a ticket on GitHub.\n\nThank you very much\nDavid \u0026 Martin\n\n*******************\n```\n\n## Demo\n\nYou can this plugin in action here:\nhttps://craft3.baukasten.io/patternlib#/\n\n## Description\n\nGonzo is the Pattern Library with less effort. You've just created config files to bring your components in the library. \nIt's quite simple. You need no third party tool to have a pattern library. Just write your code as usual but start not\nwith dummy hard written content in your templates. You also need entries in the backend (just some images) to fill your components.\nEach component have an config.php file and here is all the magic. It's a huge advantage to use gonzo. \n\nThe developer can create components decoupled from templates or whole pages. Focus on the component and build all variants \nfor your specific component. When you are done set the status to **review** or something else and give it back to the designer to\nget an approval. The whole team can see the component status and it's clear for all what's done and what's on development. \n\nA second huge benefit for the team is that you can see all you components on one place. What's not in the library does not exist.\nIt's really clear someone can check which buttons are currently on the project. \n\nThird benefit is you can discuss about specific components with the client without lose the focus. \n\nIt's a living library and if your project grows your library will grow too!\n\n---\n\n**Table of contents**\n\n* [Requirements](#requirements)\n* [Installation](#installation)\n* [Configuration](#configuration)\n* [Screenshots](#screenshots)\n* [Folder Structure](#structure)\n* [Example](#example)\n* [Pages](#pages)\n* [Roadmap](#roadmap)\n\n---\n\n\n## Requirements\nThis plugin requires Craft CMS 3.0.0 or later.\n\n## Installation\n### Install via composer\n\n```bash\ncomposer require haariga/craft-gonzo\n```\n\n### Install via Admin Control Panel\nGo to the Plugin Store and search for: `Gonzo` and install it. \n\n\n## Configuration\n\n### Plugin Config File\nYou must create a `craft-gonzo.php` file in your config folder. \nHere is a basic config file you can start with. In the `_examples` folder is a more complex one to create additional pages\nand stuff like this.\n\n```php\n\u003c?php\nreturn [\n\t // The folders that are visible within the library.\n\t // Currently we can display just folder one level deep in your templates folder\n    \"compFolders\" =\u003e [\n        \"_atoms\",\n        \"_molecules\",\n        \"_organisms\",\n        \"_embeds\",\n        \"_views\"\n    ],\n    // The different buttons to resize the iFrame. \n    // It's up to you to motifie this sizes\n    \"mqButtons\" =\u003e [\n        \"min\" =\u003e \"320px\",\n        \"xs\" =\u003e \"400px\",\n        \"s\" =\u003e \"600px\",\n        \"m\" =\u003e \"800px\",\n        \"l\" =\u003e \"1000px\",\n        \"max\" =\u003e \"1440px\",\n        \"fluid\" =\u003e \"100vw\"\n    ],\n    // The different component statusses for your components\n    // Create your own or start with the following\n    \"compStatus\" =\u003e [\n        0 =\u003e [\"name\" =\u003e \"wip\", \"color\" =\u003e \"#FF9800\"],\n        1 =\u003e [\"name\" =\u003e \"review\", \"color\" =\u003e \"#369BF4\"],\n        2 =\u003e [\"name\" =\u003e \"done\", \"color\" =\u003e \"#4CAF50\"],\n        3 =\u003e [\"name\" =\u003e \"discarded\", \"color\" =\u003e \"#F44336\"],\n    ],\n    // You can configure custom pages for this plugin\n    \"pages\" =\u003e [\n\t    'typography' =\u003e [\n\t\t    'label' =\u003e 'Typography',\n\t\t    'options' =\u003e [...]\n\t\t\t],\n\t\t\t'colors' =\u003e [\n\t\t\t\t'label' =\u003e 'Colors',\n\t\t\t\t'options' =\u003e [...],\n    ],\n];\n```\n\n### Component Config File\nThis are the minimum settings that we can display at the moment. A more complex sample is in the `_examples` folder.\n\n```php\n\u003c?php\n// Describe your component\n$componentMeta = [\n    'title' =\u003e 'sampleComponent',\n    'status' =\u003e 'wip',\n    'visible' =\u003e true,\n    'type' =\u003e 'atom',\n    'path' =\u003e '_atoms/sampleComponent/',\n    'description' =\u003e 'sampleComponent Description'\n];\n\n$defaultVariant = [\n    'title' =\u003e 'sampleComponent Variant Title',\n    'status' =\u003e '', // if empty the global status is used\n    'description' =\u003e 'sampleComponent Variant Description'\n];\n\nreturn [\n    'meta' =\u003e array_merge($componentMeta, []),\n];\n```\n\n\n\n## Screenshots\n\n### Components\n\n#### Headline\n\n![Screenshot](resources/img/craft-gonzo-screenshot-01.png)\n\n#### Contact Form\n\n![Screenshot](resources/img/craft-gonzo-screenshot-02.png)\n\n#### Image Grid\n\n![Screenshot](resources/img/craft-gonzo-screenshot-03.png)\n\n### Typography\n\n#### Headings\n\n![Screenshot](resources/img/craft-gonzo-screenshot-typo-01.png)\n\n#### Glyphs\n\n![Screenshot](resources/img/craft-gonzo-screenshot-typo-02.png)\n\n### Colors\n\n#### Branding Colors\n\n![Screenshot](resources/img/craft-gonzo-screenshot-colors-01.png)\n\n#### Grayscales\n\n![Screenshot](resources/img/craft-gonzo-screenshot-colors-02.png)\n\n\n## Structure\nThe plugin currently works best with a maximum of 2 levels\n```\n├── _atoms\n│   ├── button\n│   │   ├── _button.js\n│   │   ├── _button.scss\n│   │   ├── _button.{twig|html}\n│   │   └── config.php\n│   ├── headline\n│   │   ├── _headline.js\n│   │   ├── _headline.scss\n│   │   ├── _headline.{twig|html}\n│   │   └── config.php\n│   ├── image\n│   │   ├── _image.js\n│   │   ├── _image.scss\n│   │   ├── _image.{twig|html}\n│   │   └── config.php\n├── _molecules\n│   ├── card\n│   │   ├── _script.js\n│   │   ├── _style.scss\n│   │   ├── _template.{twig|html}\n│   │   └── config.php\n├── _organisms\n│   ├── accordion\n│   │   ├── _script.js\n│   │   ├── _style.scss\n│   │   ├── _template.{twig|html}\n│   │   └── config.php\n│   ├── cards\n│   │   ├── _script.js\n│   │   ├── _style.scss\n│   │   ├── _template.{twig|html}\n│   │   └── config.php\n```\n\nYou can have other folders and files in your templates folder but this is a tested and used structure.\nYou should set the `\"compFolders\"` setting to something like this:\n```\n\"compFolders\" =\u003e [\n\t\"_atoms\",\n\t\"_molecules\",\n\t\"_organisms\",\n]\n```\nAll filenames except the config.php don't really matter, the plugin searches for `*.twig`, `*.scss` and `*.js` files.\n\n## Example\n### Headline Component\n\nHere is a real world example. It's a simple headlone component. In this case, it's an `atom`.\nOverall we have four files. `_template.html` is our Template file with all the template logic inside.\n`config.php` is the core file to render the module in the pattern lib. Here is the dummy content to fill\nthe component. Here are also the different variants to define. In this case **H1**, **H2** etc. Third file is the `_style.scss` file \nwhere we can style our component. Last file ist the `_script.js` file when the component needs some Javascript code.  \n\n\n#### _template.html\n\n```twig\n{# @var craft \\craft\\web\\twig\\variables\\CraftVariable #}\n{# @var entry \\craft\\elements\\Entry #}\n{#\n  a-headline\n  ------------------------------------------------------------\n#}\n\n{# -- Set Defaults -- #}\n{% set defaults = {\n  cn: 'a-headline',\n  modifiers: [],\n  customClasses: [],\n  data: {},\n  js: null,\n  text: null,\n  size: 'h2'\n} %}\n\n{# -- Merge Default with Options -- #}\n{% set opt = opt is defined ? defaults|merge(opt) : defaults %}\n\n{# -- Modul -- #}\n{% if opt.text %}\n  \u003c{{ opt.size }} class=\"{{ opt.cn }}\n              {% for modifier in opt.modifiers %}\n                {{ modifier | length ? '  ' ~ opt.cn ~ '--' ~ modifier }}\n              {% endfor %}\n              {% for customClass in opt.customClasses %}\n                {{ customClass | length ? '  ' ~ customClass }}\n              {% endfor %}  {{ opt.js ? opt.cn|replace({ 'a-' : 'js-' }) : '' }}\"\n              {% for key, value in opt.data %}\n                {{ 'data-' ~ key ~ '=' ~ value }}\n              {% endfor %}\u003e\n    {{ opt.text }}\n  \u003c/{{ opt.size }}\u003e\n{% endif %}\n\n```\n\n#### config.php\n\n```php\n\u003c?php\n// Describe your component\n$componentMeta = [\n    'title' =\u003e 'Headline',\n    'status' =\u003e 'done',\n    'visible' =\u003e true,\n    'type' =\u003e 'atom',\n    'path' =\u003e '_atoms/headline/',\n    'description' =\u003e 'This area the global / default Headline styles.'\n];\n\n// That's your default Variant. When you need just a single\n// Variant you can describe it all here.\n$defaultVariant = [\n    'title' =\u003e 'Headline H1',\n    'status' =\u003e '',\n    'description' =\u003e 'This is a H1 Headline.',\n    'cn' =\u003e 'a-headline',\n    'modifiers' =\u003e [],\n    'customClasses' =\u003e [],\n    'data' =\u003e [],\n    'js' =\u003e null,\n    'waypoint' =\u003e null,\n    'waypointAni' =\u003e null,\n    'text' =\u003e 'The quick brown fox jumps over the lazy dog.',\n    'size' =\u003e 'h1'\n];\n\n// When you need more as one variant this part is your friend.\n// You can add endless variants.\nreturn [\n    'meta' =\u003e array_merge($componentMeta, []),\n    'variants' =\u003e [\n        'headline' =\u003e array_merge($defaultVariant, []),\n        'headline--h2' =\u003e array_merge($defaultVariant, [\n            'title' =\u003e 'Headline H2',\n            'description' =\u003e 'This is a H2 Headline.',\n            'size' =\u003e 'h2',\n        ]),\n        'headline--h3' =\u003e array_merge($defaultVariant, [\n            'title' =\u003e 'Headline H3',\n            'description' =\u003e 'This is a H3 Headline.',\n            'size' =\u003e 'h3',\n        ]),\n        'headline--h4' =\u003e array_merge($defaultVariant, [\n            'title' =\u003e 'Headline H4',\n            'description' =\u003e 'This is a H4 Headline.',\n            'size' =\u003e 'h4',\n        ]),\n        'headline--h5' =\u003e array_merge($defaultVariant, [\n            'title' =\u003e 'Headline H5',\n            'description' =\u003e 'This is a H5 Headline.',\n            'size' =\u003e 'h5',\n        ]),\n        'headline--h6' =\u003e array_merge($defaultVariant, [\n            'title' =\u003e 'Headline H6',\n            'description' =\u003e 'This is a H6 Headline.',\n            'size' =\u003e 'h6',\n        ]),\n    ]\n];\n\n```\n\n\n#### _style.scss\n\n```scss\n\n/*\n |--------------------------------------------------------------------------\n |  a-headline\n |--------------------------------------------------------------------------\n */\n\n// Modul\n.a-headline {\n  $root: \u0026;\n  width: 100%;\n\n  + .a-subline {\n    margin-top: s(2);\n  }\n}\n\n// Modul Modifiers Example\n.a-headline--modifier {\n  .a-headline__block {\n    // Styles here\n  }\n}\n```\n\n#### _script.js\n\n```js\n/**\n * headline\n */\n\nconst headline = {\n    cfg:  {\n        name: `headline`\n    },\n\n    log(msg) {\n        console.log(msg)\n    },\n\n    init() {\n        this.log(`Init: ${this.cfg.name}`)\n    }\n}\n\nexport default headline\n\n\n```\n\n## Pages\nYou can create custom pages for example a color page where you can show Colors used on the site.\n\nTo create a custom page just add it to the `pages` option and create a template in `patternlib/pages` the `key` should be the same as the filename for example `colors` -\u003e `colors.{twig|html}`.\nEvery page should have a label key which is used for the navigation and an options key where you can define options you can use in this template.\n\n## Roadmap\nSome things to do, and ideas for potential features:\n\n* Release it\n\nBrought to you by [Martin Herweg](https://martinherweg.de) \u0026 [David Hellmann](https://davidhellmann.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaariga%2Fcraft-gonzo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhaariga%2Fcraft-gonzo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaariga%2Fcraft-gonzo/lists"}