Stacking in bourbon neat

Design Design for Developers Tutorial
1

Hi @kylefiedler

I am trying to use bourbon neat in my new project, and I am not sure how I get the divs to stack when the page gets to small like it does on the examples page.

I have got it all working but it is just responsive at the moment, it’s as if there are no breakpoints or something.

Do I need to import something or do anything special for this to work?

thanks

2

@scott With Neat you need to be explicit about your breakpoints. I usually try to write my Sass mobile first so any layout goes into a media query unless it will be used at a mobile size. something like this:

aside.sidebar {
  @include media($min-medium-screen) {
    @include span-columns(3);
  }
}

Make sense?

1 Like
3

@kylefiedler thanks for the quick response,

Is that all I need to do? no special import at the beggining of the file?

And I think that makes sense.

Every layout goes in a media query except mobile ones?

4

As long as you have a $min-medium-screen variable it will work all from Neat.

That’s the way that I do it and suggest doing it.

5

@kylefiedler after trying this out, I don’t think I do understand :frowning:

Sorry I don’t understand how to set a breakpoint for mobile, if It’s not in a media query?

Thanks

6

@kylefiedler is this what you mean?

div.container {
  @include outer-container;
}

header {
  @include row;
}

.logo {
  background: tomato;
}

nav {
  background: #333;
  color: #FFF;
}

@include media(500px) {
  .logo {
    @include span-columns(5);
  }

  nav {
    @include span-columns(7);
  }
}
7

@scott

The mobile styles are everything not in a media query.

I prefer to keep the styles grouped by selector so that I know where all the styles are, there isn’t any jumping up and down the file. Like this:

div.container {
  @include outer-container;
}

header {
  @include row;
}

.logo {
  background: tomato;

  @include media(500px) {
    @include span-columns(5);
  };
}

nav {
  background: #333;
  color: #FFF;

  @include media(500px) {
    @include span-columns(7);
  };
}
1 Like
8

@kylefiedler Thanks for all your help :slight_smile: sorry it took so long to sink in!

9

@kylefiedler How do I make it so the mobile layout is 4 columns and the desktop is 12 ?

Thanks

10

@scott You need to use a new-breakpoint I suggest looking over the documentation here: Neat - Documentation for Version 4.0.0

11

@kylefiedler I looked at that, but I thought the Idea was to have no media queries for the mobile layout?

Thanks

12

@scott yep you can change the base layout to be 4 columns by overriding the $grid-columns variable and then the rest would use a new-breakpoint.