Reputation: 2229
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?
Upvotes: 0
Views: 989
Reputation: 428
You can use this to fix the problem;
https://github.com/joshfry/omega-reset-for-bourbon-neat/tree/master/dist
Upvotes: 0
Reputation: 68818
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
Upvotes: 1