Display & Layouts:Custom Layouts

The display grid is very flexible and can support custom CSS. There are a number of preconfigured layout styles ready for you. If you don't see what you want there and would prefer to customize the grid yourself, you'll just need to understand the three CSS properties that control the grid layout. The examples on this page are not comprehensive – we just offer them to give you an idea how to get started.

Example Layout

Statusbar

Game Output

var MyGame = new AdventureJS.Game("MyGame", "MyGameContainer");

MyGame.settings.set({
  title: "My Game",
  author: "My Name",
  description: "This is my great game! Thanks for playing!",
  version: "0.0.1",
  layout: "rows",
});

Content Grid, Explained

The content grid has five regions, which can be configured in any number of ways depending on the values of just three CSS properties.

grid-template-columns and grid-template-rows together define a 3 x 3 grid where the middle box expands to fit the space left by the other boxes. The grid doesn't need to be 3x3 though: it could be 1x1 (Infocom layout) or 2x2 (Scott Adams layout) or 4x3 (MacVenture layout), depending on how you want to arrange the regions.
grid-template-areas defines what's in each square of the grid.

<style>
.ajs-content {
  grid-template-columns: 30% minmax(0, 1fr) 30%;
  grid-template-rows: 20% minmax(0, 1fr) 20%;
  grid-template-areas:
    "left  header  right" 
    "left   main   right"
    "left  footer  right";
}
</style>

In the following blocks, we show examples of code used to reconfigure the grid. All of these examples exist as preset layout styles and you can have these just by setting your game's layout property – the point is just to demonstrate how you can configure your own settings.

Classic Layout (Infocom)

<style>
  /* .ajs-content is the grid container */
  .ajs-content {

    /*For the classic layout, we use a 1x1 grid. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);

    /*main is the only region in the grid. */
    grid-template-areas:
      "main";
  }
</style>

Image on Top Layout (Scott Adams, Level 9)

<style>
  /* .ajs-content is the grid container */
  .ajs-content {

    /* For this layout, we use a 2row x 1column grid. */
    grid-template-columns: 100%;
    grid-template-rows: 50% 50%;

    /* main is the only region in the grid. */
    grid-template-areas:
      "header" 
      "main";
  }
</style>

Text on Left Layout

<style>
  /* .ajs-content is the grid container */
  .ajs-content {

    /* For this layout, we use a 3 x 3 grid. */
    grid-template-columns: minmax(0, 1fr) 20% 20%;
    grid-template-rows: 40% 40% 20%;

    /* Here we're stacking all the widgets to the right. */
    grid-template-areas:
      "main  header  header" 
      "main   left   right" 
      "main  footer  footer";
  }
</style>

Image and Rows Layout

<style>
  /* .ajs-content is the grid container */
  .ajs-content {

    /* For this layout, we use a 3 x 3 grid. */
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: 30% minmax(0, 1fr) 20%;

    /* Here we put the text area in the middle row. */
    grid-template-areas:
      "header  header  header" 
      "main     main    main" 
      "left    footer  right";
  }
  </style>

Further reference

CSS Grids have more properties than these three, though they're the only ones we're using to control our grid. You may find additional nuance if you need it. Learn more about CSS Grids at MDN.