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

@include outer-container not taking default defined in grid-settings

So I've got my _grid-settings.css.scss defined as per the docs and in it, among some of the other default overrides is $max-width: 1200px;. Part of the contents of my override: $visual-grid: true; $visual-grid-color: green; $visual-grid-index:…
Jonathan
  • 10,936
  • 8
  • 64
  • 79
0
votes
1 answer

Bourbon Neat breakpoints aren't calculating properly

I'm new to using Bourbon Neat and have a question about how the breakpoints work. In my grid_seeings.scss, I have breakpoints set up like such: $xsm: new-breakpoint(min-width 300px 4); $sm: new-breakpoint(min-width 600px 6); $med:…
Adam Robertson
  • 547
  • 1
  • 9
  • 22
0
votes
1 answer

I have installed bourbon/neat not still getting errors

I have install bourbon and neat in the following way: sudo gem install bourbon sudo gem install neat bower install bourbon bower install nean I have included them with: @import bourbon @import neat I tried but removed: @import…
WebRuin
  • 127
  • 1
  • 3
  • 10
0
votes
0 answers

Neat / Borbon boxes with the wrong border

i try to put all red boxes in the yellow outline and start a new set of fields in the blue outline. I dont understand why only the h3 tag is in the yellow box but the red boxes in the blue outline. http://sassmeister.com/gist/573fd05bac6b393e7640
ThreeFingerMark
  • 989
  • 3
  • 12
  • 21
0
votes
1 answer

Neat: Dynamically increasing column width while maintaining grid structure

I'm using Bourbon's Neat library for my grid system. I have some code like this: section { @include outer-container; aside { @include span-columns(3); } article { @include span-columns(9); } } I want to increase the width of the aside tag by,…
BezR
  • 503
  • 1
  • 6
  • 12
0
votes
1 answer

How to update bourbon neat files in my site

I installed Neat prior to the most recent gem update to 1.7.1. Now I'd like to update the files in my site install, but I'm not sure how to accomplish that. gem list indicates neat (1.7.1) I tried neat install in my sass directory, but I get the…
shenoa
  • 28
  • 4
0
votes
1 answer

Sass gem conflicting with framework installations

I was trying to set up Foundation 5 and now have switched to Neat because of several issues preventing it from installing properly. One of the blogs I troubleshooted with had me remove the sass gem and install it again. I broke something a long the…
0
votes
1 answer

Neat responsive horizontal gutter

When using the Neat framework, the column's gutter automatically adjusts to the window size (as is expected from grid frameworks, of course). In my current project I'd like to use the gutter-width ($gutter) as top or bottom padding for some…
Frank
  • 1,374
  • 2
  • 16
  • 34
0
votes
1 answer

Sticky footer for bourbon neat

Has anyone figured out how to create a footer which sticks at the bottom of the page while keeping it responsive using Bourbon Neat ? All of the better known sticky footer solutions are not 'compatible' with Neat.
Frank
  • 1,374
  • 2
  • 16
  • 34
0
votes
1 answer

Bourbon Neat -- responsive grid

Ive looked at the examples for Bourbon Neat responsive grid. To my knowledge I'm using it correctly. Issues the
tags all take up their own line as if I had made them all span-columns(12) My guess is that I am not nesting the elements…
ma77c
  • 1,052
  • 14
  • 31
0
votes
1 answer

Bourbon Neat, how to make a fixed positioned element work with grid system?

How do I make a fixed positioned element work with Neat grid system? box3 is an element with fixed position, I didn't give it a width because I want it to fit in the grid with span-columns(6) and shift(3), so it is centered. Anyway can make this…
7537247
  • 303
  • 5
  • 19
0
votes
1 answer

Bourbon Neat - uneven column count

I am trying to build a Metro-like layout, with various column widths (without using anything like Masonry), but same heights, like this: -------------------------- | col(2) | col(1) | -------------------------- | col(1)| col(1)| col(1)…
Tomek Buszewski
  • 7,659
  • 14
  • 67
  • 112
0
votes
2 answers

neat gem not installed correctly

i'm having trouble installing the bourbon neat gem in a rails project. When I follow the installation instructions below, it installs neat in c:/Ruby/lib/ruby/gems/2.1.0/gems/neat-1.5.1 but it doesn't add a neat folder in the working directory of my…
0
votes
1 answer

SASS (SCSS, Bourbon, Neat) Grid isn't working

I am trying to use the underscore base theme for wordpress with SASS, Bourbon and NEAT to create a nice flexible grid. HTML:
0
votes
2 answers

HyperNEAT network for Time Series forecasting with Encog help needed

I am using Encog AI Framework for Time Series forecasting using HyperNEAT network. Here is the simple code I use to create the network. Substrate substrate = SubstrateFactory.factorSandwichSubstrate(columns*windowSize,days); …