Download the PHP package haariga/craft-gonzo without Composer

Gonzo — Pattern Library

Demo

You can this plugin in action here: https://craft3.baukasten.io/patternlib#/

Description

Gonzo is the Pattern Library with less effort. You've just created config files to bring your components in the library. It's quite simple. You need no third party tool to have a pattern library. Just write your code as usual but start not with dummy hard written content in your templates. You also need entries in the backend (just some images) to fill your components. Each component have an config.php file and here is all the magic. It's a huge advantage to use gonzo.

The developer can create components decoupled from templates or whole pages. Focus on the component and build all variants for your specific component. When you are done set the status to review or something else and give it back to the designer to get an approval. The whole team can see the component status and it's clear for all what's done and what's on development.

A 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. It's really clear someone can check which buttons are currently on the project.

Third benefit is you can discuss about specific components with the client without lose the focus.

It's a living library and if your project grows your library will grow too!

Table of contents

• Requirements
• Installation
• Configuration
• Screenshots
• Folder Structure
• Example
• Pages
• Roadmap

Requirements

This plugin requires Craft CMS 3.0.0 or later.

Installation

Install via composer

Install via Admin Control Panel

Go to the Plugin Store and search for: Gonzo and install it.

Configuration

Plugin Config File

You must create a craft-gonzo.php file in your config folder. Here is a basic config file you can start with. In the _examples folder is a more complex one to create additional pages and stuff like this.

Component Config File

This are the minimum settings that we can display at the moment. A more complex sample is in the _examples folder.

Screenshots

Components

Headline

Contact Form

Image Grid

Typography

Headings

Glyphs

Colors

Branding Colors

Grayscales

Structure

The plugin currently works best with a maximum of 2 levels

You can have other folders and files in your templates folder but this is a tested and used structure. You should set the "compFolders" setting to something like this:

All filenames except the config.php don't really matter, the plugin searches for *.twig, *.scss and *.js files.

Example

Headline Component

Here is a real world example. It's a simple headlone component. In this case, it's an atom. Overall we have four files. _template.html is our Template file with all the template logic inside. config.php is the core file to render the module in the pattern lib. Here is the dummy content to fill the component. Here are also the different variants to define. In this case H1, H2 etc. Third file is the _style.scss file where we can style our component. Last file ist the _script.js file when the component needs some Javascript code.

_template.html

config.php

_style.scss

_script.js

Pages

You can create custom pages for example a color page where you can show Colors used on the site.

To 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 -> colors.{twig|html}. Every 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.

Roadmap

Some things to do, and ideas for potential features:

• Release it

Brought to you by Martin Herweg & David Hellmann