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 values and keys are completely customisable and can be changed at any point during the development cycle.

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

return [

    // ...

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

];
<h1 class="{{ headingSize('h1') }}">
<h1 class="text-30 mb-30 font-cardo font-weight-bold md:text-44">
  This will print all h1 classes.

<h1 class="{{ headingSize('h1', ['mobile.size' => 'text-25']) }}">
<h1 class="text-25 mb-30 font-cardo font-weight-bold md:text-44">
  This will print all h1 classes and override the mobile size.
</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