ttskch/bs4-form-theme-adjuster-bundle

TtskchBs4FormThemeAdjusterBundle

, _(*1)

	Before	After
Vertical layout
Horizontal layout

Features

• Automatic insertion of required sign (*)
• Appropriate margin for checkbox has checkbox-inline class and radio button has radio-inline class
• Muted placeholder of <select>
• More beautiful submit button

Requirement

• Symfony ^3.4|^4.0

Instalation

1. composer require

$ composer require ttskch/bs4-form-theme-adjuster-bundle:@dev

2. Register with symfony

// config/bundles.php
return [
    // ...
    Ttskch\Bs4FormThemeAdjusterBundle\TtskchBs4FormThemeAdjusterBundle:class => ['all' => true],
];

3. Configure

# config/packages/twig.yaml
twig:
    form_themes:
        - 'ttskch_bootstrap_4_layout.html.twig'
        - 'ttskch_bootstrap_4_horizontal_layout.html.twig'  # to be the default theme

4. Install assets

$ bin/console assets:install --symlink public

5. Add loading assets into your layout

<script src="{{ asset('bundles/ttskchbs4formthemeadjuster/js/form.js') }}"></script>
<link href="{{ asset('bundles/ttskchbs4formthemeadjuster/css/form.css') }}" rel="stylesheet">

If you use webpack (e.g. via symfony/webpack-encore) you can add assets to your app like below., _(*2)

Encore
    // ...
    .createSharedEntry('vendors', [
        'jquery',
        'bootstrap',
        'popper.js',
+       './public/bundles/ttskchbs4formthemeadjuster/js/form.js',
+       './public/bundles/ttskchbs4formthemeadjuster/scss/form.scss',
    ])
    // ...
;

Getting involved

1. Modify following resources
   • Resources/views/Form/*.twig
   • Resources/public/js/form.js
   • Resources/public/scss/form.scss
2. Build scss with npm run build