Foundation & Isotope Transition Animaiton & Breakpoint Issues - CSS-Tricks

This topic is empty.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts

September 17, 2014 at 10:24 am #183393

Participant

I’m testing out a new Foundation-based page layout using Isotope. The transitions on my “isotope-item’s” were working, however now they’re not.

I need help navigating where I went wrong with the CSS so I can re-enable the transition animations. And as an added bonus, why my first breakpoint doesn’t force the 4 single-wide/tall boxes to the right, up underneath the four-wide/tall main box?

There are a lot of files going on, so I’m just linking out…

I’m using the latest Foundation Essentials

I’ve modified index.html, here’s the PasteBin for it

I’ve modified foundation.css as well, here’s the Pastebin for that

And, if it wasn’t obvious, the Isotope plugin

September 17, 2014 at 10:38 am #183396

bmoneruiux

Participant

Maybe this Pen would better help

CodePen Example (not 100% due to using CDNs)

September 18, 2014 at 6:08 am #183461

bmoneruiux

Participant

@Paulie_D

I’ve uploaded this project to “test.brandonmoner.me”, and it looks TOTALLY broken. However that same project locally is 100% A.Ok. Can you lend an eye?

September 18, 2014 at 6:30 am #183473

bmoneruiux

Participant

Can anyone help me verify proper style & script file placement? I’m seriously trying to trace down why test.brandonmoner.me isn’t animating the transitions like it once was.

<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation 5.4.3 | Test Site</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
    <link rel="stylesheet" href="css/foundation.min.css" />
    <link rel="stylesheet" href="css/safe.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js"></script>
    <script src="http://isotope.metafizzy.co/beta/isotope.pkgd.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body class="split">
    <header class="left">
      <a class="brand brand-bg" title="This is a Demo Page" href="#"><img src="http://1.bp.blogspot.com/-ux-A0V8Uh9c/UMajufgUAAI/AAAAAAAADI4/yWxnnUfAc-M/s1600/Google-Mobile-App-Logo.png" alt="Logo"></a>
      <nav class="site-nav" id="navigation">
        <ul class="main-nav">
          <li class="browse "><a class="main-nav-item" href="#"><strong>LINK 1</strong> <span class="subhead">Sub-Head 1</span> <i class="ss-navigateright icon"></i></a></li>
          <li class="learn "><a class="main-nav-item" href="#"><strong>LINK 2</strong> <span class="subhead">Sub-Head 2</span> <i class="ss-navigateright icon"></i></a></li>
          <li class="discover "><a class="main-nav-item" href="#"><strong>LINK 3</strong> <span class="subhead">Sub-Head 3</span> <i class="ss-navigateright icon"></i></a></li>
        </ul>
      </nav>
    </header>
    <div class="right">
      <div class="grid isotope clearfix">
        <div class="grid-sizer"></div>
        <div class="grid-cell isotope-item item four-wide four-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
        <div class="grid-cell isotope-item item triple-wide triple-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
        <div class="grid-cell isotope-item item double-wide single-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
      </div>
    </div>

    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
    <script>
    $( function() {
      $('.isotope').isotope({
        itemSelector: '.item',
        masonry: {
          columnWidth: '.grid-sizer'
        }
      });
    });
    </script>
  </body>

September 23, 2014 at 4:38 pm #184402

Soren

Participant

seriously try swapping these two scr…

<script src="isotope.pkgd.js"></script>
<script src="jquery.min.js"></script>

…ipts around like so ;)

<script src="jquery.min.js"></script>
<script src="isotope.pkgd.js"></script>

September 24, 2014 at 6:01 am #184637

bmoneruiux

Participant

Hey @Soren

Haven’t updated this post because I hadn’t been getting answers from here, but I did this in my recent iteration here.

My animations are back, but I’m not hunting for the reason why my boxes aren’t cascading the way I think they should. If you visit that link and play with it, the boxes do some funky movements and I think it’s attributed to the .grid-sizer width I have set. Not sure what the most optimal number is in this case.

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The forum ‘CSS’ is closed to new topics and replies.