Stack Overflow
Stack Overflow

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

max-width element in Neat grid creates right margin

I am relatively new to Bourbon Neat and since the recent update I have been a little lost. I have a custom grid I have set up media queries for. The elements in the grid contain a 500x500 photo with a description underneath. My problem is if I set…
gpb14
  • 3
  • 7
0
votes
1 answer

Responsive Image in Neat 2.0

Is there a recommended way to get an image to be 100% of the height of a column in Neat based on the size that the text makes the column? I've attached an example of what I'm trying to accomplish below. I'm trying to make the image fill the 1/3…
Tyler Bramer
  • 275
  • 2
  • 14
0
votes
1 answer

How to overwrite bourbon neat Omega()

I'm currently working on a layout that requires a different layout on mobile, tablet and desktop. Mobile - Stacked Tablet - two column layout desktop - three column I'm finding that my two columns layout sticks all the way up to my desktop…
Samuel
  • 5,529
  • 5
  • 25
  • 39
0
votes
1 answer

Center reponsive image inside a div

I'm attempting to center an image wrapped by an anchor tag inside a div. I've attempted to use display flexbox and justify-content:center the image which works to an extent, but The height of the image remains the same whilst the width changes…
Samuel
  • 5,529
  • 5
  • 25
  • 39
0
votes
1 answer

Using custom media queries with Neat

The documentation grid-media on Neat 2.0.0 describes the ability to set a media query in pixels. By default, this will output a pixel value as a min-width media query. For example: $custom-neat-grid: ( columns: 12, gutter: 50px, media:…
Kai
  • 13
  • 5
0
votes
1 answer

Codekit + Neat compiling error

I'm new to Neat/Bourbon and trying to setup using Codekit so that I can begin building some awesome grids! I have installed Neat using the built in Codekit version by inserting @import "neat"; into my main SCSS file. It appears that this is working…
dungey_140
  • 2,602
  • 7
  • 34
  • 68
0
votes
1 answer

How to Get Bourbon, Neat, Bitters & Refills to Work Together

It seems to me that there are some conflicts between Bourbon, Bitters, Neat and Refills. I have gotten errors about undefined variables and mixins. From searching around, my understanding is that Bitters requires version 5.0 beta of Bourbon whereas…
Moshe
  • 6,011
  • 16
  • 60
  • 112
0
votes
1 answer

Reversing row direction for every 2nd child using Bourbon neat

I'm attempting to reverse the row layout for every 2nd child using Bourbon Neat reset-layout-direction mixin. However, this does not seem to be working using the nth-child pseudo selector. What am I doing wrong? Here is the codepen HTML
Samuel
  • 5,529
  • 5
  • 25
  • 39
0
votes
2 answers

Remove margin nested columns with Bourbon Neat

How do I remove the margin from two columns with nested offset columns inside of them. I want to make sure that the content within the column's is always centered and I can not seem to get this to work using the @include row (table); mixin. The…
Simon
  • 147
  • 1
  • 10
0
votes
1 answer

How to add outer gutter to Bourbon Neat's outer-container?

On widths smaller than $max-width, the grid starts from the edge of the viewport. I added some padding to avoid the text from starting from the edge of the viewport, but now it's out of alignment with the grid. How can I make the grid start from the…
blogjunkie
  • 237
  • 1
  • 4
  • 18
0
votes
1 answer

What is new-breakpoint second argument for?

Im trying to learn bourbon-neat, came across its breakpoint feature that takes a query and grid-columns. What is the use of grid-columns there? Why would you set the grid-columns like that when you can change the columns on the fly with declaration…
Chopnut
  • 607
  • 2
  • 8
  • 25
0
votes
1 answer

why is Bourbon Neat moving 4th item of first row to next row?

I'm trying to implement an image gallery of researchers. my view template looks like this: app/views/members/index.html.erb

Current Members

<% @members.each do |member| %> <% if member.active %>
Toontje
  • 1,415
  • 4
  • 25
  • 43
0
votes
1 answer

NEAT Neuronal network JavaScript

I started to learn a bit about neuronal networks I wanted to create a neuronal network which learns to play tetris. So I stumbled across NEAT JS Library and hooked it up with a console tetris game in nodejs. My concern is that something is wrong…
DomHey
  • 69
  • 2
  • 9
0
votes
2 answers

Full width container with fix width content. Sass, Bourbon Neat

I wish to make my background full width, with a image or colour background filling the row. However, I would like the content to sit in the middle spanning the standard 12 cols dictated by neat. Currently my structure is:
…
Grant Smith
  • 321
  • 2
  • 15
0
votes
1 answer

NEAT with multiple output

I'm currently implementing a program classifier for my coursework. My lecturer ask me to use "Evolving ANN" algorithm. So I found a package called NEAT (Neuro Evolution of Augmenting Topologies). I have 10 inputs and 7 outputs, then I just modify…
Ilham Muhammad
  • 5
  • 3
1 2 3
…
20 21