user5898548 user5898548 - 2 months ago 19
Sass (Sass) Question

Neat/omega grid issue

I am very new to Neat and currently working on a simple grid that displays a gallery of images.

My code

$mobile: new-breakpoint(max-width 500px);
$tablet: new-breakpoint(max-width 768px);

article{
background-color: #efefef;
margin-bottom: 2em;

@include span-columns(3);
@include omega(4n);

@include media($tablet){
background-color: orange;
@include span-columns(4);
@include omega(3n);
}

@include media($mobile){
background-color: yellow;
@include span-columns(6);
@include omega(2n);
}
}


Now on desktop all shows as it should, but when I resize for tablet or mobile, the layout breaks and I get huge gaps in my layout... I know it's a silly little thing I am missing, but just can't see it ((( I hope someone can help me.

Answer

Omega can be a bit tricky with Neat. I would recommend using mutually-exclusive media queries to solve your problem, you can read more about them here:

https://github.com/thoughtbot/neat#how-do-i-use-omega-in-a-mobile-first-workflow

This stops the omega declarations persisting and breaking your layouts.

I would adjust your code so it looks like this:

$mobile: new-breakpoint(max-width 500px);
$tablet: new-breakpoint(min-width 501px max-width 768px);
$desktop: new-breakpoint(min-width 769px);

article{
  margin-bottom: 2em;
  @include media($mobile){
    background-color: yellow;
    @include span-columns(6);
    @include omega(2n);
  }

  @include media($tablet){
    background-color: orange;
    @include span-columns(4);
    @include omega(3n);
  }

  @include media($desktop){
    background-color: #efefef;
    @include span-columns(3);
    @include omega(4n);
  }
}

I have done a quick pen here so you can see it in action:

http://codepen.io/mikehdesign/pen/qajxrW

The height is just added to article for this example, it is not necessary if you have content in them.

Hope this helps

Comments