Monday, December 30, 2013

lesscss workflow for bootstrap under eclipse

Bootstrap source is authorized with lesscss. It can be customized and compiled with lesscss. One reason to do this is using semantic css class.  For example, suppose I have a customer domain object, I'd like to use "customer" css class for form/table. My customer class will be super simple
form.customer
{
  .form-horizontal;
}

Problem with lessc approach

Before I can use this semantic class, I need a customized bootstrap css.   Typical approach is to invoke lessc from command line. For eclipse, there is a plugin to edit and compile lesscss file: http://www.normalesup.org/~simonet/soft/ow/eclipse-less.en.html. There are several problems with this plugin. First, it is not easy to get this work under Window. This plugin will eventually invoke lessc coming with lesscss. lessc is a script interpreted by node.exe. It is script for unix system. lessc is invoked for window like this "node c:\Window\system32\node_modules\less\bin\lessc". Finally, even you can get this work under window, the compilation process is a manual process. It is not integrated into eclipse and maven process flow.

lesscss maven plugin

I did some search and found this wonderful maven plugin :https://github.com/marceloverdijk/lesscss-maven-plugin. First, it does not have external dependency. This plugin uses lesscss4j, a java implementation of lesscss compiler. This is very important in a continuous integration(CI) system since we want to minimize requirement for CI. Moreover, it can be integrate into the maven process management flow by specifying a execution goal.  By default, it is executed in compilation phase. So the final css file is automatically generated by eclipse when less file is changed.  In an environment without eclipse such as CI system,  the css will be generated at compilation stage together with your java code compilation.

Bootstrap customization workflow under eclipse.

  1. Have a separated directory for less file under src/main. In my case, I have src/main/less for less files. Do not leave less files under src/main/webapp. Files under src/main/webapp will be copied to final war. We don't want to distribute less files. 
  2. copy bootstrap less sources file. I copy them to src/main/less/bootstrap/*.less files.
  3. add your-project-specific less file. I have all my project-specific less files under /src/main/less/fragments/*.less. 
  4. Add top less files. This file will import less file from bootstrap and fragment folder.  My example files.
    //-------src/main/less/top.less
    @import "bootstrap/variables.less";
    @import "bootstrap/mixins.less";

    // Reset
    @import "bootstrap/normalize.less";
    @import "bootstrap/print.less";

    // Core CSS
    @import "bootstrap/scaffolding.less";
    @import "bootstrap/type.less";
    @import "bootstrap/code.less";
    @import "bootstrap/grid.less";
    @import "bootstrap/tables.less";
    @import "bootstrap/forms.less";
    @import "bootstrap/buttons.less";


    //project specific
    @import "fragment/props.less";


  5. configure the plugin to compile the top file at compilation stage.
    <plugin>
                    <groupId>org.lesscss</groupId>
                    <artifactId>lesscss-maven-plugin</artifactId>
                    <version>1.3.3</version>
                    <configuration>
                        <sourceDirectory>${project.basedir}/src/main/less</sourceDirectory>
                        <outputDirectory>${project.basedir}/src/main/webapp/css1</outputDirectory>
                        <compress>true</compress>
                    <includes>
                         <include>top.less</include>

                      <include>bootstrap/theme.css</include>
                     </includes>
                    </configuration>
                    <executions>
                        <execution>
                            <goals>
                                <goal>compile</goal>
                            </goals>
                        </execution>
                    </executions>
                </plugin>

Top.css and bootstrap/theme.css are generated automatically any time when the top.less is modified inside of eclipse. You can also trigger the compilation from command line like this: mvn lesscss:compile.


No comments:

Post a Comment