Lark - Configuration


  1. Intoduction
  2. Theme Configuration
  3. Environments

Introduction

Within Lark, there are a few files in which require configuration to be able to make use of the dynamic capabilities.

Theme Configuration:

Font sizes:

Within the theme configuration file, font sizes can be defined. The defined values and keys are customisable and can be changed at any point during the development cycle.

Here is an example of how a <h1> tag can be defined and used in real life scenarios:

// web/app/themes/lark-child/config/theme.php

return [

    // ...

    'fonts' => [
        'h1' => [
            'mobile' => [
                'size' => 'text-30',
                'margin' => 'mb-30',
                'font' => 'font-cardo font-weight-bold',
            ],
            'desktop' => [
                'size' => 'md:text-44',
            ],
        ],
    ],

];

Usage:

If you're working with Flexible Content Blocks then it's best to use the partial, however any other file, you may want to use the component. The helper is also an option but it's not recommended to keep consistency.

{{-- web/app/themes/lark-child/resources/views/flexible/partials/heading.blade.php --}}
{{-- Flexible Content Block partial --}}
@include('flexible.partials.heading', [
  'overrideSize' => 'h1',
  'default' => 'h1',
])

{{-- web/app/themes/lark-child/resources/views/components/heading.blade.php --}}
{{-- custom component --}}
<x-heading size="h1">
  {{ __('Useful links') }}
</x-heading>

{{-- custom helper directly --}}
<h1 class="{{ headingSize('h1', ['mobile.size' => 'text-25']) }}">
  {{ __('Useful links') }}
</h1>

Environments:

When switching between different development environments, please remember to change your WP_ENV variable in the .env file. You can find a list of all available environment within the config/environments directory:

project-root
│   .env
│   .env.example
└───config
│   └───environments
│       │   development.php
│       │   local.php
│       │   production.php
└───public -> web
WP_ENV=local

Please continue to the next step - flexible