Configuration

• install node.js first

• put less on /usr/local/lib/node_modules/less

  (i'm using git://github.com/gpupo/less.js.git with some hacks)

deps

        [GpupoGlessBundle]
            git=git://github.com/gpupo/GpupoGlessBundle.git
            target=bundles/Gpupo/GlessBundle  

        [GpupoGless]
            git=git://github.com/gpupo/gless.git
            target=bundles/Gpupo/Gless  

(add to deps file and run ./bin/vendors install)

AppKernel

        //...

        new Gpupo\GlessBundle\GpupoGlessBundle(),

        //...

Autoloading

        //...

        'Gpupo'            => __DIR__.'/../vendor/bundles',

        //...

app/config/config_dev.yml

        # Assetic Configuration
        assetic:
            debug:          %kernel.debug%
            use_controller: false
            filters:
                cssrewrite: ~
                less:
                    node:       /usr/local/bin/node
                    node_paths: [/usr/local/lib/node_modules]
                    compress:   true
                    apply_to: "\.less$" 

            //...

Create your styles!

        $ cd src/Your/ThemeBundle/Resources/
        $ mkdir less
        $ cd less
        $ touch variables.less ie.less main.less

variables.less file:

        # see vendor/bundles/Gpupo/Gless/lib/variables for overloading!

        #public path of assets:
        @self_path: "/bundles/gpupogless";

main.less file:

        //gless
        @import "vendor/bundles/Gpupo/Gless/lib/grid";
        @import "vendor/bundles/Gpupo/Gless/lib/variables";
        //**overloading**
        @import "src/Your/ThemeBundle/Resources/less/variables";
        @import "vendor/bundles/Gpupo/Gless/lib/html5boilerplate";
        @import "vendor/bundles/Gpupo/Gless/lib/formalize";

        @import "vendor/bundles/Gpupo/Gless/lib/mixins";
        @import "vendor/bundles/Gpupo/Gless/lib/buttons";
        @import "vendor/bundles/Gpupo/Gless/lib/patterns";
        @import "vendor/bundles/Gpupo/Gless/lib/forms";
        @import "vendor/bundles/Gpupo/Gless/lib/horizontal-nav";

ie.less file

        @import "vendor/bundles/Gpupo/Gless/lib/variables";
        //overloading
        @import "src/Your/ThemeBundle/Resources/less/variables";
        @import "vendor/bundles/Gpupo/Gless/lib/mixins";

        body {
             form {
                legend {
                    position:absolute;
                    top: -.8em;
                    left: .5em;
                    //.addIESupport();
                }

                fieldset {
                    padding: .8em 0px 0px 0px;
                    margin-top:1em !important;
                    .addIESupport();
                    .IEindex;
                }
            }
        }

        // continue your IE hack ...

add to your template

        //...

        {% stylesheets 
                '@YourThemeBundle/Resources/less/main.less'
                output='css/main.css'
         %}

        <link rel="stylesheet" href="/css/main.css" type="text/css" media="all" />
        {% endstylesheets %}

        {% stylesheets 
                output='css/ie.css'
                '@YourThemeBundle/Resources/less/ie.less'
         %}
        <!--[if lte IE 8]>
        <link rel="stylesheet" href="/css/ie.css" type="text/css" media="all" />
        <![endif]-->  
        {% endstylesheets %}

        {% javascripts 
            '@GpupoGlessBundle/Resources/public/js/*'
            '@YourThemeBundle/Resources/public/js/*'
             output='js/combined.js'
        %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
        {% endjavascripts %}

        //...

Run

        app/console assets:install  web
        app/console assetic:dump

Twig Macros

Require {% import 'GpupoGlessBundle::macros.html.twig' as Gless %} and jQuery UI

Methods available

• Gless.Button

• Gless.ButtonA ** make a links with jQuery UI sintaxe **

      {# usage example #}
      {% import 'GpupoGlessBundle::macros.html.twig' as Gless %}
      <div class="share">
          {{ Gless.ButtonA('Imprimir', 'javascript:alert(\'Hello\')', {'icon': 'print', 'with_text': 'no'}) }}
          {{ Gless.ButtonA('Salvar', 'javascript:alert(\'Hello\')', {'icon': 'disk', 'with_text': 'no'}) }}
          {{ Gless.ButtonA('Enviar', 'javascript:alert(\'Hello\')', {'icon': 'mail-closed', 'with_text': 'no'}) }}
      </div>