I came to Oracle JET from a Bootstrap background. By looking through the examples and cookbook, it was easy to see Oracle JET's routing, data bound components, and layout features, but I missed Bootstrap's utility classes such as pull-right and text-right (Note: you can use Bootstrap and Alta together, but that is another story). I even began creating my own utility classes. Then, while reading a recipe in the cookbook, I stumbled across oj-helper-text-align-right. I thought to myself, "No kidding... Oracle JET has utility classes." In fact, the cookbook is littered with utility class references. For example, the Panel Selected recipe introduces oj-panel, oj-selected, and oj-margin. What is the significance of these classes? Just as Bootstrap helps developers adopt a common, modern look and feel based on the Bootstrap design guidelines, Oracle JET's utility classes ensure that we adhere to the Oracle Alta design patterns. We no longer have to ask, "How much margin should we place between infolets in a dashboard?" Instead, we can add the oj-margin class and know that we are adhering to the Oracle Alta design guidelines.
Oracle published a great Oracle JET CSS class reference so I won't repeat all of the utility classes here. But don't stop with that reference. Dig into the Sassy CSS (scss) where you will find even more gems such as oj-helper-hidden (a great class to mix with $(...).toggleClass). "Help! I looked I looked in the scss subfolder and there are TONS of files in there. Where do I start?" I suggest starting with _oj.common.utilities.scss and _oj.common.helpers.scss.
Helper classes such as .oj-helper-text-align-left and .oj-helper-text-align-right are great, but what about RTL? Here is where things get really cool: Oracle JET was designed for an international audience. Oracle JET alignment, padding, and margin classes include *-start and *-end complements that align, pad, and space elements properly for RTL languages.
No comments:
Post a Comment