Integrating Styles into Oracle JET Applications

A lot of organizations have style guidelines for their browser apps. I.e., these style guidelines consist of colors, sizes, icons, etc, normally supported by CSS stylesheets. Wouldn't it be nice if there'd be a few customizable templates for quickly styling Oracle JET applications? Well, take a look here:

http://www.oracle.com/webfolder/technetwork/jet/globalExamples-ThemeViewer.html

Welcome to the Oracle JET Theme Builder. It's been around for a while, though a bit hidden on the Oracle JET Examples page. The Oracle JET Theme Builder is an Oracle JET application that lets you create themes (i.e., CSS stylesheets), based on a set of existing themes, for your Oracle JET applications.

Click "Live Demo" and then click "Instructions" in the top right, which brings you here. Follow those steps and you'll literally have everything you need. Below I have summarized things a bit, though the Instructions speak for themselves.

1. Set Up. Download the ZIP file on the Instructions page, unzip it, and run the 4 Yeoman commands shown on the Instructions page on that folder:

• When you run "yo oraclejet:restore", both 'npm' and 'bower' will be run, to access all the required JavaScript libraries for any Oracle JET application. 
• When you run "yo oraclejet:add-sass" and you receive error messages about Python being needed, the simplest solution is to downgrade 'node' to v5.x, e.g., I have v5.9.1, i.e., when I was on v6x, I had all kinds of problems, e.g., needing Python and then something else, which I fixed by downgrading node. Doing this has not had adverse effects so far. 
• When you run "yo oraclejet:add-theme mytheme", you populate "src\themes\mytheme" with content. Make sure that the name you specify is literally "mytheme", i.e., do not change it to something different. "mytheme" is the fixed name of the custom theme you'll be creating. After you've created your theme, i.e., a set of CSS files, you can name them whatever you like.
• When you run "grunt serve --themes=all:all", the browser will show the Theme Builder running locally, which is what you want to have happen so that you can start building your themes.

2. Theming. At this point you should see this and now you can choose a combination of different buttons on the left to get to the theme that you want to base your own theme off of. Below, notice I am working on "web" and "mytheme":



Now, look at the Palette in the left column, for example, notice the first color is "$interaction1Color". In "src/themes/mytheme/web", go to "_mytheme.web.settings.scss" and look for "$interaction1Color", which you'll see is listed as follows:

// $interaction1Color: #0572ce !default;

Change the above to the below:

$interaction1Color: red !default;

When you make the change above and save it, automatically the CSS will be generated, and the browser will refresh, showing you the change you've made:

When the above works for you, get the style guide that you're wanting to integrate into your Oracle JET application. Take note of the color codes and other styles and continue tweaking the SCSS files, using the Theme Builder, as described above, to check the changes you're making. 

3. Usage. At some point, you'll want to see how the CSS files you're generating look in your own Oracle JET application. Follow the earlier blog entry, The Mechanics of Theming Oracle JET Applications, for details on how to set up theming support within your Oracle JET application. Once you've set that up, copy the CSS files that have been generated in "themes/mytheme/web", in this case, into the relevant theme folder in your own application.

Now, isn't this simply an awesome tool? Following the steps above, all the UI elements provided by Oracle JET can be restyled to match the style guidelines of your choice. Note that you do not have to use the "mytheme" theme as a starting point, there are other themes too, which might more closely resemble the end point you're trying to achieve. Pick the one that's closest to your intended theme and then start tweaking it as described in step 2 above.