Bourbon neat grid

Hi @kylefiedler

I am trying to make a grid for photoshop based on bourbon neat, can you tell me what the column width and gutter is by default please?


@scott I use to create grids in photoshop. The default grid variables can be found here:

@kylefiedler thanks for the quick response!

I did look in there but I couldn’t figure out what the px size was for this?

$column: golden-ratio(1em, 3) !default; // Column width
$gutter: golden-ratio(1em, 1) !default; // Gutter between each two columns

How do I work that out?


@scott Somehow this fell off my radar. I’m sorry.

1em = 16px
golden ratio = 1.61803399

$column = 77.66563152
$gutter = 25.88854384 

Hey @kylefiedler, if you don’t mind me asking, what UI components do you/thoughtbot use for your projects? Stuff like calendars, numbers pickers, date/times, etc. I’m currently using Bootstrap/JQueryUI components, but Neat/Bourbon seem so much better since they are mixin-based rather than “@import everything”. Thanks. :smile:

@daryllxd We are currently working up a library here: where you pick and choose which components that you want. For css components I generally I try to have control over the styling of everything which leads to a lot of custom styling and components for the app I’m working on.

For javascript components, it’s generally a mish mash of trying to finding the thing that works for that particular use case. We’ll do what you are which is just using a single part of Jquery UI or Bootstrap.