Introducing the Bladewind config file

[mkocansey]

The project I was working on while building the initial version of Bladewind influenced a lot of the default styling decisions I made. Rounded buttons, uppercasing table headings and button text, using blue as the default primary colour, very dark colours for dark mode etc.

I recently started a new project, pulled in Bladewind and found myself typing several attributes just to get the primary button I needed.

<x-bladewind::button show_focus_ring="false" uppercasing="false" radius="medium" size="small">
    Submit
</x-bladewind::button>

Imagine having to type this every time I needed a button. I'd go crazy before the project was done. I had to save myself and fast.

Step into the config file

The solution was to follow the Laravel way and introduce a configuration file that had all the defaults I needed unless I explicitly added an attribute on the component to overwrite it. Interestingly, it was a simple fix and a good addition to the library.

1. Publish the config file and it will be added to your list of config files in your Laravel project.

php artisan vendor:publish --tag=bladewind-config --force

2. You will now have a config file in project-root > config > bladewind.php. The file contains defaults for all the Bladewind components so you won't need to be defining values from scratch. You will mostly be modifying values to suit your taste.

For example, the button section of the file looks something like below

...
    /*
    |--------------------------------------------------------------------------
    | Button component  [ config/bladewind.php ]
    |--------------------------------------------------------------------------
    */
    'button' => [
        'size' => 'regular',
        'radius' => 'small',
        'show_focus_ring' => true,
        'tag' => 'button',
        'icon_right' => false,
        'outline' => false,
        'border_width' => 2,
        'ring_width' => '',
        'uppercasing' => true,
        // define default attributes for all circular buttons
        'circle' => [
            'size' => 'regular',
        ]
    ],
...

In my case, for the project I told you about that almost drove me nuts, I will modify my values to whats below

...
    /*
    |--------------------------------------------------------------------------
    | Button component
    |--------------------------------------------------------------------------
    */
    'button' => [
        'size' => 'small', // I changed this
        'radius' => 'medium', // I changed this
        'show_focus_ring' => false, // I changed this
        'tag' => 'button',
        'icon_right' => false,
        'outline' => false,
        'border_width' => 2,
        'ring_width' => '',
        'uppercasing' => false, // I changed this
        // define default attributes for all circular buttons
        'circle' => [
            'size' => 'regular',
        ]
    ],
...

That is it 💯 !

I hope you find the config file useful like I did.