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:
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.
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.
No hay comentarios:
Publicar un comentario
Te agradezco tus comentarios. Te esperamos de vuelta.