Bourbon neat grid

Design Design for Developers Tutorial
1

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?

Thanks

2

@scott I use http://guideguide.me/ to create grids in photoshop. The default grid variables can be found here: https://github.com/thoughtbot/neat/blob/master/app/assets/stylesheets/settings/_grid.scss

3

@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?

thanks

4

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

1em = 16px
golden ratio = 1.61803399

$column = 77.66563152
$gutter = 25.88854384
5

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:

6

@daryllxd We are currently working up a library here: http://refills.bourbon.io/ 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.