Lark - Configuration
Introduction
Within Lark, there are a few files in which require configuration to be able to make use of the dynamic capabilities.
Theme Configuration:
- File path:
web/app/themes/lark-child/config/theme.php
- File purpose: share defined variables across all blade views with access by calling the key.
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