Questions tagged [neat]

Neat is an open source semantic grid framework built on top of Sass and Bourbon.

What is it about?

Neat is a semantic grid framework built on top of Sass and Bourbon. It is simple enough to get you up and running in minutes, and powerful enough to handle any responsive layout you can dream of.

Why another grid framework?

Because we are not happy with other frameworks. We built Neat with the aim of promoting clean and semantic markup; it relies entirely on Sass mixins and does not pollute your HTML with presentation classes and extra wrapping div's.

It also aims to stay as lightweight as possible; just enough to handle the most common grid uses in modern Web design.

Is it responsive?

Yes. You can even change the grid settings in a specific breakpoint.

Alright. How do I get started?

Install Neat and its dependencies, read the documentation and check the examples page if you get lost. If you want to use Neat on your Rails app, there is a gem for that. Feedback? If you think something is broken or can be improved, fork the repo. You can also tweet your questions or suggestions at https://twitter.com/kaishin and https://twitter.com/kylefiedler.

Bourbon and Neat are maintained and funded by thoughtbot, inc.

Links

Related tags

305 questions
0
votes
1 answer

Adding Neat, Bitters and Refills to a Hammer for Mac

I recently bought Hammer for Mac. I am making a static site, and want to use Bourbon + Neat, Bitters and Refills to style the page. If I am correct, Bourbon is already included in Hammer, but Neat, Bitters and Refills aren't? At the Hammer for Mac…
0
votes
1 answer

Thumbnails not displaying correctly

I am new to Neat. i am trying to create a thumbnail grid gallery. Now I have set the grid with no margin and no padding in li but somehow the gap is there between the first row and second row. its the gap between li and the image in it at the…
Cloudboy22
  • 1,496
  • 5
  • 21
  • 39
0
votes
0 answers

Span-Columns not working in IE9

I am using Bourbon Neat and Bitters on a custom Wordpress Theme project. Having coded the layout I am stuck getting it to look right in IE Temporary URL of the site. A working example using a static site with the same markup. An overview of the…
0
votes
1 answer

positioning a column at the bottom of a row

Hey guys i am using bourbon neat. I a in a dilemma here as i have to position the logo at the bottom of the page or probably 20% above bottom. i have this blue row that is spanning 3.5 columns of the full width container. Now inside that row, i…
designerNProgrammer
  • 2,621
  • 5
  • 34
  • 46
0
votes
2 answers

grid columns not displaying correctly

I am using Bourbon Neat. I set some breakpoints in grid settings and for the mobile version I set 4 like this: $mobile: new-breakpoint(max-width 480px 4); I set the left and right containers like 3 for left and 1 for right; like this: .demo { …
designerNProgrammer
  • 2,621
  • 5
  • 34
  • 46
0
votes
2 answers

why is my list item thumbs displaying like this?

hey i have set some breakpoints and ive set list item in percentage and it fits well in different breakpoints. but my default one which i haven't set is displayed like this. here is my sass code. li { width:20%; …
designerNProgrammer
  • 2,621
  • 5
  • 34
  • 46
0
votes
1 answer

DL is deprecated, please use fiddle message on installing Bourbon and Neat

i just installed SASS version 3.3.5 maple and now using command line I installed bourbon using gem install bourbon which installed bourbon 3.1.8 and also installed neat which is ver 1.6.0 Now i went to my blank folder and run this command…
designerNProgrammer
  • 2,621
  • 5
  • 34
  • 46
0
votes
2 answers

Neat Error: Invalid CSS "!global !default;"

I'm using bourbon and Neat with rails application. I can't make Neat run, one of the most common error that I get is: error stylesheets/sass/neat/functions/_private.scss (Line 48: Invalid CSS after "... $grid-columns ": expected "}", was "!global…
Giorgia Sambrotta
  • 1,133
  • 1
  • 15
  • 45
0
votes
1 answer

reset margins and paddings between columns in Neat

I am new to neat. I want to know what i am doing wrong here as i am trying to reset the auto margins and paddings between columns in the grid . this is my code $grid-columns: 12; $gutter: 0px; The grid column variables are working but the gutter…
designerNProgrammer
  • 2,621
  • 5
  • 34
  • 46
0
votes
1 answer

How can I use two css frameworks in one rails app? (Using foundation and bourbon neat on same app)

I have a rails app that was built using foundation 3 (not using the gem. It is located in vendor/assets/stylesheets/foundation.min.css). And I want to gradually convert my styling code to Bourbon/Neat. One thing I have to have in mind is not to…
0
votes
1 answer

Error with bourbon/neat gems in rails 4 scss

Inside my application.css.scss i have the following code @import 'bourbon'; @import 'neat'; @import 'neat-helpers'; div.container { @include outer-container; } however upon starting my rails app (i am using the better-errors gem) i get the…
user2693845
0
votes
1 answer

Setting body color using Bourobon + Neat

I can't quite get body backround color to show up. @import "bourbon/bourbon"; @import "neat/neat"; body {background: red;} Im also using the Mustache framework so my html is:
<%>…
abarro
  • 25
  • 7
0
votes
1 answer

Automatic rows not working in Bourbon Neat

I've tried using Bourbon Neat to setup some automatic rows but they aren't working. Below is the code I have in my stylesheet file that is supposed to be sorting out the grid: @import "bourbon"; @import "grid-settings"; $visual-grid: true; @import…
hamchapman
  • 2,901
  • 4
  • 22
  • 37
0
votes
1 answer

Trying to use Neat, will there be any conflicts using both Bourbon and Compass?

Like the title says, trying to use Neat that requires Bourbon and i'm already deep into using compass. The question is, will there be any complications with similar defined mixins in both Bourbon and Compass for example? Any recommendations on a…
MrN0
  • 3
  • 1
0
votes
1 answer

Bourbon Neat - How to do automatic columns?

I'm building a website with Bourbon Neat and I need to arrange columns like this: Any ideas on how to write the code? I've tried .column { @include span-columns(1); @include omega(2n) } but all columns have the same height. And I need…
byubay
  • 3
  • 2