Menu icon Foundation
How to build XY-Grid more responsively?

See snippet on CodePen: https://codepen.io/anon/pen/wpbega

I have a 3 cell grid-y for having a header, body and footer like shown within Zurb's XY Grid presentation.

Inside the header, i have an 2 cell grid-x. Inside the right cell of this grid-x I have another grid-y to have 3 "lines".

 

<html class="no-js" lang="en" dir="ltr">
  <body>
    <div class="grid-y grid-frame">
      <header class="cell shrink header">
        <div class="grid-x">
          <div class="small-4 medium-3 cell">
            <img src="http://placehold.it/606x404&text=Portrait" alt="Portrait"/>
          </div>
          <div class="small-8 medium-9 cell">
            <div class="grid-y grid-frame">
              <div class="cell shrink" style="background-color: #4F4F4F; color: #F1F1F1;">
                <p>Forename Middlename Lastname</p>
              </div>
              <div class="cell shrink" style="background-color: #3F3F3F; color: #F1F1F1;">
                <p>Profession, Certifications</p>
              </div>
              <div class="cell auto" style="background-color: #3498DB; color: #F1F1F1;">
                <ul class="menu icons icon-top">
                  <li><a href="#"><i class="fi-home x-large"></i> <span>Home</span></a></li>
                  <li><a href="#"><i class="fi-address-book x-large"></i> <span>About me</span></a></li>
                  <li><a href="#"><i class="fi-pencil x-large"></i> <span>Blog</span></a></li>
                  <li><a href="#"><i class="fi-list x-large"></i> <span>Four</span></a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </header>
      <div class="cell auto body">
        <p>body</p>
      </div>
      <footer class="cell shrink footer">footer</footer>
  </body>
</html>

On medium-and-up devices the mechanics looks good for me, however with small devices the presentation is unusable.

Is there a way to have the "button navigation" (first grid-y, second grid-x, third grid-y) "below" the grid-x.

I don't see a way to accomplish both, having the button navigation on the top-right-bottom position on medium-and-up devices and just above the "body" in full width for small devices.

The result on small devices should look like this: https://codepen.io/anon/pen/zpQEvv

<html class="no-js" lang="en" dir="ltr">
  <body>
    <div class="grid-y grid-frame">
      <header class="cell shrink header">
        <div class="grid-x">
          <div class="small-4 medium-3 cell">
            <img src="http://placehold.it/606x404&text=Portrait" alt="Portrait"/>
          </div>
          <div class="small-8 medium-9 cell">
            <div class="grid-y grid-frame">
              <div class="cell auto" style="background-color: #4F4F4F; color: #F1F1F1;">
                <p>Forename Middlename Lastname</p>
              </div>
              <div class="cell auto" style="background-color: #3F3F3F; color: #F1F1F1;">
                <p>Profession, Certifications</p>
              </div>
            </div>
          </div>
        </div>
        <div class="cell auto" style="background-color: #3498DB; color: #F1F1F1;">
                <ul class="menu icons icon-top">
                  <li><a href="#"><i class="fi-home x-large"></i> <span>Home</span></a></li>
                  <li><a href="#"><i class="fi-address-book x-large"></i> <span>About me</span></a></li>
                  <li><a href="#"><i class="fi-pencil x-large"></i> <span>Blog</span></a></li>
                  <li><a href="#"><i class="fi-list x-large"></i> <span>Four</span></a></li>
                </ul>
              </div>
      </header>
      <div class="cell auto body">
        <p>body</p>
      </div>
      <footer class="cell shrink footer">footer</footer>
  </body>
</html>

How to move the button bar for small devices?

xy-gridfoundation-sitesfoundation-6

See snippet on CodePen: https://codepen.io/anon/pen/wpbega

I have a 3 cell grid-y for having a header, body and footer like shown within Zurb's XY Grid presentation.

Inside the header, i have an 2 cell grid-x. Inside the right cell of this grid-x I have another grid-y to have 3 "lines".

 

<html class="no-js" lang="en" dir="ltr">
  <body>
    <div class="grid-y grid-frame">
      <header class="cell shrink header">
        <div class="grid-x">
          <div class="small-4 medium-3 cell">
            <img src="http://placehold.it/606x404&text=Portrait" alt="Portrait"/>
          </div>
          <div class="small-8 medium-9 cell">
            <div class="grid-y grid-frame">
              <div class="cell shrink" style="background-color: #4F4F4F; color: #F1F1F1;">
                <p>Forename Middlename Lastname</p>
              </div>
              <div class="cell shrink" style="background-color: #3F3F3F; color: #F1F1F1;">
                <p>Profession, Certifications</p>
              </div>
              <div class="cell auto" style="background-color: #3498DB; color: #F1F1F1;">
                <ul class="menu icons icon-top">
                  <li><a href="#"><i class="fi-home x-large"></i> <span>Home</span></a></li>
                  <li><a href="#"><i class="fi-address-book x-large"></i> <span>About me</span></a></li>
                  <li><a href="#"><i class="fi-pencil x-large"></i> <span>Blog</span></a></li>
                  <li><a href="#"><i class="fi-list x-large"></i> <span>Four</span></a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </header>
      <div class="cell auto body">
        <p>body</p>
      </div>
      <footer class="cell shrink footer">footer</footer>
  </body>
</html>

On medium-and-up devices the mechanics looks good for me, however with small devices the presentation is unusable.

Is there a way to have the "button navigation" (first grid-y, second grid-x, third grid-y) "below" the grid-x.

I don't see a way to accomplish both, having the button navigation on the top-right-bottom position on medium-and-up devices and just above the "body" in full width for small devices.

The result on small devices should look like this: https://codepen.io/anon/pen/zpQEvv

<html class="no-js" lang="en" dir="ltr">
  <body>
    <div class="grid-y grid-frame">
      <header class="cell shrink header">
        <div class="grid-x">
          <div class="small-4 medium-3 cell">
            <img src="http://placehold.it/606x404&text=Portrait" alt="Portrait"/>
          </div>
          <div class="small-8 medium-9 cell">
            <div class="grid-y grid-frame">
              <div class="cell auto" style="background-color: #4F4F4F; color: #F1F1F1;">
                <p>Forename Middlename Lastname</p>
              </div>
              <div class="cell auto" style="background-color: #3F3F3F; color: #F1F1F1;">
                <p>Profession, Certifications</p>
              </div>
            </div>
          </div>
        </div>
        <div class="cell auto" style="background-color: #3498DB; color: #F1F1F1;">
                <ul class="menu icons icon-top">
                  <li><a href="#"><i class="fi-home x-large"></i> <span>Home</span></a></li>
                  <li><a href="#"><i class="fi-address-book x-large"></i> <span>About me</span></a></li>
                  <li><a href="#"><i class="fi-pencil x-large"></i> <span>Blog</span></a></li>
                  <li><a href="#"><i class="fi-list x-large"></i> <span>Four</span></a></li>
                </ul>
              </div>
      </header>
      <div class="cell auto body">
        <p>body</p>
      </div>
      <footer class="cell shrink footer">footer</footer>
  </body>
</html>

How to move the button bar for small devices?

Andrew Sepic about 1 year ago

Too bad all that's happening on the Foundation Forum is spam comments :-(