ttskch/bs4-form-theme-adjuster-bundle

dev-master 2018-11-09 04:32 UTC

Requires

• php: >=5.5.9|^7.1.3
• symfony/framework-bundle: ^3.4|^4.0
• symfony/twig-bundle: ^3.4|^4.0

MIT

• symfony
• bootstrap4
• form theme

README

	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.

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