Details

    • Type: Task
    • Status: Closed
    • Priority: Critical
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 2.3
    • Component/s: Development
    • Security Level: Public (Public: Anyone can view)
    • Labels:
      None
    • Rice Module:
      KRAD
    • KRAD Feature Area:
      UIF Component
    • KAI Review Status:
      Not Required
    • KTI Review Status:
      Not Required
    • Code Review Status:
      Not Required
    • Include in Release Notes?:
      Yes

      Description

      As part of the new theme work we want to add support for LESS: http://lesscss.org/. In order to use LESS the files need compiled to CSS. We would like this to be integrated into the maven build process (similar to how minification is done).

      There are a few maven plugins out there. Search for 'LESS maven plugin'. Take a look through these and see which looks the best.

      Next we'll need to add the plugin to the krad-web pom. This is where the minify plugin is currently at.

      What we would like to happen is for the plugin to pick up any '.less' files under the web /themes folder. Compile each found file to '.css' in the directory. If we need to be more specific about paths that would be ok, but it would be nice if we could keep it generic like this.

      To test, just create a .less file somewhere in /themes, and verify the .css file is created when we build krad-web

        Attachments

          Issue Links

            Activity

            Hide
            cpedersen Corey Pedersen (Inactive) added a comment -

            This entry below for rice-krad-web pom.xml will compile less files
            from /krad/themes/kns/test_kns.less
            and
            /krad/themes/ks/test_ks.less
            to
            /krad/css/kns/test_kns.css
            and
            /krad/css/ks/test_ks.css

                  <plugin>
                    <groupId>org.lesscss</groupId>
                    <artifactId>lesscss-maven-plugin</artifactId>
                    <version>1.3.3</version>
                    <configuration>
                      <sourceDirectory>${basedir}/src/main/webapp/krad/themes</sourceDirectory>
                      <outputDirectory>${basedir}/src/main/webapp/krad/css</outputDirectory>
                      <compress>false</compress>
                      <force>true</force>
                      <includes>
                        <include>*/*.less</include>
                      </includes>
                    </configuration>
                    <executions>
                      <execution>
                        <phase>generate-resources</phase>
                        <goals>
                          <goal>compile</goal>
                        </goals>
                      </execution>
                    </executions>
                  </plugin>
            
            Show
            cpedersen Corey Pedersen (Inactive) added a comment - This entry below for rice-krad-web pom.xml will compile less files from /krad/themes/kns/test_kns.less and /krad/themes/ks/test_ks.less to /krad/css/kns/test_kns.css and /krad/css/ks/test_ks.css <plugin> <groupId>org.lesscss</groupId> <artifactId>lesscss-maven-plugin</artifactId> <version>1.3.3</version> <configuration> <sourceDirectory>${basedir}/src/main/webapp/krad/themes</sourceDirectory> <outputDirectory>${basedir}/src/main/webapp/krad/css</outputDirectory> <compress> false </compress> <force> true </force> <includes> <include>*/*.less</include> </includes> </configuration> <executions> <execution> <phase>generate-resources</phase> <goals> <goal>compile</goal> </goals> </execution> </executions> </plugin>
            Hide
            jkneal Jerry Neal (Inactive) added a comment -

            Corey,

            Looks great. I am assuming we can have the CSS go to the same directory as the LESS by just making the outputDirectory the themes directory?

            thanks,
            Jerry

            Show
            jkneal Jerry Neal (Inactive) added a comment - Corey, Looks great. I am assuming we can have the CSS go to the same directory as the LESS by just making the outputDirectory the themes directory? thanks, Jerry
            Hide
            jkneal Jerry Neal (Inactive) added a comment -

            Corey,

            The next step with this is to allow for LESS variable substitution. What would like to happen, is the variables get picked up from a 'theme.properties' file in the directory. Standard properties file, where the key is the LESS variables and the value is the value for the variable.

            As a test, we can grab the bootstrap.less file, and then build a properties file from the default values bootstrap provides.

            See

            http://bootstrap.lesscss.ru/less.html
            http://twitter.github.io/bootstrap/customize.html

            I would take the variables from the second resource. The first one seems a bit out of date.

            Note each theme directory can have its own theme.properties, so there could end up being multiple compilations.

            thanks,
            Jerry

            Show
            jkneal Jerry Neal (Inactive) added a comment - Corey, The next step with this is to allow for LESS variable substitution. What would like to happen, is the variables get picked up from a 'theme.properties' file in the directory. Standard properties file, where the key is the LESS variables and the value is the value for the variable. As a test, we can grab the bootstrap.less file, and then build a properties file from the default values bootstrap provides. See http://bootstrap.lesscss.ru/less.html http://twitter.github.io/bootstrap/customize.html I would take the variables from the second resource. The first one seems a bit out of date. Note each theme directory can have its own theme.properties, so there could end up being multiple compilations. thanks, Jerry
            Hide
            jkneal Jerry Neal (Inactive) added a comment -

            Corey,

            We will also need to test picking up nested directories. For example, under /themes/example/stylesheets they should be able to create directories as nested as they want. We would pick up the less files in each directory and dump a css file in that same directory.

            Jerry

            Show
            jkneal Jerry Neal (Inactive) added a comment - Corey, We will also need to test picking up nested directories. For example, under /themes/example/stylesheets they should be able to create directories as nested as they want. We would pick up the less files in each directory and dump a css file in that same directory. Jerry
            Hide
            cpedersen Corey Pedersen (Inactive) added a comment -

            This will recursively scan the themes directory and compile .less files to .css files in the same directory.

            <configuration>
                <sourceDirectory>${basedir}/src/main/webapp/themes</sourceDirectory>
                <outputDirectory>${basedir}/src/main/webapp/themes</outputDirectory>
                <compress>false</compress>
                <force>true</force>
                <includes>
                    <include>**/*.less</include>
                </includes>
            </configuration>
            
            Show
            cpedersen Corey Pedersen (Inactive) added a comment - This will recursively scan the themes directory and compile .less files to .css files in the same directory. <configuration> <sourceDirectory>${basedir}/src/main/webapp/themes</sourceDirectory> <outputDirectory>${basedir}/src/main/webapp/themes</outputDirectory> <compress> false </compress> <force> true </force> <includes> <include>**/*.less</include> </includes> </configuration>
            Hide
            cpedersen Corey Pedersen (Inactive) added a comment -

            Jerry: Here is my current directory structure working for less bootstrap testing.

            /src/main/webapp
                /krad
                    /bootstrap		// installation of bootstrap
                        /img
                        /js
                        /less
                /themes
                    /kboot
                        /images
                        /scripts
                        /stylesheets
                            /test.less
                            /test.css	// generated css file from test.less
            
                        /defaults.less	// copy of bootstrap/variables.less which can be overiden for this theme
                        /defaultVariables.less  // Alternate name for defaults.less 
            	
                        /theme.less		// modified bootstrap.less file 
            				// with override of bootstrap.variables.less 
            				// to defaults.less | defaultVariables.less
            

            themes.less snippet

            // Core variables and mixins
            // @import  "defaults.less"; // Modify this for custom colors, font-sizes, etc
            @import  "defaultVariables.less"; // Modify this for custom colors, font-sizes, etc
            // @import  "../../krad/bootstrap/less/variables.less"; // Modify this for custom colors, font-sizes, etc
            
            @import  "../../krad/bootstrap/less/mixins.less";
            
            Show
            cpedersen Corey Pedersen (Inactive) added a comment - Jerry: Here is my current directory structure working for less bootstrap testing. /src/main/webapp /krad /bootstrap // installation of bootstrap /img /js /less /themes /kboot /images /scripts /stylesheets /test.less /test.css // generated css file from test.less /defaults.less // copy of bootstrap/variables.less which can be overiden for this theme /defaultVariables.less // Alternate name for defaults.less /theme.less // modified bootstrap.less file // with override of bootstrap.variables.less // to defaults.less | defaultVariables.less themes.less snippet // Core variables and mixins // @ import "defaults.less" ; // Modify this for custom colors, font-sizes, etc @ import "defaultVariables.less" ; // Modify this for custom colors, font-sizes, etc // @ import "../../krad/bootstrap/less/variables.less" ; // Modify this for custom colors, font-sizes, etc @ import "../../krad/bootstrap/less/mixins.less" ;
            Hide
            cpedersen Corey Pedersen (Inactive) added a comment -

            To test less compilation ....\rice-framework\krad-web>mvn generate-resources -DskipTests=true

            Show
            cpedersen Corey Pedersen (Inactive) added a comment - To test less compilation ....\rice-framework\krad-web>mvn generate-resources -DskipTests=true
            Hide
            jkneal Jerry Neal (Inactive) added a comment -

            Corey,

            This is looking good. Let's make a few adjustments.

            1) Move bootstrap install to themes folder so it can be inherited from

            /themes
            /bootstrap
            /images
            /scripts
            /stylesheets

            As part of this rename the sub-directories to match our structure (will require updating paths in the bootstrap files)

            2) Lets go with variables.less for the variables file

            3) Because of the parent theme inheritance and some other issues I think it might be in our best interest to build the theme when the web app initializes (with a listener). Can you look into invoking a less compiler directory with Java code?

            Thanks!

            Jerry

            Show
            jkneal Jerry Neal (Inactive) added a comment - Corey, This is looking good. Let's make a few adjustments. 1) Move bootstrap install to themes folder so it can be inherited from /themes /bootstrap /images /scripts /stylesheets As part of this rename the sub-directories to match our structure (will require updating paths in the bootstrap files) 2) Lets go with variables.less for the variables file 3) Because of the parent theme inheritance and some other issues I think it might be in our best interest to build the theme when the web app initializes (with a listener). Can you look into invoking a less compiler directory with Java code? Thanks! Jerry
            Hide
            cpedersen Corey Pedersen (Inactive) added a comment -

            A bit of a problem moving bootstrap under themes. If we do the recursive compile of all less files under themes, then each of the import less files(ex: accordion.less) are individually compiled without their variable values. ERROR.

            To correct this add the following to the pom.xml. (just after includes)

                <excludes>
                    <exclude>bootstrap/**/*.less</exclude>
                </excludes>
            
            Show
            cpedersen Corey Pedersen (Inactive) added a comment - A bit of a problem moving bootstrap under themes. If we do the recursive compile of all less files under themes, then each of the import less files(ex: accordion.less) are individually compiled without their variable values. ERROR. To correct this add the following to the pom.xml. (just after includes) <excludes> <exclude>bootstrap/**/*.less</exclude> </excludes>
            Hide
            cpedersen Corey Pedersen (Inactive) added a comment -

            Jerry: If we are going to add a stylesheets directory for theme less files we should change he excludes.

                <excludes>
                    <exclude>bootstrap/less/*.less</exclude>
                </excludes>
            
            Show
            cpedersen Corey Pedersen (Inactive) added a comment - Jerry: If we are going to add a stylesheets directory for theme less files we should change he excludes. <excludes> <exclude>bootstrap/less/*.less</exclude> </excludes>
            Hide
            cpedersen Corey Pedersen (Inactive) added a comment -

            Jerry: Did I misunderstand? "1) Move bootstrap install to themes folder so it can be inherited from"

            Are you saying that to allow bootstrap to be inherited from the structure be:

            /themes
               /bootstrap
                   /kboot
                       /images
                       /scripts
                       /stylesheets
                       /themes.less
                       /variables.less
                   /kns-theme
                       ....
                   /ks-theme
                       ....
                   /less
                   /js
                   /img
                   /docs     
            
            Show
            cpedersen Corey Pedersen (Inactive) added a comment - Jerry: Did I misunderstand? "1) Move bootstrap install to themes folder so it can be inherited from" Are you saying that to allow bootstrap to be inherited from the structure be: /themes /bootstrap /kboot /images /scripts /stylesheets /themes.less /variables.less /kns-theme .... /ks-theme .... /less /js /img /docs
            Hide
            cpedersen Corey Pedersen (Inactive) added a comment -

            Update of themes.less for new structure

            // Core variables and mixins
            @import  "variables.less"; // Modify this for custom colors, font-sizes, etc
            
            @import  "../bootstrap/less/mixins.less";
            ....
            
            Show
            cpedersen Corey Pedersen (Inactive) added a comment - Update of themes.less for new structure // Core variables and mixins @ import "variables.less" ; // Modify this for custom colors, font-sizes, etc @ import "../bootstrap/less/mixins.less" ; ....
            Hide
            cpedersen Corey Pedersen (Inactive) added a comment - - edited

            Jerry: One question is that if we use the lesscss compiler there is the <compress>true</compress> feature. It is not exactly the same as minify, but close. It strips all unneeded comments and space out, but leaves the lines separate. So you get most of the benefit of space compaction on the produced css files, but they are still somewhat readable.

            Show
            cpedersen Corey Pedersen (Inactive) added a comment - - edited Jerry: One question is that if we use the lesscss compiler there is the <compress>true</compress> feature. It is not exactly the same as minify, but close. It strips all unneeded comments and space out, but leaves the lines separate. So you get most of the benefit of space compaction on the produced css files, but they are still somewhat readable.
            Hide
            jcoltrin Jessica Coltrin (Inactive) added a comment -

            According to Jerry, this is done, so I'm resolving.

            Show
            jcoltrin Jessica Coltrin (Inactive) added a comment - According to Jerry, this is done, so I'm resolving.

              People

              • Assignee:
                cpedersen Corey Pedersen (Inactive)
                Reporter:
                jkneal Jerry Neal (Inactive)
              • Votes:
                0 Vote for this issue
                Watchers:
                3 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: