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

What is the best way to deal with the mandatory left margin that comes with grid-column in Bourbon Neat 2.0 above?

This is the output of a grid-column mixin as mentioned on the site - .element { width: calc(25% - 25px); float: left; margin-left: 20px; } My problem is that I don't want gutters before and after the first and last columns. Bootstrap uses a…
0
votes
1 answer

Bourbon/Neat VS 2017 unexpected character sequence

So, I installed bourbon and neat in my project. It's an ASP.NET application. I didn't set up gulp, I just downloaded it directly to my project in a file called _libraries. The tree is like this: root -_resources -scss -_global …
Jabberwocky
  • 768
  • 7
  • 18
0
votes
2 answers

Bourbon Neat grid-push not working as expected?

I have a really simple issue that seems to be difficult to solve. I want to stick with the normal standard 12 column neat grid, but I want the two .homeSplit divs to take up 5 columns each. I would like the second one(.insights) to get 1col of space…
0
votes
1 answer

Full width, 50/50 layout in Neat 2.x?

I'm trying to achieve a 50/50 panel layout using Bourbon Neat 2.x, where the left panel is going to have a background colour, but grid margins are causing me some issues. I initially just had the standard grid-container as a parent, with two divs…
Paul
  • 753
  • 5
  • 19
0
votes
1 answer

Neat 2.1.0 - Automatic Rows / Omega feature removal

In previous versions of neat, it was possible to achieve "automatic rows" using @include omega(); From what I can see, this feature has been removed in the latest version of Neat? Currently, I'm having to create an additional div to act as a…
0
votes
1 answer

Gulp-sass only compiling one of the bourbon-neat mixins

I'm struggling to get gulp to correctly compile bourbon-neat sass files. Bourbon-neat is installed (locally, as are the rest of the gulp-sass related modules), @import 'neat' is added to my main site scss file and my gulp.js file includes the…
wordfool
  • 63
  • 5
0
votes
1 answer

How can one have disjoint genes when comparing two genomes in NEAT?

In the NEAT paper it is said that "Genes that do not match are either disjoint or excess, depending on whether they occur within or outside the range of the other parent’s innovation numbers". I can't understand how it is possible for disjoint genes…
mzmyslowski
  • 121
  • 1
  • 2
  • 11
0
votes
1 answer

Grid-Media IN vs OUT

Me and a coworker went into an eternal discussion about what is the best way to use Neat Grid-Medias. Consider the following approuch: Approuch A: .mydiv { font-size: 14px; @include grid-media($somegridvar) { font-size: 18px; } } Then,…
Renato Alves
  • 115
  • 7
0
votes
1 answer

How to install and set up Neat in Gulp correctly?

Bourbon and Normalize are working, Neat don't. I tried different ways and always received a message 'no mixine named..', that is not correctly established, although I installed with the help of NPM and Bower var neat =…
Vitaliy Pogoretsky
  • 109
  • 1
  • 2
  • 8
0
votes
1 answer

Neat 2.0 is creating 13 columns instead of 12

I'm trying to integrate Neat 2.0 into an existing code base (which in itself is basically from Web Starter Kit). For some reason, when I turn on grid-visual I'm seeing 13 columns instead of 12. Is there any particular reason why this might occur?…
skube
  • 5,867
  • 9
  • 53
  • 77
0
votes
0 answers

Handle elements that occasionally spill outside of main grid

I would like to use Neat 2.0 but I'm wondering what would be the correct approach to handle elements that occasionally spill outside of the main 12 column grid. I see designs that do this from time to time, either by spilling out just a little or…
skube
  • 5,867
  • 9
  • 53
  • 77
0
votes
1 answer

Ideas for a 2D game for a neural network to play

I am currently trying to implement my own neural-network library, and I would like to test it by letting it (and networks made with other librarys) play a 2D game. The problem is I can't really find a good game for a neural network to…
0
votes
1 answer

How do I create a three-column grid with neat?

I've had this question answered previously here: How to do a three column grid with bourbon neat? However, since I updated bourbon and neat on my system, that method no longer works. Again, my markup looks like this:
bob
  • 753
  • 4
  • 15
  • 27
0
votes
1 answer

SASS (not SCSS) version of Bourbon Neat

I am wondering if there is a SASS (not SCSS) version of Neat that I can download? The official website uses SCSS. Currently my entire existing app is using SASS, and I don't want to introduce another style format. Or can I import external SCSS…
gye
  • 1,374
  • 3
  • 16
  • 27
0
votes
2 answers

Bourbon Neat 1 - make elements span the gutter

I keep receiving designs whereby the designer has followed a grid, but occasionally the elements line up to the other side of the gutter, or 2 elements meet halfway though a column. Please see the image - the first row shows normal conformity to a…
Chris
  • 439
  • 4
  • 20