Menu icon Foundation

My Posts


  • 4
    Replies
  • Upgrading

    By Damian

    upgradeupgradingversion

    Hey guys, can anyone help me with regards to upgrading foundation? I see that there's a few ways to install it such as using rails, bowers or compass . Can't I just manually copy the new js/css folders and override my existing foundation folders if ... (continued)

    Last Reply by Jack Lena almost 2 years ago


My Comments

Damian commented on Damian's post over 5 years

Thanks for the replies, now I understand my upgrade choices better!

Damian commented on Dennis Midjord's post over 5 years

That's a new question then. :)

I expanded the code. So basically you want to show the 4-grid for large and above. But hide the 4-grid 'content' for small and medium screen. We can use the visibility classes to work some magic by adding the conditional cases for medium and small as seen in the code below to "swap" content. We can now swap the "lorem content" out for any new content you desire. Based on your screencast image, the grids should have equal width by medium and small screen size, but the positions are also retained. This is possibly one of many possible solutions. I hope I understood your question correctly.

This is how it looks visually now.

Large screen (large-8 large-4)
http://i.imgur.com/eVXSApc.jpg

medium screen (medium-6 medium-6)
http://i.imgur.com/tw5MxGt.jpg

small screen (small-6 small-6)
http://i.imgur.com/NwSWPhG.jpg

The code :



<div class="row">
        <div class="large-8 medium-6 columns show-for-medium-up">
            <div class="service-item">
                <i class="service-icon fa fa-globe info-icon"></i>
                  <h5>Lokationer i Europa</h5>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, velit porro asperiores doloremque ex numquam eligendi commodi eveniet repellat quo.</p>
            </div>
        </div>
        <!-- Show column only for large-->
        <div class="large-4 medium-6 columns show-for-large-up">
            <div class="panel">
                <p>Lorem ipsum.</p>
                <p>Aliquid, earum.</p>
                <p>Ad, nobis!</p>
            </div>
      </div>
      <!-- Show column only for medium -->
      <div class="large-4 medium-6 columns show-for-medium-only">
            <div class="panel">
                <p>Your New Content</p>
            </div>
      </div>
    </div>

<div class="row">
          <!-- Show column only for small. Change the large-8 large-4 to become small-6 -->
        <div class="small-6 show-for-small-only columns">
            <div class="service-item">
                <i class="service-icon fa fa-globe info-icon"></i>
                  <h5>Lokationer i Europa</h5>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, velit porro asperiores doloremque ex numquam eligendi commodi eveniet repellat quo.</p>
            </div>
        </div>
        <!-- Add your new content here -->
        <div class="small-6 show-for-small-only columns">
            <div class="panel">
                <p>Your New Content</p>
            </div>
      </div>
</div>

<!-- End of First Row -->

<div class="row">
        <div class="large-4 medium-6 columns show-for-large-up">
            <div class="panel">
                <p>Lorem ipsum.</p>
                <p>Aliquid, earum.</p>
                <p>Ad, nobis!</p>
            </div>
      </div>
      <div class="large-4 medium-6 columns show-for-medium-only">
            <div class="panel">
                <p>Your New Content</p>
            </div>
      </div>
        <div class="large-8 medium-6 columns show-for-medium-up">
            <div class="service-item">
                <i class="service-icon fa fa-globe info-icon"></i>
                  <h5>Lokationer i Europa</h5>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, velit porro asperiores doloremque ex numquam eligendi commodi eveniet repellat quo.</p>
            </div>
        </div>

</div>

<div class="row">
        <div class="small-6 show-for-small-only columns">
            <div class="panel">
                <p>Your New Content</p>
            </div>
      </div>
        <div class="small-6 show-for-small-only columns">
            <div class="service-item">
                <i class="service-icon fa fa-globe info-icon"></i>
                  <h5>Lokationer i Europa</h5>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, velit porro asperiores doloremque ex numquam eligendi commodi eveniet repellat quo.</p>
            </div>
        </div>
</div>

<!-- End of Second Row -->




Damian commented on Dennis Midjord's post over 5 years

Heya, I was looking through your code. You have to separate them by the div rows like below, and it will work.

<div class="row">
        <div class="large-8 medium-6 small-12 columns">
            <div class="service-item">
                <i class="service-icon fa fa-globe info-icon"></i>
                  <h5>Lokationer i Europa</h5>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, velit porro asperiores doloremque ex numquam eligendi commodi eveniet repellat quo.</p>
            </div>
        </div>
        <div class="large-4 columns show-for-large-up">
            <div class="panel">
                <p>Lorem ipsum.</p>
                <p>Aliquid, earum.</p>
                <p>Ad, nobis!</p>
            </div>
      </div>
</div>

<div class="row">
        <div class="large-4 columns show-for-large-up">
            <div class="panel">
                <p>Lorem ipsum.</p>
                <p>Aliquid, earum.</p>
                <p>Ad, nobis!</p>
            </div>
      </div>
        <div class="large-8 medium-6 small-12 columns">
            <div class="service-item">
                <i class="service-icon fa fa-globe info-icon"></i>
                  <h5>Lokationer i Europa</h5>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, velit porro asperiores doloremque ex numquam eligendi commodi eveniet repellat quo.</p>
            </div>
        </div>
</div>

Posts Followed


Following

    No Content

Followers

My Posts


My Comments

You commented on Damian's post over 5 years

Thanks for the replies, now I understand my upgrade choices better!

You commented on Dennis Midjord's post over 5 years

That's a new question then. :)

I expanded the code. So basically you want to show the 4-grid for large and above. But hide the 4-grid 'content' for small and medium screen. We can use the visibility classes to work some magic by adding the conditional cases for medium and small as seen in the code below to "swap" content. We can now swap the "lorem content" out for any new content you desire. Based on your screencast image, the grids should have equal width by medium and small screen size, but the positions are also retained. This is possibly one of many possible solutions. I hope I understood your question correctly.

This is how it looks visually now.

Large screen (large-8 large-4)
http://i.imgur.com/eVXSApc.jpg

medium screen (medium-6 medium-6)
http://i.imgur.com/tw5MxGt.jpg

small screen (small-6 small-6)
http://i.imgur.com/NwSWPhG.jpg

The code :



<div class="row">
        <div class="large-8 medium-6 columns show-for-medium-up">
            <div class="service-item">
                <i class="service-icon fa fa-globe info-icon"></i>
                  <h5>Lokationer i Europa</h5>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, velit porro asperiores doloremque ex numquam eligendi commodi eveniet repellat quo.</p>
            </div>
        </div>
        <!-- Show column only for large-->
        <div class="large-4 medium-6 columns show-for-large-up">
            <div class="panel">
                <p>Lorem ipsum.</p>
                <p>Aliquid, earum.</p>
                <p>Ad, nobis!</p>
            </div>
      </div>
      <!-- Show column only for medium -->
      <div class="large-4 medium-6 columns show-for-medium-only">
            <div class="panel">
                <p>Your New Content</p>
            </div>
      </div>
    </div>

<div class="row">
          <!-- Show column only for small. Change the large-8 large-4 to become small-6 -->
        <div class="small-6 show-for-small-only columns">
            <div class="service-item">
                <i class="service-icon fa fa-globe info-icon"></i>
                  <h5>Lokationer i Europa</h5>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, velit porro asperiores doloremque ex numquam eligendi commodi eveniet repellat quo.</p>
            </div>
        </div>
        <!-- Add your new content here -->
        <div class="small-6 show-for-small-only columns">
            <div class="panel">
                <p>Your New Content</p>
            </div>
      </div>
</div>

<!-- End of First Row -->

<div class="row">
        <div class="large-4 medium-6 columns show-for-large-up">
            <div class="panel">
                <p>Lorem ipsum.</p>
                <p>Aliquid, earum.</p>
                <p>Ad, nobis!</p>
            </div>
      </div>
      <div class="large-4 medium-6 columns show-for-medium-only">
            <div class="panel">
                <p>Your New Content</p>
            </div>
      </div>
        <div class="large-8 medium-6 columns show-for-medium-up">
            <div class="service-item">
                <i class="service-icon fa fa-globe info-icon"></i>
                  <h5>Lokationer i Europa</h5>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, velit porro asperiores doloremque ex numquam eligendi commodi eveniet repellat quo.</p>
            </div>
        </div>

</div>

<div class="row">
        <div class="small-6 show-for-small-only columns">
            <div class="panel">
                <p>Your New Content</p>
            </div>
      </div>
        <div class="small-6 show-for-small-only columns">
            <div class="service-item">
                <i class="service-icon fa fa-globe info-icon"></i>
                  <h5>Lokationer i Europa</h5>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, velit porro asperiores doloremque ex numquam eligendi commodi eveniet repellat quo.</p>
            </div>
        </div>
</div>

<!-- End of Second Row -->




You commented on Dennis Midjord's post over 5 years

Heya, I was looking through your code. You have to separate them by the div rows like below, and it will work.

<div class="row">
        <div class="large-8 medium-6 small-12 columns">
            <div class="service-item">
                <i class="service-icon fa fa-globe info-icon"></i>
                  <h5>Lokationer i Europa</h5>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, velit porro asperiores doloremque ex numquam eligendi commodi eveniet repellat quo.</p>
            </div>
        </div>
        <div class="large-4 columns show-for-large-up">
            <div class="panel">
                <p>Lorem ipsum.</p>
                <p>Aliquid, earum.</p>
                <p>Ad, nobis!</p>
            </div>
      </div>
</div>

<div class="row">
        <div class="large-4 columns show-for-large-up">
            <div class="panel">
                <p>Lorem ipsum.</p>
                <p>Aliquid, earum.</p>
                <p>Ad, nobis!</p>
            </div>
      </div>
        <div class="large-8 medium-6 small-12 columns">
            <div class="service-item">
                <i class="service-icon fa fa-globe info-icon"></i>
                  <h5>Lokationer i Europa</h5>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, velit porro asperiores doloremque ex numquam eligendi commodi eveniet repellat quo.</p>
            </div>
        </div>
</div>

Posts Followed

Following

  • No Content

Followers

  • No Content