Menu icon Foundation
Nested grid structure in Apps?

I'm testing out Foundation for Apps and have hit a very roadblock in understanding how to do something as simple as a two-panel view with a nested grid within such as:

<div class="grid-frame">
  <div class="grid-block small-4">Left Panel</div>
  <div class="grid-block small-8">
    <div class="row item-header">
      Right Side Content
      <div class="columns small-8">Block Header Left</div>
      <div class="columns small-4">Block Header Right</div>
    </div>
  </div>
</div>
            

         

Wireframe: https://wireframe.cc/Rc9qjw

Of course, the `row` and `columns` classes aren't in the Foundation for Apps grid component, so that's not possible.

I'm a bit confused about nesting the grid in foundation apps - it seems like the grid-blocks are essentially for general area layouts/independently scrolling sections and not more fine-grained grid structure like with foundation for sites?

Is it expected to write custom css for things that need to float left and right such as a block-header and not rely on a grid component for these kinds of things when using foundation for apps?

gridappsnested

I'm testing out Foundation for Apps and have hit a very roadblock in understanding how to do something as simple as a two-panel view with a nested grid within such as:

<div class="grid-frame">
  <div class="grid-block small-4">Left Panel</div>
  <div class="grid-block small-8">
    <div class="row item-header">
      Right Side Content
      <div class="columns small-8">Block Header Left</div>
      <div class="columns small-4">Block Header Right</div>
    </div>
  </div>
</div>
            

         

Wireframe: https://wireframe.cc/Rc9qjw

Of course, the `row` and `columns` classes aren't in the Foundation for Apps grid component, so that's not possible.

I'm a bit confused about nesting the grid in foundation apps - it seems like the grid-blocks are essentially for general area layouts/independently scrolling sections and not more fine-grained grid structure like with foundation for sites?

Is it expected to write custom css for things that need to float left and right such as a block-header and not rely on a grid component for these kinds of things when using foundation for apps?

Jordan Bommelje almost 4 years ago

Foundation for Apps doesn't use the standard grid system as seen in Foundation for Sites. Try something like this:

<div class="grid-frame">
  <div class="grid-block small-4">
    <div class="grid-block content">Left Panel</div>
  </div>
  <div class="grid-block small-8">
    <div class="grid-block">
      <div class="grid-block content">
        Right Side Content
        <div class="grid-block small-8"><div class="grid-block content">Block Header Left</div></div>
        <div class="grid-block small-4"><div class="grid-block content">Block Header Right</div></div>
      </div>
    </div>
  </div>
</div>

I haven't tested this and it's just all free-hand, but give it a shot and see if it does what you're looking to do!

Geoff Kimball almost 4 years ago

There are sort of two ways you have to think about the grid. There's the top-level where you're creating the broad structure of your app. Fixed headers, sidebars, and so on.

  • Use .grid-frame once at the top level to house everything.
  • Use .grid-content for scrolling sections of content.
  • Use .grid-block instead of .grid-content to nest multiple items together.

Unlike the F5 grid, where you alternate row and column, with the Apps grid, you can nest multiple blocks in a row, depending on how deep you need to nest. The last element is always going to be .grid-content (which we call a "content block" versus a "block").

So that's the top-level of the layout. Within scrolling sections (.grid-content), these same classes behave more like the Foundation for Sites grid.

  • Use .grid-block for rows.
  • Use .grid-content for columns.

In this mode, you do need to alternate row and column, because nested rows need to invert their margins so everything lines up.

If this seems confusing, it's because it is ;) After a year of using Apps on various projects, we've found a need for two separate grid concepts, with different classes. In the future I think the "inner" grid will just be .row and .column, instead of us trying to use the same classes for different use cases.

Kevin Kershaw almost 4 years ago

Hi, yes that's exactly my question, simply using .grid-block seems more oriented to a general UI layout, whereas I find I need an "inner" grid for the content.

So I'm really confused how anyone is doing a more complex layout in a nested grid object if you can't do organize the content itself into columns.

For example, the code:

<div class="grid-frame">
      <div class="grid-block small-4">Left Panel</div>
      <div class="grid-block small-8">
        <div class="grid-block vertical">
          <div class="grid-block">
            <div class="grid-content small-4">Header Left</div>
            <div class="grid-content small-8">Header Right</div>
          </div>
          <div class="grid-block">
            <div class="grid-content small-12">
              <p>Content</p>
            </div>
          </div>
        </div>
      </div>
    </div>

Produces a panel on the right where everything is split evenly:

http://d.pr/i/1kLAV/4kopDZg9

On top of being remarkably complicated for a simple (and undesired) layout, I'm wondering how people are using only Foundation for Apps for grid functionality as I'm unable to see how I can achieve common tasks such as a content header split into columns.

I suppose as a very quick question to illustrate, how would one implement the following to be placed inside the right-side '.grid-block'

  <div class="person-card">
    <div class="person-card-header row">
      <div class="columns small-8">Block Header Left</div>
      <div class="columns small-4">Block Header Right</div>
    </div>
    <div class="person-card-content row">
      <div class="columns small-12">A bunch of content</div>
    </div>
  </div>

  <!-- and repeated for several 'people' -->