Home / Jenga Documentation

To understand the Jenga Approach you need to have the basic understanding of CSS as outlined here

1. What's Jenga?

Jenga is a Frontend Development Approach for Progressive Web Apps aimed at providing a fast, robust CSS writing pattern whose core tenet is Style Reusability.

Jenga builds on top of the power of CSS Variables and Component Architecture. In addition, push for a Progressive Web User Interface.

2. Architecture

 ├── jenga
      ├── components
      ├── theme
      ├── App.css

3. Implementing jenga

App.css is a CSS import style, from here you import the CSS Components that your App needs. You create more components in ./components folder for import as you build your Frontend.

App.css import style is not default. If you have an about page, it may have different components from the home page and so, inside ./jenga, you'd create About.css and import the about page components to it. This is where component-level code-splitting comes into play.

4. How to import a jenga component

In App.css file, import Theme.css (allows you to create a custom style theme on the go). App.css should be your App's main style which contains styles used by every page in your App.

@import "./theme/Theme.css";

Import a component say button as shown below.

@import "./components/button/Button.css";

Add App.css to your web pages.

<head>
  <!-- to the head tag add jenga -->
  <link href="./jenga/App.css" rel="stylesheet">
</head>

To your html, let's keep the jenga component to life as shown below as well.

<button class="jenga-button">Jenga Button</button>

5. Creating more components

Follow the developer guide below in order to create your own jenga components for your project.

Create a component folder in the jenga folder with its .css file named as Type.css for example; for Button.css, we have Button as the component type. The folder structure is shown below.

├── jenga
     ├── components
          ├── button
                ├── Button.css

6. Using Theme.css

For example, if you have a border styling, you can add the border color as shown in the code snippet below. Have a look at the recommended structure of your Theme.css as documented in the in this style guide.

border: 1px solid var(--jenga-border-color);

7. Little hands-on

Make sure to go through the README.md file for very litlle guide. Click View Source Button on the embed below.

8. Advanced jenga recipe

For a page like, about page, create a new css import file called About.css in the ./jenga folder and import all the components needed for the about page. Now add About.css to the about page as shown below.

<head>
  <!-- to the head tag add About.css -->
  <link href="./jenga/About.css" rel="stylesheet">
</head>