Background

When building your Frontend, start thinking of components as early as possible. You'll end up building a more robust, maintainable and consistent design system / UI library for your entire App and that's how I believe your styles should evolve too!

1. Performance is key

You only import and use a CSS Component that you need for every page. As in, style on-demand only.

2. The power of CSS Variables

Jenga is driven by use of CSS Variables which results to less repetition, better readability and more flexibility. Plus, unlike variables from CSS Preprocessors, they're are actually a part of the DOM.

Variables are handy in this case by providing you a robust way to build consistent Theme Style for your App. And this is core for Jenga! You define all global properties in this style for the entire App.

When coming up with the Theme Style, have in mind the groups of properties to think of. Group these properties for consistency within the Theme Style.

• Text Properties
• Color Properties
• Effect Properties
• Grid / Layout Properties

  Learn quickly more about CSS Variables Here

3. Component Approach

This approach allows you to create resusable component styles from a single small button to a complex one like a navigation or form component style. This lets you maintain your design "system" at scale.

When you need to change something, like your brand’s button color or text elements, you can make the change once — in the original master theme style — and watch it update across all your App components on the go!

4. Bundling versus Splitting

It is faster to load app assets such as styles as one file i.e ./bundle.css rather than many small ones, but if a page doesn't need everything, we could load only what's crucial and needed for it. This is now fastest.

Bundling is a problem, because the browser has to load the HTML, CSS, and JavaScript before it can paint their rendered results onto the screen.

Progressive Loading is a best practice and handy. It's all about deferring loading of as many resources as possible or one huge resource (HTML, CSS, JavaScript) and only loading those that are really needed for the very first experience and current page.

5. Editing on the go, increase Productivity

Component-level implementation of your styles increases your productivity when it comes to cleaning up code, enhancing a component or editing generally whether in your code editor or within your favourite browser's dev tools.

6. Native User Interface for Progressive Web Apps

Jenga authored components are built with Native UI design approach for building amazing user interfaces for your progressive web apps. We are calling this Progressive Web User Interface.

  Read more about Progressive Web User Interface Here