1. Go to this page and download the library: Download haariga/craft-gonzo library. Choose the download type require.
2. Extract the ZIP file and open the index.php.
3. Add this code to the index.php.
<?php
require_once('vendor/autoload.php');
/* Start to develop here. Best regards https://php-download.com/ */
haariga / craft-gonzo example snippets
return [
// The folders that are visible within the library.
// Currently we can display just folder one level deep in your templates folder
"compFolders" => [
"_atoms",
"_molecules",
"_organisms",
"_embeds",
"_views"
],
// The different buttons to resize the iFrame.
// It's up to you to motifie this sizes
"mqButtons" => [
"min" => "320px",
"xs" => "400px",
"s" => "600px",
"m" => "800px",
"l" => "1000px",
"max" => "1440px",
"fluid" => "100vw"
],
// The different component statusses for your components
// Create your own or start with the following
"compStatus" => [
0 => ["name" => "wip", "color" => "#FF9800"],
1 => ["name" => "review", "color" => "#369BF4"],
2 => ["name" => "done", "color" => "#4CAF50"],
3 => ["name" => "discarded", "color" => "#F44336"],
],
// You can configure custom pages for this plugin
"pages" => [
'typography' => [
'label' => 'Typography',
'options' => [...]
],
'colors' => [
'label' => 'Colors',
'options' => [...],
],
];
// Describe your component
$componentMeta = [
'title' => 'sampleComponent',
'status' => 'wip',
'visible' => true,
'type' => 'atom',
'path' => '_atoms/sampleComponent/',
'description' => 'sampleComponent Description'
];
$defaultVariant = [
'title' => 'sampleComponent Variant Title',
'status' => '', // if empty the global status is used
'description' => 'sampleComponent Variant Description'
];
return [
'meta' => array_merge($componentMeta, []),
];
// Describe your component
$componentMeta = [
'title' => 'Headline',
'status' => 'done',
'visible' => true,
'type' => 'atom',
'path' => '_atoms/headline/',
'description' => 'This area the global / default Headline styles.'
];
// That's your default Variant. When you need just a single
// Variant you can describe it all here.
$defaultVariant = [
'title' => 'Headline H1',
'status' => '',
'description' => 'This is a H1 Headline.',
'cn' => 'a-headline',
'modifiers' => [],
'customClasses' => [],
'data' => [],
'js' => null,
'waypoint' => null,
'waypointAni' => null,
'text' => 'The quick brown fox jumps over the lazy dog.',
'size' => 'h1'
];
// When you need more as one variant this part is your friend.
// You can add endless variants.
return [
'meta' => array_merge($componentMeta, []),
'variants' => [
'headline' => array_merge($defaultVariant, []),
'headline--h2' => array_merge($defaultVariant, [
'title' => 'Headline H2',
'description' => 'This is a H2 Headline.',
'size' => 'h2',
]),
'headline--h3' => array_merge($defaultVariant, [
'title' => 'Headline H3',
'description' => 'This is a H3 Headline.',
'size' => 'h3',
]),
'headline--h4' => array_merge($defaultVariant, [
'title' => 'Headline H4',
'description' => 'This is a H4 Headline.',
'size' => 'h4',
]),
'headline--h5' => array_merge($defaultVariant, [
'title' => 'Headline H5',
'description' => 'This is a H5 Headline.',
'size' => 'h5',
]),
'headline--h6' => array_merge($defaultVariant, [
'title' => 'Headline H6',
'description' => 'This is a H6 Headline.',
'size' => 'h6',
]),
]
];