{"id":14983989,"url":"https://github.com/dsmink/twig-bulma-form-theme-bundle","last_synced_at":"2025-10-09T10:36:52.520Z","repository":{"id":49900931,"uuid":"82655778","full_name":"dsmink/twig-bulma-form-theme-bundle","owner":"dsmink","description":"A Twig Form Theme for Bulma 0.3.x for use with the Symfony 2.8 / 3.x framework","archived":false,"fork":false,"pushed_at":"2023-05-18T11:30:21.000Z","size":74,"stargazers_count":31,"open_issues_count":0,"forks_count":13,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-09-20T16:24:05.209Z","etag":null,"topics":["bulma-css","forms","symfony","twig"],"latest_commit_sha":null,"homepage":null,"language":"Twig","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dsmink.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-21T08:35:58.000Z","updated_at":"2024-10-28T21:00:49.000Z","dependencies_parsed_at":"2024-09-24T15:27:26.589Z","dependency_job_id":"0998a102-2030-4786-b3ab-a2b18f03d3f2","html_url":"https://github.com/dsmink/twig-bulma-form-theme-bundle","commit_stats":{"total_commits":31,"total_committers":9,"mean_commits":"3.4444444444444446","dds":0.6129032258064516,"last_synced_commit":"f0346dd0926d004e739fe71ac3a28bef1fa670dd"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dsmink/twig-bulma-form-theme-bundle","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsmink%2Ftwig-bulma-form-theme-bundle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsmink%2Ftwig-bulma-form-theme-bundle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsmink%2Ftwig-bulma-form-theme-bundle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsmink%2Ftwig-bulma-form-theme-bundle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dsmink","download_url":"https://codeload.github.com/dsmink/twig-bulma-form-theme-bundle/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsmink%2Ftwig-bulma-form-theme-bundle/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279001271,"owners_count":26083040,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bulma-css","forms","symfony","twig"],"created_at":"2024-09-24T14:08:17.186Z","updated_at":"2025-10-09T10:36:52.493Z","avatar_url":"https://github.com/dsmink.png","language":"Twig","funding_links":[],"categories":[],"sub_categories":[],"readme":"# twig-bulma-form-theme\nA Twig 3.x Form Theme for Bulma 0.9.x for use with Symfony 5/6 framework\n\n---\n\n# Twig (3.x) Bulma (v0.9.x) Form theme\n\nBulma is a modern CSS framework based on Flexbox. This form theme was created for use with the Twig Template engine. Twig is a modern template engine for PHP.\n\nThis form theme was built to work with Twig in combination with the Symfony Framework for websites built on top of the Bulma CSS framework.\n\n## Index\n* [How to use the form theme](#how-to-use-the-form-theme)\n* [Icon support](#icon-support)\n* [Examples](#examples)\n* [Sources](#sources)\n\n### How to use the form theme:\n\nThe easiest way to make use of the form theme in Symfony is to set this form theme in the configuration file. Have a look at the [Symfony documentation](https://symfony.com/doc/current/form/form_customization.html#making-application-wide-customizations). Also example files are provided in this repository.\n\n### Icon support:\n\nThe theme also supports the use of icons. Bulma comes with support for the Font Awesome icon toolkit. It's realy easy to make a form widget support these themes with Symfony Form Type Extensions. An example Form Type Extension is provided within the examples directory in this repository.\n\n## Examples\n\n### widget sizes:\n\nWidget size can be set by just using a classname. The following example is for use with the Symfony Form Type.\n\n```php\n$builder-\u003eadd('firstname', TextType::class, [\n    'attr' =\u003e [\n        'class' =\u003e 'is-large'\n    ],\n    ...\n]);\n```\n\n![Selectbox size example](https://raw.githubusercontent.com/dsmink/twig-bulma-form-theme/master/doc/images/sizes.png)\n\n\u003e **NOTE**\n\u003e\n\u003e The default size needs no extra class. Suppoted sizes are **is-small**, **is-medium** and **is-large**.\n\n### Icons:\n\nThe following example is for use with the Symfony Form Type. This example is based on the Form Type Extension provided in the documentation examples directory.\n\n```php\n$builder\n    // Username widget with user icon\n    -\u003eadd('username', TextType::class, [\n\t    'bulma_icon' =\u003e [\n            'icon' =\u003e 'user',\n            'position' =\u003e 'left',\n        ],\n        ...\n    ])\n    // Password widget with lock icon\n    -\u003eadd('password', PasswordType::class, [\n        'bulma_icon' =\u003e [\n            'icon' =\u003e 'lock',\n            'position' =\u003e 'left',\n        ],\n        ...\n    ])\n;\n```\n\n![Username and password widgets with icons](https://raw.githubusercontent.com/dsmink/twig-bulma-form-theme/master/doc/images/username_password.png)\n\n\u003e **Need more icons?**\n\u003e\n\u003e Have a look at the bulma.io and fontawesome.io website to find out which icons are available and how to implement them.\n\n### Dropdown with ChoiceType:\n\nThe following example is for use with the Symfony Form Type 'ChoiceType'\n\n```php\n-\u003eadd('checkbox_dropdown', Type\\ChoiceType::class, [\n    'choices' =\u003e [\n        // choice groups are supported (including 'group_by' method)\n        'Group header 1' =\u003e [\n            'Checkbox 1' =\u003e 1,\n            'Checkbox 2' =\u003e 2,\n        ],\n        'Group header 2' =\u003e [\n            'Checkbox 3' =\u003e 3,\n            'Checkbox 4' =\u003e 4,\n        ],\n    ],\n    'label' =\u003e false, // = don't render top label (trigger button label is always rendered)\n    'expanded' =\u003e true, // required to use dropdown\n    'multiple' =\u003e true, // true = checkboxes, false = radio buttons\n    'attr' =\u003e [\n        'dropdown' =\u003e true, // required to use dropdown\n        'dropdown_arrow_icon' =\u003e false, // default to true\n        'class' =\u003e 'is-rounded is-outlined', // added to dropdown trigger button\n    ],\n])\n```\n\nRender it inside a form:\n\n```html\n\u003c!-- easiest way to render --\u003e\n{{ form_row(form.checkbox_dropdown) }}\n\n\u003c!-- if you need to customize a little bit --\u003e\n\u003cdiv class=\"field\"\u003e\n    \u003c!-- remove form_label() if you don't want the top label --\u003e\n    \u003c!-- but still a customizable label inside dropdown trigger button --\u003e\n    {{ form_label(form.checkbox_dropdown) }}\n    \u003cdiv class=\"dropdown\"\u003e\n        {{ form_widget(form.checkbox_dropdown) }}\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n![Dropdown with ChoiceType](doc/images/choice_type_dropdown.png)\n\nAdd this styling if you need a scrollbar on your dropdowns\n\n```css\n.dropdown-content {\n  max-height: 25rem;\n  overflow-y: auto;\n}\n```\n\n## Sources\n\nHave a look at the following websites and their documentation for more information about this subject.\n\n* The [Bulma](http://bulma.io/) CSS framework website;\n* The [Font Awesome](http://fontawesome.io/) font and CSS toolkit;\n* The [Twig](http://twig.symfony.com/) Template engine for PHP website;\n* The [Symfony](http://symfony.com/) PHP framework website.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdsmink%2Ftwig-bulma-form-theme-bundle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdsmink%2Ftwig-bulma-form-theme-bundle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdsmink%2Ftwig-bulma-form-theme-bundle/lists"}