Menu icon Foundation

My Posts





My Comments

Kevin Kershaw commented on Kevin Kershaw's post almost 4 years

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' -->

Kevin Kershaw commented on rudy foye's post over 5 years

I'm not sure if it's related, but Orbit is deprecated:

http://foundation.zurb.com/forum/posts/14504-moving-on-from-developing-orbit

I replaced it in my projects with Slick.

Kevin Kershaw commented on Kevin Kershaw's post over 5 years

Hi Karl,
That's correct, so that the images in a block grid are all bottom-aligned instead of top.

So that all the images align to the red line in this example: http://d.pr/i/eUUH/28CBwK0o

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Kevin Kershaw's post almost 4 years

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' -->

You commented on rudy foye's post over 5 years

I'm not sure if it's related, but Orbit is deprecated:

http://foundation.zurb.com/forum/posts/14504-moving-on-from-developing-orbit

I replaced it in my projects with Slick.

You commented on Kevin Kershaw's post over 5 years

Hi Karl,
That's correct, so that the images in a block grid are all bottom-aligned instead of top.

So that all the images align to the red line in this example: http://d.pr/i/eUUH/28CBwK0o

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content