CSS - Single Page App Stack Layout

Most CSS Frameworks offer a layout system based on columns for creating text and content based websites. But for a single page web app the requirements are different. App development frameworks offer various techniques to structure the contents of a window, a simple yet powerful one is stack based view layout.

Let’s start with a common example that you might find in a mail or notes app. You have multiple columns like a sidebar, a document list, a content area. The list might also have a search field. An additional column to the right gives detailed information.

<div class="app">
    <div class="sidebar">
        <div>Sidebar</div>
    </div>
    <div class="middle">
        <div>Search</div>
        <div class="list">
            <div>Item1</div>
            <div>Item2</div>
            <div>Item3</div>
        </div>
    </div>
    <div class="content">
        <div class="menu">
            Content related menu
        </div>
        <div class="text">
            Text
        </div>
    </div>
    <div class="info">
        <div>Info</div>
    </div>
</div>

Each group has a different orientation for its children. All children of app are placed horizontally. Those of middle and content are vertically. We will introduce hstack and vstack CSS classes that will define the appropriate layout by using flex box. This is the code in SCSS:

.app, .hstack, .vstack {
  display: flex;

  &, > * {
    flex: none;
    overflow: hidden;
  }
}

.app, .hstack {
  flex-direction: row;
}

.vstack {
  flex-direction: column;
}

The default for flex is auto which means, everything grows and shrinks as required. But we instead want to give some columns a fixed width or height and flex: none will do that. For those elements that we want to grow or even be scrollable, we will add the following options:

.-grow {
  flex: auto;
}

.-scroll {
  overflow: auto;
}

Now we can add these options to list and content like this:

<div class="content -grow -scroll"></div>

That’s basically it. You will find a demo at JSFiddle here. It also shows how to add separators and how to prepare html and body correctly.