1

I am using bourbon neat for thee first time. what I am trying to do is to set max-width property of neat in _grid.css Now I am trying to do it in PX say 700px but by default its $max-width: em(1000) !default; I tried giving it in PX but it doesn't work. can someone please tell mee where i am doing it wrong? thanks.

designerNProgrammer
  • 2,621
  • 5
  • 34
  • 46

2 Answers2

0

I see. I should've been a little more specific.

I'm referring to a different file. So if you've fully installed bitters, you should have a folder in your stylesheet directory named bitters.

You want to find the file stylesheets/bitters/_bitters.scss

Open that file and it should look like this:

// Neat Settings -- uncomment if using Neat
///////////////////////////////////////////////////////////////////////////////
// @import "neat-helpers"; // or "neat/neat-helpers" when not in Rails
// @import "grid-settings";


// Bitters
///////////////////////////////////////////////////////////////////////////////
@import "variables";
@import "extends/base";
@import "mixins/base";
@import "typography";
@import "forms";
@import "tables";
@import "lists";
@import "flashes";

You see the @import "grid-settings"; is currently commented out. You'll want to uncomment that.

Then, open that exact file: stylesheets/bitters/_grid-settings.scss

And from that file you can now manipulate the $max-width variable.

I hope that helps!

Carolann Bonner
  • 29
  • 9
  • as said by the github manual ive importeed it under my main scss file between bourobn and neat import. – designerNProgrammer Apr 19 '14 at 03:55
  • I see - I should've been more clear. What you're referring to in your last comment is the manifest for your app or site. – Carolann Bonner Apr 19 '14 at 04:03
  • added to main.scss for my website. – designerNProgrammer Apr 19 '14 at 04:05
  • I edited my first answer to be more explicit about the structure of bitters. – Carolann Bonner Apr 19 '14 at 04:14
  • maybe i can explicity write it in the scss file. – designerNProgrammer Apr 19 '14 at 04:20
  • Which scss file are you referring to, the `main.scss` file? Could you make a gist of your `main.scss`, `_bitters.scss` and `_grid-settings.scss`? Or just paste the code for them here? I'm wondering about 3 things: In your initial question, you labeled `_grid-settings.scss` as `_grid.css`. If it has the `.css` suffix, it won't understand the variable, and should be throwing you an error. You also had `!default` at the end of the `$max-width` variable which you shouldn't need. And I'm assuming you're wanting the code to read `$max-width: 700px;`. Just making sure you dropped those parens. – Carolann Bonner Apr 19 '14 at 04:27
0

$max-width: em(1000) is using a mixin defined in Bourbon that allows you to set a value in pixels and the mixin will convert it to ems. so the example $max-width: em(1000) is equal to $max-width: 1000px

Just go ahead and change that number to the value you want in pixels and let the mixin do the ems math for you.

Hope that helps

MandsAtWork
  • 88
  • 9