包简介

Integrates the features of the responsive framework Foundation, from Zurb, into Symfony2 by providing templates, Twig extensions, services and commands.

README 文档

README

About

DISCONTINUED

This bundle integrates the features of the responsive framework Foundation, from ZURB (thanks guys), into Symfony by providing templates, Twig extensions, services and commands. You can quickly setup a responsive theme for an interface for your project. It will have the "look'n'feel", the responsiveness and the simplicity of Foundation.

BE AWARE: THIS BUNDLE WILL NOT ADD THE FOUNDATION FRAMEWORK BUT RATHER FEATURES FOR SYMFONY TO WORK WITH IT

Demo available here.

Requirements

Symfony 2.7+.
jQuery 2+ a JavaScript library.
Foundation 5+ an advanced responsive framework.
Font Awesome 4+ which comes with 585+ icons.

Installation and configuration

composer require florianbelhomme/flob-foundation-bundle

Then, edit your app/AppKernel.php and add:

class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = [
            ...
            new Flob\Bundle\FoundationBundle\FlobFoundationBundle(),
            ...
        ];
    }
}

You now need to add the libraries to your project.

The easy way to do it (but there are other ways to do so):

<html>
    <head>
        ...
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/normalize.min.css" type="text/css" />
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" type="text/css" />
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css" />
        <link rel="stylesheet" href="{{ asset('bundles/flobfoundation/css/foundationtosymfony.css') }}" type="text/css" />
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
        ...
    </head>
    <body>
        ...
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
        <script type="text/javascript" src="{{ asset('bundles/flobfoundation/js/foundationtosymfony.js') }}"></script>
    </body>
</html>

Your project is ready!

Configuration

This bundle does not theme any elements by default, in case you want to use Foundation on a specific form or bundle.

To automatically theme forms or other elements by default, go into the app/config/config.yml and add at the end:

flob_foundation:
    theme: { form: true, knp_menu: true, knp_paginator: true, pagerfanta: true }

If you want to do specific HTML markup that extends templates of this bundle:

create your template in your bundle
add {% extends 'FlobFoundationBundle:Form:foundation_form_div_layout.html.twig' %} at the top (the form template, for example)
edit the app/config/config.yml:

flob_foundation:
    theme: { form: true, knp_menu: true, knp_paginator: true, pagerfanta: true }
    template:
        form: 'YourBundle:YourFolder:formtemplate.html.twig'
        breadcrumb: 'YourBundle:YourFolder:breadcrumbtemplate.html.twig'
        knp_menu: 'YourBundle:YourFolder:menutemplate.html.twig'
        knp_paginator: 'YourBundle:YourFolder:paginatortemplate.html.twig'
        pagerfanta: 'YourPagerFantaTemplate'

Usage

Theme

However instead of setting it in the configuration, you can theme specific elements using one of these methods:

{# Form #}
{% form_theme yourform 'FlobFoundationBundle:Form:foundation_form_div_layout.html.twig' %}

{# Menu #}
{{ knp_menu_render('yourmenu', {'template' : 'FlobFoundationBundle:Menu:foundation_knp_menu.html.twig'}) }}

{# Pagination with KNP paginator #}
{{ knp_pagination_render(yourpagination, 'FlobFoundationBundle:Pagination:foundation_sliding.html.twig') }}

{# Pagination with PagerFanta (through WhiteOctober bundle) #}
{{ pagerfanta(paginationFanta, 'foundation') }}

Top bar

To create a top bar, just create your KNP Menu, add a route to the root element and set extra options:

$menu = $this->factory->createItem(
    'My website',
    [
        'route' => 'homepage',
        'extras' => ['menu_type' => 'topbar']
    ]
);

Menu entries with icons

You can add an icon before, after or instead of the label. By default the icon will be added before the label. The icon must be the name of one of Font-Awesome, example : "fa-bell-o".

$menu->addChild(
    "Entry",
    [
        'route' => 'route_entry',
        'extras' => [
            'icon' => 'fa-bell-o',
            'icon_position' => 'no-label' # can be 'before', 'after' or 'no-label'
        ]
    ]
);

Breadcrumb

If you want a breadcrumb generated from a KNP Menu add this code in your template :

{{ flob_foundation_breadcrumb_render('yourknpmenu') }}

If you want a specific template :

{{ flob_foundation_breadcrumb_render('yourknpmenu', {'template' : 'YourBundle:YourFolder:breadcrumbtemplate.html.twig') }}

Slider (form field type)

You can now use the slider in your forms.

The slider extend the number field type, so it has the same options. The additional options are :

start : type: integer / default: 0 This specifies the starting point number.
end : type: integer / default: 100 This specifies the highest number in the range.
step : type: integer / default: 1 This specifies the cursor's incremental skip.
vertical : type: boolean / default: false If true, displays the slider vertically instead of horizontally.

This is an example of the field :

$builder->add('My slider', 'slider', ['label' => 'Slider', 'start' => 10, 'end' => 20, 'step' => 2]);

Switch (form field type)

You can now use the switch in your forms.

The switch extend the choice field type, so it have the same options. But you can't set the option "expanded" to false (cannot be a select).

This is an example of the field :

$builder->add('switch_radio', 'switch', ['label' => 'Switch (as radio)', 'choices' => [1 => 'Choice 1', 2 => 'Choice 2', 3 => 'Obi wan kenobi'], 'multiple' => false]);

Button Group (form field type)

You can now use button groups in your forms.

Button groups are button, grouped together by Foundation. This way they are rendered on the same line, instead of all on a different row.

This is an example of the field :

$builder->add(
    'buttons',
    'button_group',
    [
        'label' => 'Buttons group',
        'buttons' => [
            'back' => [
                'type'    => 'button',
                'options' => [
                    'label' => 'Cancel',
                    'attr' => [
                        'class' => 'secondary',
                    ],
                ],
            ],
            'save' => [
                'type'    => 'submit',
                'options' => [
                    'label' => 'Submit',
                ],
            ],
        ],
        'attr' => [
            'class' => 'right',
        ],
    ]
);

In the buttons array, you define the buttons that need to be rendered. All the buttons should be of FormType ButtonType. For the ButtonType, you cannot specify behavior in Symfony. You can change the type to reset , to render a button with type="reset", (a ResetType) but cannot add links.

However, you have various options:

add an onClick tag to the attr array
add a class link, a tag data-url to the attr array and let JavaScript handle it

Button Bar (form field type)

A button bar is a group of button groups, perfect for situations where you want groups of actions that are all related to a similar element or page.

This is an (long :D) example of the field :

$builder->add(
    'button_bar',
    'button_bar',
    [
        'button_groups' => [
            'button_group_first' => [
                'label' => 'Buttons group',
                'buttons' => [
                    'one' => [
                        'type'    => 'submit',
                        'options' => [
                            'label' => 'one',
                        ],
                    ],
                    'two' => [
                        'type'    => 'button',
                        'options' => [
                            'label' => 'two',
                            'attr' => [
                                'class' => 'success',
                            ],
                        ],
                    ],
                    'three' => [
                        'type'    => 'button',
                        'options' => [
                            'label' => 'three',
                            'attr' => [
                                'class' => 'alert',
                            ],
                        ],
                    ],
                ],
                'attr' => [
                    'class' => 'round',
                ],
            ],
            'button_group_second' => [
                'label' => 'Buttons group',
                'buttons' => [
                    'four' => [
                        'type'    => 'button',
                        'options' => [
                            'label' => 'four',
                            'attr' => [
                                'class' => 'disabled',
                            ],
                        ],
                    ],
                    'five' => [
                        'type'    => 'button',
                        'options' => [
                            'label' => 'five',
                            'attr' => [
                                'class' => 'secondary',
                            ],
                        ],
                    ],
                    'six' => [
                        'type'    => 'button',
                        'options' => [
                            'label' => 'six',
                            'attr' => [
                                'class' => 'secondary',
                            ],
                        ],
                    ],
                ],
                'attr' => [
                    'class' => 'radius',
                ],
            ],
        ],
    );

Authors

Florian Belhomme a.k.a Solune
The Community Contributors

Contribute

Contributions to the package are always welcome! Feedback is great.

Feel free to fork the project and make a PR. You can also help the others, look in the issues.

Support

If you are having problems, fill an issue.

License

This bundle is licensed under the MIT License

florianbelhomme/flob-foundation-bundle 适用场景与选型建议

florianbelhomme/flob-foundation-bundle 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 23.94k 次下载、GitHub Stars 达 50，最近一次更新时间为 2014 年 10 月 24 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「symfony」「bundle」「responsive」「zurb」「foundation」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 florianbelhomme/flob-foundation-bundle 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 florianbelhomme/flob-foundation-bundle 我们能提供哪些服务？

定制开发 / 二次开发

基于 florianbelhomme/flob-foundation-bundle 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 florianbelhomme/flob-foundation-bundle 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

2lenet/easyadmin-plus-bundle 17

2lenet/EasyAdminPlusBundle

ufo-cms/json-rpc-bundle 5

The bundle for easy using json-rpc api on your project

sil/route-security-bundle 7

Provide a way to secure accesses to all routes of an symfony application.

offline/responsiveimages-plugin 44

ResponsiveImages Plugin for October CMS

dms/meetup-api-bundle 1

DMS Meetup API Bundle, enables Meetup API clients in services

blueways/bw-email 0

TYPO3 extension for sending responsive email templates

florianbelhomme/flob-foundation-bundle

包简介

关键字：

README 文档

README

About

Requirements

Recommended

Installation and configuration

Configuration

Usage

Theme

Top bar

Menu entries with icons

Breadcrumb

Slider (form field type)

Switch (form field type)

Button Group (form field type)

Button Bar (form field type)

Authors

Contribute

Support

License

florianbelhomme/flob-foundation-bundle 适用场景与选型建议

与 florianbelhomme/flob-foundation-bundle 相关的其它包

统计信息

GitHub 信息

其他信息