Search code examples
sassbourbonneat

neat/bourbon responsive automatic rows

Bourbon/Neat has a neat feature that provides automatic rows (http://neat.bourbon.io/examples/) but I cannot get this feature to become responsive. In my example I use 4 columns for large screens, and 3 columns for medium screen. The 4-columns layout show up nicely, every 4th div wraps to a new row. When I reach the media query point, the layout breaks apart. The divs wrap unexpectedly.

the sass:

@import bourbon/bourbon
@import neat/neat

$medium-screen: new-breakpoint(max-width  992px 12)

.content
  border: 1px solid blue
  .child
    +span-columns(3)
    +omega(4n)
    border: 1px solid red    
    +media($medium-screen) 
      +span-columns(4)
      +omega(3n)
      border: 1px solid green

Some example html:

<head>
    <meta charset="utf-8" />
    <!-- Standard Meta -->

    <link rel="stylesheet" type="text/css" href="sass.css">

</head>

<body>
    <div class="content">
        <div class="child">child1</div>
        <div class="child">child2</div>
        <div class="child">child3 <br> foo </div>
        <div class="child">child4  </div>
        <div class="child">child5</div>
        <div class="child">child6</div>
        <div class="child">child7</div>
        <div class="child">child8</div>
        <div class="child">child9</div>
        <div class="child">child10</div>

    </div>
</body>

</html>

Does someone know when if the 'automatic' row feature can be used with media queries, and if yes how to do it?

Solution

  • The problem comes from the Neat way to clear floats.

    When you're over 992px, Neat uses this CSS:

    .content .child:nth-child(4n+1) {
  clear: left;
}

    And when you're under 992px, it uses this CSS:

    @media screen and (max-width: 992px) {
  .content .child:nth-child(3n+1) {
    clear: left;
  }
}

    Neat doesn't "cancel" the clear: left on .content .child:nth-child(4n+1). You then have a clear: left on the 4th and on the 5th element. To avoid this problem, you'll need to encapsulate every +omega() in it's own media query.

    Here is a Sass example to fix the issue:

    @import bourbon/bourbon
@import neat/neat
$large-screen: new-breakpoint(min-width  993px 12)
$medium-screen: new-breakpoint(max-width  992px 12)

.content
  border: 1px solid blue
  .child  
    +span-columns(4)
    border: 1px solid green  
    +media($medium-screen) 
      +omega(3n)
    +media($large-screen) 
      +span-columns(3)
      +omega(4n)
      border: 1px solid red