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
2 answers

Bourbon Neat still using 12 columns even when guides show 4 columns

I am using Bourbon and Neat in a static Octopress site I am building. I'm using the _grid-settings.scss file with no changes, other than turning on the guides ($visual-grid: true;). In my screen.scss I'm loading grid-settings after Bourbon, but…
Stratus3D
  • 4,648
  • 4
  • 35
  • 67
0
votes
2 answers

Bourbon Neat - Full width outer-container with not gutter

Hello, I'm playing around with Bourbon Neat, and I am trying to do three columns which cover the 100% of the windows width outside the configured grid ($max-width: em(1160)), and without any gutter. Similar to the following image (blue, yellow and…
andresgl
  • 117
  • 9
0
votes
1 answer

Div elements not spanning full-width of Bourbon neat grid

Not sure why my div elements are not spanning the full width of my bourbon grid. The process only happens for the last two divs. see image. Why does it behave in this way? Experiencing a similar issue on codepen. Why aren't the div elements…
Samuel
  • 5,529
  • 5
  • 25
  • 39
0
votes
1 answer

Prevent Sass from adding number with unit with unitless number

I was having some weird problems with the omega() function of Bourbon Neat, and so I looked into the source code, where I saw the use of the nth() function. After trying out nth in SassMeister I see that all Sass engines produce the same weird…
oligofren
  • 20,744
  • 16
  • 93
  • 180
0
votes
0 answers

Variable number of parameters in sass mixin and looping over each

I'm using Bourbon Neat in my project and Neat has this neat (ha!) little mixin for media queries: $xs-media: new-breakpoint(min-width 1px max-width 480px); @include media($xs-media) { // your styles } But @include media doesn't support multiple…
user818700
0
votes
0 answers

Centering elements in column with neat

I'm just getting started with neat and I'm working on the admin page for a site. I'm just trying to recreate a pretty standard page where the settings show up in the center of the screen, and I'm just curious how you do this with neat. In the past…
bringel
  • 482
  • 5
  • 17
0
votes
2 answers

Columns don't align properly when more than 2 in a row

I have this css: div.row { @include outer-container; div.col-5 { @include span-columns(5); } div.col-6 { @include span-columns(6); } } And this html:
Front End Developer
dzimi
  • 769
  • 3
  • 10
  • 20
0
votes
1 answer

Issue with Bourbon / Neat Grid - grids dont align correctly

I am new to Bourbon / Neat framework, and the past 2 days i've been setting my environment up, but i am having issues configuring the Grid. The issue is that no matter how much i try, there are some spacing issue when it comes to the grid, there is…
sadiqevani
  • 500
  • 5
  • 14
0
votes
1 answer

Bourbon / Neat - How to break out of grid to display a row at full browser width?

I am used to doing this trick in Bootstrap 3 to temporarily break out of a grid and show a row at full browser width (useful for rows that need full-width colour backgrounds):
Natacha Beaugeais
  • 1,003
  • 1
  • 11
  • 24
0
votes
1 answer

Make column order different to source order with Neat grids?

Im using the Neat grid framework for Bourbon. How can I have a columns laid out differently to there source order? So in the example below testB comes before testC in the source order. But I would like the left hand column to be testC and the right…
Evanss
  • 23,390
  • 94
  • 282
  • 505
0
votes
1 answer

How to show the best network structure and save the best network weights?

I am going to analyze the data using NEAT(Encog C# version). And then, I would like to confirm the network structure and the network weights when the learning was converged. Although I have been reading the Encog documention, I cannot find the…
whatchan
  • 11
  • 1
0
votes
1 answer

Multiple tab sections on one page

I am using the following code for some responsive tabs on my site: HTML div class="vertical-tabs-container">
Item 1
Mike Harrison
  • 1,020
  • 2
  • 15
  • 42
0
votes
0 answers

Find/reduce scss errors in media query mixin

We've been working with Neat framework for 6 months and love it. However suddenly we have a critical problem with one of their excellent mixins which we are entirely dependant on for media queries. Here's a link to the…
jojojohn
  • 725
  • 2
  • 10
  • 19
0
votes
1 answer

How to use Bourbon Neat with Isotope.js?

I have a page with an unordered list and inside that list many list items which fall into various categories. Each list item fills 6 columns of a 12 column grid with Bourbon Neat. I would like to be able to filter each list item by category with a…
patrick.altair
  • 351
  • 1
  • 2
  • 11
0
votes
0 answers

Neat (bourbon.io) columns not matching up with outer container, is that right?

Edit: Updated the screenshot to match the markup Edit: full markup is at https://gist.github.com/matgargano/68de587d905029bf3b29 I added bourbon and neat and set in my settings: $visual-grid-opacity: 0.4; $visual-grid-index:…
matgargano
  • 401
  • 5
  • 15
1 2 3
…
20 21