Menu icon Foundation

Developer | Sumas WA

I've spent to me, anyway investment in time and money (training) learning HTML when it was old, then CSS, then HTML5, CSS extended (CSS3) JS, libraries of JS (JQuery), PHP with MySQL on Apache for ecommerce coding, because I'm too cheap to rent a shopping cart that then has to be updated and not awesome out of the box. SASS for CSS, and Ruby on Desktop Windows and Compass for command line compiling Foundation 5 code to output clean customized css and js. I find the code much easier with so much information available, but really time consuming to work towards an extreme proficiency level of skill to do front end responsive, ecommerce responsive, backend, and CMS, all while being semantic for SEO and built for SMO too, are all required in today's Social Marketing and Google Search Engine World.

My Posts

No Content

My Comments

Jonathan Doege commented on Alexandria's post almost 6 years

Foundation is great, but you are confused on the grid. Since the grid is about Mobile first, if you want the grid to fold over and stack neatly in all one column in Mobile, you need to use large-

Like you I used Foundation 5. I never used a previous version so I am a newbie too, but I'm learning all I can.

If you are duplicating an older layout where Left is Aside, and not the Right, you can use push pull command. Otherwise the above I tested with my own images in Foundation 5.

small-x grid keeps the same no matter how small, and is best used with whatever looks good in mobile. You can swap the dimensions different in large-view for a two column grid by combining the styles like this, I have done:

<div class='row'>
    <section class='large-6 columns'>
      Left<img src="_img/larue.jpg" alt="Product of X."/>

    </section>
    <aside class='large-3 columns'>
      LeftRight<img src="_img/x.jpg" alt="Product of X."/>
    </aside>
    <aside class='large-3 columns'>
      FarRight<img src="_img/x.jpg" alt="Product of X."/>
    </aside>
  </div>
  <div class='row'>
    <section class='large-6 columns'>
      Left<img src="_img/lx.jpg" alt="Product of X."/>
    </section>
    <aside class='large-3 columns'>
      LeftRight<img src="_img/x.jpg" alt="Product of X."/>
    </aside>
    <aside class='large-3 columns'>
      FarRight<img src="_img/x.jpg" alt="Product of X."/>
    </aside>
  </div>

I duplicated your code, but I used all images in portrait mode rather than mixed portrait/landscape. I also changed the image tags to display images from my "_img" folder

The stacking order was left then left right then far right, and repeat.

Essentially small is for when you do not want stacking behavior.

I hope that helps.

PS if you want to use small grids but have them different dimensions in large view, do this:

<div class="row">
    <aside class="large-3 small-6 columns">
      <p>Spanning large columns large, but 6 columns small.</p>
    </aside>
    <section class="large-9 small-6 columns">
      <p>Spanning a wide space when large of 9 columns, 6 columns small.</p>
        <p>No matter how big or large my page gets there will always be 2 columns, divided up this way. In other words one column will not stack on top of the other.</p>
    </section>    
  </div>

PS2, for mobile-mode they will all stack and each will try to use the entire width of available browser space, whatever image will be loading.

I'm brand new to Foundation, but I love the way it is a high level programming language for the UX, and it can do so much more!

Posts Followed

  • 74
    Replies
  • Foundation 5 and IE8

    By James Cocker

    ie8Foundation 5usage

    Firstly, I know, I know, IE8 is nearly dead and the recommended way to use Foundation on it is to stick with version 3. However, I have a new site build coming up which unfortunately requires IE8 support, and I'd really like to use the new Foundation 5 wi... (continued)

    Last Reply by manav singh about 1 year ago


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Alexandria's post almost 6 years

Foundation is great, but you are confused on the grid. Since the grid is about Mobile first, if you want the grid to fold over and stack neatly in all one column in Mobile, you need to use large-

Like you I used Foundation 5. I never used a previous version so I am a newbie too, but I'm learning all I can.

If you are duplicating an older layout where Left is Aside, and not the Right, you can use push pull command. Otherwise the above I tested with my own images in Foundation 5.

small-x grid keeps the same no matter how small, and is best used with whatever looks good in mobile. You can swap the dimensions different in large-view for a two column grid by combining the styles like this, I have done:

<div class='row'>
    <section class='large-6 columns'>
      Left<img src="_img/larue.jpg" alt="Product of X."/>

    </section>
    <aside class='large-3 columns'>
      LeftRight<img src="_img/x.jpg" alt="Product of X."/>
    </aside>
    <aside class='large-3 columns'>
      FarRight<img src="_img/x.jpg" alt="Product of X."/>
    </aside>
  </div>
  <div class='row'>
    <section class='large-6 columns'>
      Left<img src="_img/lx.jpg" alt="Product of X."/>
    </section>
    <aside class='large-3 columns'>
      LeftRight<img src="_img/x.jpg" alt="Product of X."/>
    </aside>
    <aside class='large-3 columns'>
      FarRight<img src="_img/x.jpg" alt="Product of X."/>
    </aside>
  </div>

I duplicated your code, but I used all images in portrait mode rather than mixed portrait/landscape. I also changed the image tags to display images from my "_img" folder

The stacking order was left then left right then far right, and repeat.

Essentially small is for when you do not want stacking behavior.

I hope that helps.

PS if you want to use small grids but have them different dimensions in large view, do this:

<div class="row">
    <aside class="large-3 small-6 columns">
      <p>Spanning large columns large, but 6 columns small.</p>
    </aside>
    <section class="large-9 small-6 columns">
      <p>Spanning a wide space when large of 9 columns, 6 columns small.</p>
        <p>No matter how big or large my page gets there will always be 2 columns, divided up this way. In other words one column will not stack on top of the other.</p>
    </section>    
  </div>

PS2, for mobile-mode they will all stack and each will try to use the entire width of available browser space, whatever image will be loading.

I'm brand new to Foundation, but I love the way it is a high level programming language for the UX, and it can do so much more!

Posts Followed


Following

  • No Content

Followers

  • No Content