Until a proper front-end development environment is created, build a quick solution using static, pre-rendered KRAD screens, so we can get immediate momentum on the project.

[9/11/14, 10:28:10 AM] Jerry Neal:

Chris, really since our focus in on the CSS, it doesn't seem like we even need to be using a KRAD environment right now. We could grab the output of the sampleapp views and treat that as static content. Then move that content into an environment with a good front end workflow. Eventually we will want to start tweaking the markup and other things, but that would buy us some time for getting that environment setup. What do you think about that approach?

[9/11/14, 10:59:42 AM] Chris Basham:

That's a fascinating approach. And if it gives us momentum, then I'd be fine with it. I'm not sure how much work we can achieve without touching the templates, but it can at least get us started and give you more time to get another environment together. Sounds good. I can start working on this temporary environment solution today.

[9/11/14, 11:05:07 AM] Jerry Neal:

Great. Also, if the group does find places where the markup needs to change, they could go ahead and change it in the static HTML, then make a note of the change and we can make the corresponding mod in KRAD. For simplicity, we could have a document where they can make those notes.

When building the JavaScript files with the new task runner, try to match the output of the derived theme properties.

Derived theme properties

/opt/kuali/rice-trunk/rice-framework/krad-web/target/rice-krad-web-2.5.0-M7-SNAPSHOT/themes/kboot/theme-derived.properties

#Thu Sep 04 09:59:52 EDT 2014
jsLoadFirst=jquery-1.8.3,jquery.validate,jquery-ui*,jquery.dataTables,bootstrap,tmpl.min,load-image.min,jquery.iframe-transport,jquery.fileupload,jquery.fileupload-process
jsExcludes=less-1.5.0.min.js,jquery.fileupload-ui
jsLoadLast=jquery.easing-1.3.pack
parentExcludes=
cssLoadFirst=jquery-ui*,bootstrap,kboot
themeJsFiles=plugins/jquery/jquery-1.8.3.js,plugins/validate/jquery.validate.js,plugins/jqueryUI/jquery-ui-1.9.2.js,plugins/datatables/jquery.dataTables.js,themes/kboot/scripts/bootstrap.js,plugins/fileupload/tmpl.min.js,plugins/fileupload/load-image.min.js,plugins/fileupload/jquery.iframe-transport.js,plugins/fileupload/jquery.fileupload.js,plugins/fileupload/jquery.fileupload-process.js,plugins/scrollto/jquery.scrollTo-1.4.6.js,plugins/jqform/jquery.form-3.31.0.js,plugins/globalize/globalize.js,plugins/jgrowl/jquery.jgrowl.js,plugins/bootstrap-accessibility/bootstrap-accessibility.js,plugins/textpopout/krad.textareaPopout.js,plugins/validate/additional_validations.js,plugins/cookie/jquery.cookie.js,plugins/watermark/jquery.watermark.js,plugins/countdown/jquery.countdown.js,plugins/fileupload/jquery.fileupload-audio.js,plugins/fileupload/jquery.fileupload-image.js,plugins/fileupload/jquery.fileupload-validate.js,plugins/fileupload/jquery.fileupload-video.js,plugins/blockUI/jquery.blockUI.js,plugins/color/jquery.color.js,plugins/json/jquery.json-2.2.js,plugins/datatables/jquery.dataTables.rowGrouping.js,plugins/datatables/TableTools.js,plugins/datatables/ZeroClipboard.js,plugins/jstree/jquery.jstree.js,plugins/fancybox/jquery.fancybox.js,plugins/fancybox/jquery.fancybox.pack.js,plugins/jqueryUI/jquery.ui.autocomplete.html.js,plugins/prettify/prettify.js,plugins/easydrag/jquery.easydrag.js,krad/scripts/krad.variables.js,krad/scripts/krad.utility.js,krad/scripts/krad.initialize.js,krad/scripts/krad.request.js,krad/scripts/krad.response.js,krad/scripts/krad.actions.js,krad/scripts/krad.dirty.js,krad/scripts/krad.document.js,krad/scripts/krad.edit.js,krad/scripts/krad.focusJump.js,krad/scripts/krad.lookup.js,krad/scripts/krad.message.js,krad/scripts/krad.modal.js,krad/scripts/krad.session.js,krad/scripts/krad.url.js,krad/scripts/krad.validate.js,krad/scripts/krad.widget.js,plugins/easing/jquery.easing-1.3.pack.js
themePluginNames=scrollto,easing,jqform,globalize,jgrowl,bootstrap-accessibility,textpopout,jquery,validate,cookie,watermark,countdown,fileupload,blockui,color,json,datatables,jstree,fancybox,jqueryui,prettify,easydrag
themeLessFiles=kboot.less
pluginFileExcludes=fancybox/helpers/**,jstree/themes/**
devJsIncludes=themes/kboot/scripts/less-1.5.0.min.js
lessIncludes=kboot.less
cssExcludes=jquery.dataTables,jquery.fileupload-ui
parent=bootstrap
cssLoadLast=jquery-overrides.css
themeCssFiles=plugins/jqueryUI/jquery-ui-1.9.2.css,themes/kboot/stylesheets/kboot.css,plugins/jgrowl/jquery.jgrowl.css,plugins/bootstrap-accessibility/bootstrap-accessibility.css,plugins/textpopout/popoutTextarea.css,plugins/fileupload/jquery.fileupload.css,plugins/datatables/TableTools.css,plugins/fancybox/jquery.fancybox.css,plugins/prettify/prettify.css,themes/kboot/stylesheets/jquery-overrides.css

JavaScript includes

From themeJsFiles property:

1. plugins/jquery/jquery-1.8.3.js
2. plugins/validate/jquery.validate.js
3. plugins/jqueryUI/jquery-ui-1.9.2.js
4. plugins/datatables/jquery.dataTables.js
5. themes/kboot/scripts/bootstrap.js
6. plugins/fileupload/tmpl.min.js
7. plugins/fileupload/load-image.min.js
8. plugins/fileupload/jquery.iframe-transport.js
9. plugins/fileupload/jquery.fileupload.js
10. plugins/fileupload/jquery.fileupload-process.js
11. plugins/scrollto/jquery.scrollTo-1.4.6.js
12. plugins/jqform/jquery.form-3.31.0.js
13. plugins/globalize/globalize.js
14. plugins/jgrowl/jquery.jgrowl.js
15. plugins/bootstrap-accessibility/bootstrap-accessibility.js
16. plugins/textpopout/krad.textareaPopout.js
17. plugins/validate/additional_validations.js
18. plugins/cookie/jquery.cookie.js
19. plugins/watermark/jquery.watermark.js
20. plugins/countdown/jquery.countdown.js
21. plugins/fileupload/jquery.fileupload-audio.js
22. plugins/fileupload/jquery.fileupload-image.js
23. plugins/fileupload/jquery.fileupload-validate.js
24. plugins/fileupload/jquery.fileupload-video.js
25. plugins/blockUI/jquery.blockUI.js
26. plugins/color/jquery.color.js
27. plugins/json/jquery.json-2.2.js
28. plugins/datatables/jquery.dataTables.rowGrouping.js
29. plugins/datatables/TableTools.js
30. plugins/datatables/ZeroClipboard.js
31. plugins/jstree/jquery.jstree.js
32. plugins/fancybox/jquery.fancybox.js
33. plugins/fancybox/jquery.fancybox.pack.js
34. plugins/jqueryUI/jquery.ui.autocomplete.html.js
35. plugins/prettify/prettify.js
36. plugins/easydrag/jquery.easydrag.js
37. krad/scripts/krad.variables.js
38. krad/scripts/krad.utility.js
39. krad/scripts/krad.initialize.js
40. krad/scripts/krad.request.js
41. krad/scripts/krad.response.js
42. krad/scripts/krad.actions.js
43. krad/scripts/krad.dirty.js
44. krad/scripts/krad.document.js
45. krad/scripts/krad.edit.js
46. krad/scripts/krad.focusJump.js
47. krad/scripts/krad.lookup.js
48. krad/scripts/krad.message.js
49. krad/scripts/krad.modal.js
50. krad/scripts/krad.session.js
51. krad/scripts/krad.url.js
52. krad/scripts/krad.validate.js
53. krad/scripts/krad.widget.js
54. plugins/easing/jquery.easing-1.3.pack.js

Research Grunt and determine how it can be best purposed by Kuali. What are the benefits over other task runners?

Research gulp and determine how it can be best purposed by Kuali. What are the benefits over other task runners?

Following the CSS Best Practices document, all element selectors should be extracted to a single destination, most likely in src/styles/core/base.less, or something equivalent. Import it to the main style entry, perhaps at src/styles/main.less.

Figure out how best to setup the local dev environment for contributions. Perhaps there should be some documentation for this, somewhere in this repo. From a conversation with Brian Smith:

[8/15/14, 1:52:38 PM] Brian Smith:

not sure what we need to talk about, to test our css we would just change the GlobalTheme bean to point to our new directory and use KRAD Library Demos and Labs to test. If we need to create new views we would just add them to labs. See Labs*.xml files.

[8/15/14, 2:12:30 PM] Chris Basham:

I guess what I'd want clarification on is this process: "to test our css we would just change the GlobalTheme bean to point to our new directory and use KRAD Library Demos and Labs to test"

I have no idea what any of that practically looks like in the code or how to get my local environment going so that could be done. I'm unsure regarding where to change the reference. I don't know how to use "KRAD Library Demos and Labs." Maybe I'm the only one in the group with that question. I don't know.

[8/15/14, 2:13:11 PM] Brian Smith:

GlobalTheme is in UifViewPageDefinitions.xml

<!-- Bean for setting the default theme for views -->
  <bean id="GlobalTheme" parent="Uif-KbootTheme"/>

  <bean id="Uif-KbootTheme" parent="Uif-KbootTheme-parentBean"/>
  <bean id="Uif-KbootTheme-parentBean" abstract="true" parent="Uif-RiceViewTheme">
    <property name="name" value="kboot"/>
  </bean>

in our branch we would change kboot to our new folder name

[8/15/14, 2:14:46 PM] Chris Basham:

Okay. That solves my issue #(1). Unsure about the bigger #(2).

[8/15/14, 2:14:57 PM] Brian Smith:

we would test css changes by running the KRAD sample app and using KRAD Library Demos and Labs to test

if we need to add a new view we add one with stuff we are targeting

[8/15/14, 2:23:42 PM] Chris Basham:

Is there any documentation anywhere regarding how to run "the KRAD sample app and using KRAD Library Demos and Labs to test"?

[8/15/14, 2:23:51 PM] Brian Smith:

yes

https://wiki.kuali.org/display/KULRICE/New+Rice+developer+quick+start

[8/15/14, 2:24:41 PM] Chris Basham:

Thanks. I'll look into it.

[8/15/14, 2:24:54 PM] Brian Smith:

its just setting up a rice environment

and running it through intellij

Research common task runner tasks for front-end development builds. Perhaps link to exemplars of their implementations or recommend specific npm modules. Compile results in perhaps a wiki page.

• Include browser prefixes with Autoprefixer
• Minify
• Concat
• CSS preprocessing with gulp-less
• JS bundling with Browserify
• Cache busting with gulp-rev
• Live reload and browser syncing with BrowserSync
• Code quality hinting with linting

Attribute Modules for CSS is a new technique that hopes to solve many issues with BEM and using class-based selectors. These ideas align pretty well with best practices I've refined, yet addresses a few additional concerns.

Introducing AM — Attribute Modules for CSS

As a simple example that's provided, this is how it would transform some Bootstrap-style markup:

<!-- Large primary button -->
<a class="btn btn-primary btn-lg">Large primary button</a>
<a am-Button="primary large">Large primary button</a>

<!-- Default button -->
<a class="btn btn-default">Default button</a>
<a am-Button>Default button</a>

<!-- Small info button -->
<a class="btn btn-info btn-sm">Small info button</a>
<a am-Button="info small">Small info button</a>

<!-- Extra-small danger button -->
<a class="btn btn-danger btn-xs">Extra-small danger button</a>
<a am-Button="danger extra-small">Extra-small danger button</a>

The biggest hesitation from the community is performance concerns. While there are a lot of unknowns, performance regarding attribute selectors are being actively investigated.

Rather than working with the current Rice development environment, a new environment should be created that is lighter to render front-end KRAD components, with fewer database and Rice dependencies. Integration with BrowserSync or some equivalent would be ideal.

From @jkneal's comment:

We will definitely look into using BrowserSync, but rather than working with the current project, I would like to see if we can get the another environment going and start tweaking there. Sound Ok?

Determine whether Kuali should universally use gulp or Grunt or another task runner (e.g. Brunch, Broccoli), or how they may be appropriate for different purposes.

Use research from #2 and #3 to inform decision.